自分の体験談を書いたり書評を書くと記事が長くなりがち。
記事の終わりが見えないと、読み手の離脱リスクが高まる。
そんな問題を解決してくれるのが「サイドバー追従型の目次」だ。
ここでは、このブログでも導入している目次プラグイン 「Rich Table of Contents」を使って サイドバー追従目次を作る方法を解説する。
「Rich Table of Contents」とは
Affinger6には購入特典として付いてくる目次プラグイン「すごいもくじLITE」がある。
このプラグインは必要最低限の目次プラグインで、サイドバー追従をさせる手段がなさそうだったので、他のプラグインを導入することにしてみた。
目次プラグインの有名どころは「Table of Contents Plus」や「Easy Table of Contents」なんだけど、目次をサイドバーに追従して表示させることに関しては「Rich Table of Contents」が最も簡単で見やすかった。
「Rich Table of Contents」の導入・設定
ここからは「Rich Table of Contents」の導入と設定方法について解説していく。
「管理画面」⇒「プラグイン」⇒「新規プラグイン追加」
検索窓に「RTOC」と入力すると「Rich Table of Contents」のプラグインが表示されるので「有効化」を押下。
管理画面に「RTOC設定」が表示されるようになる。
「Rich Table of Contents」の基本設定
「Rich Table of Contents」が導入出来たら設定をしていこう。
簡単な設定でセンスのある目次を表示させることができるようになるぞ。
| 設定項目 | このブログの設定 |
|---|---|
| 目次のタイトル | → この記事の目次 |
| 目次を表示させるページ | → 投稿、固定ページ、カテゴリー |
| 表示させる見出し設定 | → H4まで表示 |
| 表示条件 | → ４ |
| フォント設定 | → デフォルト |
「Rich Table of Contents」のデザイン設定
デザイン設定は目次の色味やバランスの調整になる。
自分のサイトのイメージカラーに合わせて設定してほしい。
| 設定項目 | このブログの設定 |
|---|---|
| タイトル表示設定 | → 左寄せ |
| H2のリスト形式 | → 01 H2 TITLE 番号 |
| H3のリスト形式 | → H3 TITLE 番号 |
| 枠のデザイン | → 太字四角 |
| 表示アニメーション | → なし |
| スムーススクロール設定 | → 長文記事が多いならOFFに変更 |
| プリセットカラー設定 | →シトラス |
| カラー設定 | → デフォルト |
「Rich Table of Contents」の応用設定
応用設定は目次に関する細かい設定になる。
このブログではスマートフォンで見る場合、フッターメニューの設定をしているため、「Rich Table of Contents」では目次に戻るボタンは表示させていない。
| 設定項目 | このブログの設定 |
|---|---|
| 目次に戻るボタン | → OFF（affingerの機能で代用） |
| PCでも目次に戻るボタンを表示 | → 空欄 |
| TOPページに目次を表示させない | → チェック |
| 目次に戻るボタンの位置 | → 左寄せ（設定しない） |
| 目次へ戻るボタンのテキスト | → 空欄 |
| 上下調整 | → 空欄 |
| 除外する投稿ID | なし（お好み） |
| 除外する固定ページID | なし（お好み） |
| 目次のデフォルト表示設定 | → 最初から表示させる |
| 開閉ボタンの開くテキスト | → OPEN |
| 開閉ボタンの閉じるテキスト | → CLOSE |
| 開閉ボタンを非表示にする | → 空欄 |
| プラグインのCSSを読み込まない | →空欄 |
| 7日間目次使用率を計測する | → 計測したいならONに変更 |
RTOC目次使用率
「7日間目次使用率」の設定をONにした場合、計測結果は投稿記事の編集画面の最後に「RTOC目次使用率」として表示される。
サイドバーに目次を設置する
RTOCの最大のウリ、サイドバーに追従する目次を設定する。
設定の仕方はとっても簡単だ。
「管理画面」⇒「ウィジェット」
「AFFINGERカスタムHTML」を「スクロール広告用」にドラッグ
「内容」に次のコードを入力
<div class="widget rtoc_mokuji_widget">[rtoc_mokuji title="もくじ" title_display="" heading="h4" list_h2_type="" list_h3_type="" display="" frame_design="" animation=""]</div>※title="もくじ"は好きな言葉に変更できる。
たったこれだけでサイドーに追従する目次を追加できるぞ。
サイドバー見出しはスマホでは表示されない
サイドバー追従の見出しはパソコンにのみ適用される。スマートフォンには表示させることができないので注意してもらいたい。
今後のRTOCのアップデートに期待したいところだ。
まとめ
今回はこのブログで設定している目次プラグイン 「Rich Table of Contents」の使い方について紹介した。
「Rich Table of Contents」は超有名ブログ「ヒトデブログ」なのでも使われている、シンプルながら超有用な目次プラグインだ。
サイドバーに目次を表示させていと思っている人は、簡単に設定ができるので一度試してみてもらいたい。
