• かちびと.net

    記事内に容易に「メモ」を実装するWordPressプラグイン・WP-Noteをご紹介します。ショートコードで実装します。手軽にメモ要素を追加できるのでオススメです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

記事内に容易に「メモ」を実装するWordPressプラグイン・WP-Note

スポンサーリンク

新リリースのプラグインを漁っていた所、
「おっ」というプラグインがあったので
勢いでご紹介します。WP-Noteは記事
内のテキストを特定のタグで囲むだけで
「メモ」的な表現を実装してくれます。この
プラグインは1月3日リリースの出来立てです。

見やすいデザインはユーザビリティ向上において大事なファクターですので
取り入れてみては如何でしょうか。

使い方

多くの場合カスタムフィールドやblockquoteなどを使用していると思いますが、
このプラグインは簡単にメモをデザインすることが可能です。
用意されたテンプレートは5種類。
wp-note01

HTMLエディタで、それぞれ以下のように記述するだけです。

[note]メモ[/note]

[tip]Tipsです[/tip]

[warning]危険[/warning]

[important]重要[/important]

[help]助けて~
助けて~
助けて~
助けて~
助けて~[/help]

実装

メモ

Tipsです

危険

重要

助けて~
助けて~
助けて~
助けて~
助けて~

インストール

1・WP-Noteをダウンロードし、解凍
2・/wp-content/plugins/以下にファイルごとアップロード
3・プラグインを有効化
4・記事投稿時にタグを使用

使い難い場合は

warningタグやimportantタグが長くて使い難い!と言う方はタグを変更
されては如何でしょうか。wp-note.phpをテキストエディタ
(Windowsのメモ帳ではないエディタ)で開くと、真ん中あたりに
wp-note02

と有るのでwarningをkiken、importantをdaijiとかにしてあげれば分かりやすい
と思います。文字はご自身が分かれば何でもいいと思いますよ。

デザインを変更する

デザインも変更可能です。同梱されているcssとimageファイルの素材を
お好みに変更してあげればサイトデザインに沿うよう工夫できますね。
ただし、作成者さんのサイトを見てもGPL等のライセンス表記が無かったので
クライアントさんにカスタマイズしてあげる場合は作者さんに
問い合わせた方がいいかも。

URL :
TRB :

Comments & Trackbacks (7)

  1. asazuki

    いつもお世話になっております。
    記事を書いていたら、ふっと気づきました。
    たぶん、タイトルは「…用意に…」→「…容易に…」ではないかと。

    • シロ

      すみません、超遅レスですが、今更気が付きました><
      ありがとう御座います!修正しましたー!

  2. ますたけ

    なぜかノートの左側が切れて表示されてしまいます。。
    なにか設定ができますか?

    • シロ

      こんにちは!

      なぜかノートの左側が切れて表示されてしまいます。。

      この記事でもデモを表示させていますが、レイアウトの崩れが無いようでしたら、ますたけさんのお使いのテーマで使われているcssが原因かもしれません。

      このプラグインはテーマのcssに問題がなければ基本的にはレイアウトが崩れないと思いますので、テーマのcssを見なおしてみてはいかがでしょうか?

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services