h2やh3等の見出しから自動的に目次を作ってくれるプラグイン「Table of Contents Plus」が時間短縮かつ親切でとてもよい! - frasm.net

frasm

フラズム
恋と冒険が、僕を大人にしたブログメディア
Update!
    No items.

h2やh3等の見出しから自動的に目次を作ってくれるプラグイン「Table of Contents Plus」が時間短縮かつ親切でとてもよい!

久しぶりにヒットです。そして捗ります。

通常記事を書くときに、読みやすくするために「見出し」や「小見出し」を付ける方、多いと思います。

さらには、記事枚にその記事の要点をまとめた「目次」を付けている方もいると思います。

ブログの記事は放っておけば際限なく縦に長くなります。一つの文章毎にまとめてグルーピングして、わかりやすい「見出し」を付けるのは、読みやすさがかなり上がりますね。

さらには「見出し」だけ流し読みして内容がわかれば、「後で読む」等のサービスをつかって、後で読んでもらえる可能性も高まるというモノです。僕も検索でたどり着いたブログなんかはざっと見出しだけ読んで必要な記事かどうかよく判断します。親切さは機会損失も防いでくれますね。

2013-8-28-001

こういう効果から見出しを付けない方はあまりいないと思うのですが、このグルーピングのための「見出し」から自動的に「目次」を作ってくれるプラグインを教えてもらいました。いやー、便利なモノがあるモノですね。もちろんこの記事の目次だって、コチラのプラグインを使ってます!

「見出し」から自動的に「目次」を作ってくれるプラグイン

Table of Contents Plusは、h2やh3から自動的に目次を作ってくれるプラグインです。

個人的に気に入った点は

  • いつも使うヘッドラインタグから自動的に!まさかの自動的に目次を作ってくれる手軽さ
  • 目次の出現位置や、見出しの数で出すか出さないか決められる、設定項目の豊富さ
  • 階層表示や、スムーススクロールなど、初心者でも困らない全部入りなところ

ほんとうに、目次プラグインとしては全部入りだと行っても過言ではありません。

Table of Contents Plusで出来ること

基本的に記事を書くときに見出しタグを使うだけですね。

ちなみに見出しタグって言うのは

SEO的にも記事内の重要な部分を伝えるために必要なタグですね。

設定項目が多彩!

設定項目はかなり豊富で、かゆいところにも手が届く実に優秀な奴です。

おそらく具体的に弄る部分は

  • 見出しの数が○個以上で出す、見出しの数の部分。
  • 階層表示するのかしないのか
  • 目次のデザイン

の部分ではないでしょうか。

表示位置も「最初の見出しの手前」等、かなり気が利いていて助かります。そうですよね、目次はここに欲しいですものね。

2013-08-28_2107

2013-08-28_2107_001

2013-08-28_2107_002

2013-08-28_2108

設定項目は多岐にわたり、初心者や英語を読むのがだるい方には、ハードル高く感じますね。でも大丈夫です。

英語が使いにくいなら日本語でどうぞ!

有志が日本語ファイルを配布してくれています。日本語ファイルの導入方法も上記ブログで詳しく解説してくれています。

日本語化すると

2013-08-28_2111

2013-08-28_2112

こんな感じで、メチャクチャ見やすいし、導入も簡単になります。

日本語化の一手間を是非かけてみて下さい。

見た目の調整で少し戸惑うかもしれません

さて、少しWordPressを弄っている方ならリストタグなんかを自分のブログに合わせて装飾している方もいるかも知れません。

こういう方は

2013-8-28-002

こちらのチェックをつけて、Table of Contents Plusの独自のスタイルを解除した方が統一感が持てるかもしれません。

よくわからない方は、好きな見た目をリストの中から選ぶもよし、色だけ変更するもよし、この辺は設定項目でも迷わないと思います。

何でもかんでも目次になるのは困る方は

2013-8-28-003

目次にしたい見出しタグを選ぶことだって出来ます。これは便利!

使い手次第でいろいろ使える!

さて、この目次を自動的に作ってくれる「Table of Contents Plus」ですが、僕に教えてくれた方は、実に面白い使い方をしています。

サイドバー領域に「固定」で目次を付けています。面白いですね!目次は記事の冒頭にあるべきって言う発想を飛び越えて、利便性を追求しています。

使い方次第で読者の方の利便性を飛躍的に向上できそうな便利なプラグインです。

-スポンサーリンク-
Follow!

オススメのデザインのこと はコレ!

コメントを残す

frasm
Follow!