marginotes

JavaScript

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

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

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

デモ

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

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

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

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

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

marginotes

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

イラストレーターでデニム生地に刺しゅう文字のWeb用アイコンを作ってみよう!次のページデニム生地に刺しゅう文字

関連記事

  1. zoomwall.js

    JavaScript

    高さを揃えたグリッドレイアウトのLightbox系イメージギャラリー「zoomwall.js」

    zoomwall.jsは高さを揃えたグリッドレイアウトを実装することが…

  2. Bootstrap Dropdown Hover
  3. RELLAX

    JavaScript

    超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」

    RELLAXは、滑らかなパララックスを実装できるバニラJavaScri…

  4. timedropper

    JavaScript

    時刻を指定しやすくしてくれるjQueryのタイムピッカー「timedropper」

    timedropperは時刻の指定をしやすいUIを実装できるjQuer…

  5. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  6. Glide.js

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP