marginotes

JavaScript

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

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

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

デモ

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

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

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

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

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

marginotes

関連記事

  1. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

  2. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  3. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  4. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

  5. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  6. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

最近の記事

  1. マリアージュ フレール 紅茶チョコレート
  2. CD-ADE1BK
  3. 渋谷スクランブルスクエアからの夜景

アーカイブ

PAGE TOP