本ソフトウェアは、WordPress の人気プラグイン WP-Note 互換の注釈機能を提供します。

特徴と動作デモ

WordPress の人気プラグイン WP-Note との互換を保ちながら、デザインをディスプレイの解像度に依存しない ( = Flexible ) ように変更しています。

WP-Note におけるアイコン部分には、ビットマップ画像のかわりに Font Awesome の提供するアイコン フォントを利用しています。また、全体的なデザインは Flat UI を参考にしたフラット調となっています。

使いかた

ページ中で注釈としたいテキストについて、以下のショートコードで囲みます。

例えば、記事中に簡単な注釈を加えたいなら、以下のように記述します。

[note]ここに注釈を記述します[/note]

※このサンプルでは［］を全角にしていますが、実際に指定する場合は半角にしてください。

ショートコードは WP-Note 互換です。そのため、WP-Note を無効にしてから本プラグインを有効にすることで、既存のショートコードを変更することなく、環境を移行できます。

動作デモ

本サイトを WordPress から GatsbyJS へ移行した際に動作デモは無効化されました。以下はその名残をコード ブロック化したものです。

[note]**note**
The quick brown fox jumps over the lazy dog
[Link Text](http://example.com/)[/note]

[important]**important**
The quick brown fox jumps over the lazy dog
[Link Text](http://example.com/)[/important]

[tip]**tip**
The quick brown fox jumps over the lazy dog
[Link Text](http://example.com/)[/tip]

[warning]**warning**
The quick brown fox jumps over the lazy dog
[Link Text](http://example.com/)[/warning]

[help]**help**
The quick brown fox jumps over the lazy dog
[Link Text](http://example.com/)[/help]

ダウンロード

GitHub にリリース用イメージを公開しています。

動作環境

以下の環境を想定しています。

• PHP 5.0 以上
• WordPress 3.0 以上
• WordPress の文字エンコード設定が UTF-8 である事
• CSS3 に対応しているモダン ブラウザ
  • IE の場合、IE9 以降を強く推奨
  • CSS3 の display:table-cell を利用している関係で、IE8 未満は動作対象外となります

これらを満たした上で、以下のブラウザで動作確認を行いました。

更新履歴

• 2014/04/06 : v1.0.1 リリース
• 2013/11/17 : v1.0.0 リリース

インストール方法

1. プラグインの zip ファイルをダウンロードして保存します
2. WordPress の管理画面を開きます
3. 左のメニューから「プラグイン」部分から「新規追加」を選択してください
4. 「プラグインのインストール」画面上部のメニューから「アップロード」を選択してください
5. 表示された画面からプラグインの zip ファイルをアップロードする事でインストールが実行されます
6. プラグインの管理画面から WP-Note Flexible を有効にしてください

免責事項

• 本ソフトウェアを使用した事による、いかなる損害も作者は一切の責任を負いませんので、自己の責任の上でご使用下さい
• 本ソフトウェアのライセンスは GPLv2 となります

ご要望・不具合報告

このプラグインに関するご要望・不具合の報告は、このページのコメントや Twitter などでお願いします。

Comments from WordPress

• がちょぴん 2014年4月8日 2:41 PM

  初めまして。

  任意で色変更できるなら利用したいですね。 (色変更できたら使い勝手良さそうだと思います)

• アカベコ 2014年4月8日 8:53 PM

  がちょぴんさん、こんばんは。

  色変更は現在のところプラグインの CSS を直接編集する方法のみとなっています。 もし変更可能にするとしたら、管理画面からの指定をサポートするという感じでしょうか。 将来バージョンで検討してみます。

• がちょぴん 2014年4月8日 10:12 PM

  返信ありがとうございます。

  現在、CSSを編集する方法のみなんですね。 管理画面から色指定できたら嬉しいです。 (アイコンフォントも変更できますか？)

  もし、実装可能でしたら検討お願いします。

• アカベコ 2014年4月8日 11:17 PM

  背景色だけ変更するとテキストが読みにくくなる可能性があるので、背景、テキスト、リンク テキストを対象とすることになるでしょう。

  アイコンは Font Awesome のクラスをそのまま指定しているので、定義されているものを選択する方式がよいかもしれませんね。ただ Font Awesome のアイコンは種類が膨大 http://fortawesome.github.io/Font-Awesome/icons/ なので、これを全表示して選択させるのは UI 的にどうだろうか、という悩ましさがあります。

• がちょぴん 2014年4月9日 4:27 PM

  返信ありがとうございます。

  背景・テキスト・リンクテキストも対象にしないと確かに読みにくい可能性ありますね。

  アイコンに関しては、いくつかピックアップして選択できるような形はどうでしょうか？ 例えばチェック表記なら「Font Awesome」サイトより、fa-check・fa-check-squareとか。

• oga 2014年10月1日 7:32 PM

  はじめまして。 Googleの検索からたどり着いて、早速使わせていただいております。 スタイルシートを編集して背景色と文字色、アイコンの表示位置を変えて使わせていただいています。私のブログは、YOKOというテーマを使っているのですが、PC（MacBookAir 13インチ）、iPad、iPod touchいずれで見ても、きれいに表示され、とてもありがたかったです。 使い勝手の良いプラグインをありがとうございました。