この記事は約 7 分で読めます。
この記事をおすすめする方
- アフィンガー５のサイドメニューにスクロールバー付きの追従目次を導入したい方
- 他のテーマでもサイドメニューにスクロールバー付きの追従目次を導入したい方
- サイドバーに目次を導入する無料プラグインを探している方
この記事は、このサイトでも利用している「アフィンガー５」のサイドメニューにスクロールバー付きの追従目次を導入する方法について書いたものです。
本記事では、「アフィンガー５」での導入をメインとして書かれていますが、他のテーマでも代用可能です。また、他のテーマでも利用可能なものも紹介しておりますので、是非参考にしてみて下さい。
実際に利用してみた「プラグイン」(他のテーマでの導入方法)
サイドバーに目次を導入するためのプラグインはいくつかあります。
(ただ、結論から言うと、Hタグの多い記事の場合、スクロールバーでの調整を、プラグインのデフォルトの仕様だけは実装できませんでした。)
とりあえず、まずは今まで試してみたプラグインなどを挙げていきたいと思います。
Table of Contents Plus(TOC＋)
これが今回「Affinger５」に導入した、無料プラグインです。
導入自体は全く問題なかったのですが、ウィジェットでサイドバーに導入した際、記事によってはHタグ(H2～H5)が多い場合、画面下まではみ出てしまい、利便性が悪いため、一度使うことを断念しました。
しかし、他の方のサイトで、導入できることを知り、実装することが出来ました。
一応、この記事のメインになりますので、参考にさせて頂いた方のリンクは後程、ご紹介させて頂きます。
Rich Table of Contents(RTOC)
ワードプレス有料テーマ「JIN」を作成された「ひつじ」さんという方が作ったプラグインです。
このプラグインでも、スクロールバーを実装できるサイトを見つけたのですが、「Affinger5」だと、形が崩れてしまったため断念しました。
有料テーマ「JIN」を使っている方は、こちらのプラグインの方が良いと思います。
下に、「Rich Table of Contents」でのスクロールバーの実装は別の方のサイトにて書かれていましたので下にリンクを貼っておきます。是非ご覧ください。
(※別の方のサイトですのでご注意ください)
-
WordPressで目次ウィジェットをつけてスクロールできるようにする【RTOC,JIN,overflow,スクロールボタンが動かない】｜おーしまサンショ
おーしま こんにちはープログラマ・ブロガーのおーしまです。 ▼このサイトの動作環境はこれ。別にJINじゃなくても動くと思
www.oshima-sansyo.com
無料テーマ「Cocoon」でのスクロールバー付きのサイドメニューはプラグイン不要
無料テーマの「Cocoon」では「追加CSS」の記述と、ウィジェットでの操作のみで実装可能です。
「Cocoon」を利用している方は、この方法が便利だと思いますので、下にリンクを貼っておきます。
(※別の方のサイトですのでご注意ください)
-
【Cocoon】サイドバー目次追尾カスタマイズ！スクロール付き | ぽんひろ.com
コピペでできる簡単Cocoonカスタマイズ！目次をサイドバー追尾させます。TOC+にも対応！見出しが多いときはスクロールが出てくるように、見出しが少ないときはスクロールが表示されずに見出しの数分の高さ ...
ponhiro.com
ちなみに、同じ記事に書かれている「Table of Contents Plus(TOC＋)」の方法でも、「Affinger５」で試したのですが、上手く導入出来ませんでした。
Easy Table of Contents
最後におまけのような形で申し訳ないのですが、ダメなプラグインという訳ではありません。
このプラグインも、サイドバーに目次を実装することは可能です。
ただ他のプラグインと同じく、Hタグ(H2~H5など)が多い記事の場合にスクロールバーで調整する設定が無いため、画面の下まではみ出してしまいます。
このプラグインに関しては、スクロールバーを実装するための「追加CSS」も見つけられなかったため、今回はおまけのような形で紹介しました。
『Table of Contents Plus(TOC＋)』での導入方法(アフィンガー5の場合)
注意ポイント
全てのテーマでチェックすることは出来ないので、気になる方は一度試してみて下さい。一応テーマは「アフィンガー５」で試しているので、「アフィンガー５の場合」という項目名にしてます。
どのテーマでも導入手順は同じです。
※ただし、ウィジェットに「追従サイドバー」が無いテーマの場合は、別途プラグインなどを導入する必要がありますのでご注意ください。
「アフィンガー５」では、無料プラグイン『Table of Contents Plus(TOC＋)』を利用します。
まずは、ワードプレスの管理画面⇒「プラグイン」⇒「新規追加」⇒『Table of Contents Plus』を検索してください
↓『Table of Contents Plus』をインストール後、有効化。
※追従目次を実装する上で、『Table of Contents Plus』の設定はデフォルトのままでも問題ないので、当記事では割愛させて頂きます。
ワードプレスの管理画面⇒「外観」⇒「ウィジェット」⇒ウィジェット画面の左側から「TOC＋」をつかみ、右側の「スクロール広告用」の中に入れて下さい。
↓ウィジェット画面での『TOC+』の設定は下の画像のような形で問題ありません。
注意ポイント
・アフィンガー５専用プラグイン「SUGOI MOKUJI」が「有効化」されている場合「無効化」しておきましょう。
※「有効化」のままだと、メイン記事側に目次が２つ表示されます。
※また、仮に「有効化」のまま、「ウィジェット」で「目次をサイドバーのみに表示」にチェックを入れたとしても、メイン記事の「SUGOI MOKUJI」の目次で「表示、非表示」が消えてしまうバグが起きます。
(2021/01/29追記)アフィンガー専用プラグイン「SUGOI MOKUJI」の「非表示」が消えるのは仕様でした。(アップデートで、一度目次を表示させると、「非表示」には出来ない仕様になったようです。)
なので、メイン記事の目次に「SUGOI MOKUJI」を利用したい場合は、下の画像の「目次をサイドバーのみに表示」にチェックを入れて下さい。
(2021/01/29追記)↓「目次をサイドバーのみに表示」にチェックを入れた際に出てくるチェックボックスは全部チェック入れても問題ありません。個人的には、とりあえず「post」(投稿ページ)にはチェックを入れて、必要なら「page」(固定ページ)にもチェックしておけばいいかなと思います。
そして、次にスクロールバーを実装するための「CSS」の記述なのですが、今回参考にさせて頂いた方のサイトの記事をご紹介します。下にリンクを貼っておきますので、ご覧ください。
(※別の方のサイトですのでご注意ください)
-
【WordPress】目次(TOC+)サイドバーのCSSカスタマイズ｜近未来スライム記
これは当ブログでは随分前に実装しているのだが、参考になればと思い公開しておく。 事の発端はWordpressで「TOC+
xenonhyx.com
参考
※補足ですが、「CSS」を記述する場所は
ワードプレスの管理画面⇒「外観」⇒「カスタマイズ」⇒一番下の「追加CSS」の中に記述すればOKです。
まとめ
「サイドメニュー」に記事の目次を載せることは、絶対に必要という訳ではないのですが、あると便利かなと思って今回探してみました。
ただ、どのプラグインも、記事のHタグ(H2~H5など)が増えていった際に、スクロールバーで調整出来ないというのが、正直一番驚いたのですが、他の方のサイトを参考にさせて頂き、実装できてよかったです。
ブログを書く上で、「読者の利便性」と「書く側の気持ちよさ」はどちらも重要だと思っているので、これから先も、便利な情報があれば、書いていきたいと思います。
閲覧ありがとうございました。