WP-Note Flexible

2013年11月17日 6

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

もくじ

特徴と動作デモ

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

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

使いかた

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

ショートコード 注釈の種類
note 簡単な注釈を記述します。
important 重要なポイントを記述します。
tip アイディアなどを記述します。
warning 警告を記述します。注意点や記事の誤りを訂正するときなどに利用するとよいでしょう。
help サポート情報などを記述します。

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

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

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

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

動作デモ

note
The quick brown fox jumps over the lazy dog
Link Text
important
The quick brown fox jumps over the lazy dog
Link Text
tip
The quick brown fox jumps over the lazy dog
Link Text
warning
The quick brown fox jumps over the lazy dog
Link Text
help
The quick brown fox jumps over the lazy dog
Link Text

ダウンロード

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

日付 公開ページ サイズ
2014/4/6 1.0.1 336KB
2013/11/17 1.0.0 97KB

動作環境

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

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

ブラウザ バージョン OS 備考
IE 11 Windows 8.1 表示フォントはメイリオ、文字のサイズは「大」。
Firefox 25.0.1 Mac OS X Mavericks Retina ディスプレイにて確認
Google Chrome 31.0.1650.57
Safari 7.0

更新履歴

  • 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

  • がちょぴん
    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とか。

  • 2014年10月1日 7:32 PM 返信

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

REPLY

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です