ブログのサイドバーに目次を置いていて、記事をスクロールしても目次がいつも画面内にあるブログをたまに見かけます。
長い記事のページだとサイドバーにずっと目次が置いてあったら意外と便利です。
そこでWordpressのテーマ、アフィンガー５（AFFINGER5）を使っているブログでサイドバーに目次を固定してみました。
クリックできる目次
目次をサイドバーに固定するメリット
目次をサイドバーに固定することで、様々なメリットがあります。
通常、プラグインを使って記事に目次を設定するとリード文の後ろ（1番目のh2見出しの前）にこのような目次が表示されます。
この目次は記事を読み進めてページを下にスクロールしていくと画面の上の方に消えていってしまいます。
短い記事ならそれでもいいんですが、長い記事や項目が多い記事では記事の最初の方にしか目次がないと、読みたい項目に戻ったり先に飛んだりする時に不便です。
そこで、サイドバーにこのような目次を設置します。
この目次を画面をスクロールしてもいつも画面の中にあるように設定すると、以下のようなメリットがあるんです。
目次をサイドバーに固定する４つのメリット
- いつでも目次が目に入り、記事に何が書かれているのかがすぐわかる
- すぐに自分の読みたい項目に移動することが出来る
- 読者が記事を読みやすくなる
- 空きスペースを有効に活用することが出来る
では早速サイドバーに目次を固定してみたいと思います。
記事に目次を設置するプラグイン
まず、記事に目次を設置していない場合は設置する必要があります。
設置済みの人は飛ばしてこちら。
設置済みでアフィンガーを使用している人はこちら。
ここでは Table Of Contents Plus というプラグインを使って目次を自動的に作成して記事に挿入します。
Table Of Contents Plusのインストール
WordPress の管理画面からプラグイン＞新規追加をクリック。
Table Of Contents Plus と検索してインストール→有効化します。
Table Of Contents Plusの設定方法
プラグインを有効化したら、WordPressの管理画面の「設定」の中にTOC+という項目が出来ているのでクリックします。
このサイトでの現在の基本設定はこんな感じ。
上級設定の見出しレベルはこんな感じ。
好きなように設定してみてください。
特定の記事だけ目次の表示位置を変えたい場合
記事の表示したい位置に以下のショートコードを挿入します。
コピペする場合はスペースは削除してください。
[ toc ]
特定の記事だけ目次を非表示にする場合
目次を表示させたくない記事の好きなところに以下のショートコードを挿入します。
コピペする場合はスペースは削除してください。
[ no_toc ]
編集の邪魔にならないように記事の最下部などの目立たない所に書くといいと思います。
サイドバーに目次を置く方法
Table Of Contents Plus（以下 TOC+）で作成した目次は記事内だけではなくサイドバーにも置くことが出来ます。
WordPress管理画面のプラグイン＞ウィジェットをクリックします。
するとその中に TOC+ というウィジェットがあります。
ウィジェットのページの左側に「サイドバーウィジェット」という項目があるので、その中に TOC+ のマスをドラッグして入れればサイドバーに表示されます。
サイドバーに置いた目次を固定する方法
「サイドバーウィジェット」の中に「TOC+」を入れただけではスクロールした際の目次の固定が出来ません。
TOC+にはサイドバーに目次を表示する機能があっても固定する機能はないからです。
サイドバーにウィジェットを固定するには専用のプラグインがあります。
Q2W3 Fixed Widget というプラグインがそれです。
WordPress の管理画面からプラグイン＞新規追加をクリック。
Q2W3 Fixed Widget と検索してインストールし、有効化します。
そして、WordPress管理画面のプラグイン＞ウィジェットをクリックします。
サイドバーウィジェットの中に TOC+ をドラッグします。
この時、サイドバーの一番下の目次が来るように入れないと動作がおかしくなるので注意が必要です。
サイドバーウィジェットの中に入れた TOC+ を展開します。
すると Fixed widget という項目が出来ているのでチェックを入れます。
するとこんな感じでスクロールし続けると、画面上に出ていく手前で目次が固定されます。
しかし、項目が多いページではこんな風にフッター部分に飛び出しています…。
記事下にどこまでサイドバーの項目を置いていいかは Q2W3 の設定で設定することは可能です。
外観＞Fixed Widget 設定 から設定できます。
Fixed Widget 設定の中の「下マージン」で調整出来ます。
ちなみに「横マージン」をブログのテンプレートの横幅のサイズにすると、それより小さい端末やスマホで追尾しなくなります。
しかし、このブログのフッターの高さは固定ではないので、ちょっと困るんですよね…。
AFFINGER5 ならプラグインなしでサイドバーに固定できる
しかし、高機能なアフィンガーなら、プラグインなしでもサイドバーに目次を固定出来るんです！（早く言え）
わたしの検索能力が乏しくてちょっと回り道をしてしまったんですが。
いろいろな機能がたくさんあるアフィンガー。
きっとサイドバーに固定する機能があるんではないかと思って、外観＞ウィジェットの中身をまじまじ眺めてみました。
すると…。
サイドバーウィジェットの下にある「スクロール広告用」
これなんとなく気になります。
開けてみましょう。
サイドバーの下でコンテンツに追尾するボックスエリアです。
「カスタムHTML」等をここにドロップして内容を入力してください。
※PC以外では非表示部分
早速「スクロール広告用」の中に TOC+ をドロップしてみましょう！
さすが、元々備わっている機能だけあって、フッターにも重なりません♪
きれいに収まっていいかんじですね！
しかし、なぜかスマホでも表示されています（固定はされない模様）
ブログに合わせて適した場所に目次を設置しよう
サイドバーにも目次があると、読んでくれる人にとっても見やすくなると思います。
しかし、全てのブログで必ずしもそうだとは限りません。
目次よりももっと大事だったり見せたいものがあるブログもあるでしょう。
サイドバーの下は割と広く空いているので、有効活用したいものです。
ですので、目次をサイドバーに固定するのが自分のブログにあっているのか、よく考えて決めてみてくださいね♪
まとめ
WordPressのテーマにアフィンガーを使っている場合のサイドバーに目次を固定する方法の紹介でした。
わたしは最初プラグインを使っても思い通りに出来なかったので、メモを兼ねてまとめてみました。
もしも、同じように困っているひとがいましたら、参考にしてみてくださいね。
