marginotes

JavaScript

テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

marginotesは、クールなマージンノートを作成するjQueryプラグインです。その用途は、記事の掲載に適しています。記事内のテキストに注釈をつけ、読みやすいスマートな記事の作成を助けます。次に紹介するデモページではベトナム旅行について書かれています。単語には外部リンクとページ内のリンクが注釈(メモ・補足情報)として設置されています。この注釈が、このプラグインの大きな特徴です。それでは、このmarginotesについて詳しく紹介していきます。

記事本文の見た目をスッキリ仕上げる

デモ

marginotesの基本構成は、HTML属性に指定されているテキストの余白にメモを追加して、記事をスマートに仕上げてくれます。記事の本文は簡潔に表現できるので、見た目がスッキリとした仕上がりになります。

デモページを例にあげると、記事内にはリンクとして他ページへ移行するものもあるほか、11個の注釈が1~11と数字で表示されています。その部分に関してはページ下部の注釈の一覧へ、ページ内リンクとして設置されています。クリックすれば、ジャンプする仕様です。

ほかにもプラグインの配布ページでは、テキストにマウスオンすると、左余白に注釈(メモ・補足情報)が表示される方法も紹介されています。(ツールチップの設置)

記事を読んでいると分からない言葉や、関連した事柄を調べたくなる言葉に出会うことがありませんか? marginotesがあれば、そんなときもいちいちタブを開き新たに検索する手間が減ります。ユーザーは快適に記事を読むことができますね。

ツールチップ(余白部分に表示する場合のメモ欄)の幅のデフォルトは、100pxです。お好みで変更してみましょう。

marginotes

jquery.confirmjQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confirm」前のページ

超高速なMasonryレイアウトを実装できる「Bricks.js」次のページBricks.js

最近の記事

  1. 抹茶クリームドーナツ
  2. FAST
  3. クリスマスブレンド
  4. ホワイトチョコマカダミアドーナツ
  5. エッグペペ
PAGE TOP