【AFFINGER6】目次をRTOCでサイドバー追従+ハイライトさせよう！【Rich Table of Contentsでキレイな目次】

AFFINGER6で、

• キレイな目次を簡単に作りたい！
• PC表示で目次をサイドバー追従させたい！
• サイドバー追従の目次を現在位置でハイライトさせたい！
• サイドバー追従の目次のh3見出しを折りたたみたい！

と思ったことはありませんか？

うみ

この記事でそんな願いを叶えましょう！

これらを実装することでブログ来訪者が好きな見出しへ簡単に飛べます。

ユーザビリティが向上することで滞在時間が長くなり、ブログ順位が上がりやすくなります。

できるだけ簡単に、分かりやすく図解で説明するのでご安心ください。

それでは、さっそく作り方を確認しましょう！

※現在当ブログではサイドバー追従をEasy Table of Contentsに変更しています。

本記事で出来る目次&
サイドバー追従ハイライト目次例

STEP1：プラグイン「RTOC」のインストール

以下に「RTOC」のインストール手順と、なぜ「RTOC」を使うのかを解説します。

「RTOC」のインストール手順

まず、プラグインRTOC（Rich Table of Contents）をインストールします。

RTOCは簡単にデザインがキレイな目次の作れるプラグインです。

以上でインストールができました。

「RTOC」を使う理由が知りたい方は、このまま下の項目をご確認ください。

手っ取り早く目次を使えるようにしたい方は、STEP2へ飛んでいただいても大丈夫です。

目次プラグインに なぜ「RTOC」なの？

目次プラグインには、AFFINGER専用の「すごいもくじ」の他、「TOC+」や「Easy Table of Contents」など、たくさんあります。

今回「RTOC」を使用しますが、その理由は以下がすべて出来たためです。

特に4点目のh3の折りたたみにこだわりました。

その理由は、h3を折りたたまないと下図のように目次が画面外へ はみ出てしまうことがあるからです。

h3の折りたたみにより、目次が長い場合もPC画面から はみ出なくなります。（下図参照）

はみ出しても大丈夫なように、サイドバー目次に縦スクロールバーを追加することもできます。

ですが、個人的にはh3折りたたみの方がスッキリして好みなので、こちらを採用しました。

他の目次プラグイン（TOC+やEasy~、すごいもくじ）では、上記の実装が本ブログ管理人にはできませんでした。

やり方はあるのかもしれませんので、興味のある方は調べてみてください。

STEP2：RTOCの設定

次にRTOCの設定を行います。

WordPress管理画面に「RTOC設定」という項目が出ているはずなので、それを選択してください。

以下、管理画面について解説します。

基本設定

基本設定は以下の画面で設定できます。

デザイン設定

デザイン設定では、リストの形式や枠のデザインなどを選択できます。

プリセットカラー設定

プリセットカラー設定では、RTOCデフォルトの目次カラーを選べます。

カラー設定（上級者向け）

カラー設定（上級者向け）では、目次に自分の好みのカラーを設定できます。

以下の画像は当ブログのカラー設定例です。

応用設定

応用設定では、目次へ戻るボタンの設定や目次の表示/非表示など、細かい設定ができます。

すべての設定が終わったら

RTOCのすべての設定が終わったら、必ず一番下の「変更を保存」ボタンを押してください。

これでRTOCの設定は完了です。

STEP3：目次をサイドバー追従+ハイライト+h3折りたたみ

本ステップでは、PC表示の場合にRTOCをサイドバーに設置し、追従させ、現在位置でハイライトさせたうえでh3見出しは折りたたむ、というものを一気に実装します。

操作内容④のコードは以下をコピペしてください。

<div class="widget rtoc_mokuji_widget">[rtoc_mokuji title="タップできる目次" title_display="" heading="h4" list_h2_type="" list_h3_type="" display="" frame_design="" animation=""]</div>

"タップできる目次" は好みに合わせて変えていただいて大丈夫です。

このコードを記入し、保存を押せば完了です。

Q&A：サイドバー表示対策

上記の設定だけで上手くいく方と、そうでない方がいるようです。

特に、ハイライト・h3の折りたたみが出来ない、ということがあるようでした。

以下に対応例を示すので、試してみてください。

※現在当ブログでは、これが原因でサイドバーの目次をEasy Table of Contentsに変更しています。ご了承ください。

対策1：プラグインの確認

他のプラグインと干渉して、表示崩れ・ハイライト等の実装が反映されない、ということがあるようです。

まずは、第一の対策として一つひとつプラグインの「無効化」を試してみてください。

人によってプラグインは異なると思うので、一つひとつ確認することが重要だと思います。

この対策でもダメな場合、以下をご確認ください。

対策2：キャッシュの削除

スーパーリロードやキャッシュの削除で上手く反映されることがあるようです。

以下の手順を試してみてください。

スーパーリロードでダメなら、下記の方法でブラウザのキャッシュを削除してみましょう。

対策3：JavaScriptとCSSの設定

JavaScriptとCSSの設定によってサイドバー目次のハイライトが上手く表示されることがあるようです。
※当ブログはこれをやらなくても、上手く表示されました。他のブログでも上手く表示される場合とされない場合があるようなので、原因は不明です。

手っ取り早く解答だけ示します。

step
1JavaScriptのコードを追加

下記のコードをfunction.phpに追加してください。

function.phpを追加するときに、変な改変（コード不良など）があるとWordPress自体にバグが起こることがあるようです（ログインできなくなるなど）。必ず「BackWPup」などのプラグインでバックアップしてから追加するようにしましょう。また、追加は自己責任でお願いします。

追加するコード

function jin_toc_highlight() {
  echo <<< EOM
  <script>
  class toc_highlight {
    init(){
      this.elem = document.querySelectorAll('.rtoc-mokuji a');
    }
    update(){
      if(this.elem === null) {
        return 0;
      } else {
        for (let i = 0; i < this.elem.length; i++) {
          const y = document.documentElement.clientHeight;
          const a = document.getElementById( this.elem[i].hash.slice(1) ).getBoundingClientRect().top;
          if( y > a ){
            this.elem[i].classList.add("current");
              if ( i>0 ){
                this.elem[0].classList.remove("current");
                this.elem[i-1].classList.remove("current");
              }
          } else {
            this.elem[i].classList.remove("current");
          }
        }
      }
    }
  }
  var toc=new toc_highlight();
  window.addEventListener('DOMContentLoaded', function(e){ toc.init(); });
  window.addEventListener('scroll', function(e){ toc.update(); });  
  </script>
  EOM;
  }
add_action( 'wp_print_footer_scripts', 'jin_toc_highlight' );

step
2CSSのコードを追加

次にCSSに以下のコードを追加します。

#edf5ffの部分は、必要に応じて任意の値に書き換えてください。

追加するコード

a.current {
   background-color:#edf5ff;
}

対策4：固定記事は目次を外す

固定記事で上手く表示されないことがあるようです。

実は当ブログも固定記事では上手く目次ハイライトが表示されません。

h2のハイライト無し目次が表示されているため、とりあえず放置しています。

手っ取り早い方法は、「RTOC」⇒「基本設定」⇒「目次を表示させるページ」で「固定ページ」のチェックを外してみてください。

以上、対策集でした。

他の対策で上手くいった場合、ご連絡頂けると嬉しいです。

対策案を追記していきたいと思います。

AFFINGER6で目次をサイドバーに追従・ハイライト・h3見出しを折りたたもう！

本記事では「【AFFINGER6】目次をRTOCでサイドバー追従+ハイライトさせよう！【キレイな目次】」について解説しました。

この記事通りに進めれば、PC表示で、サイドバーに目次が追従し、読んでいる位置の見出しをハイライト、かつ、h3見出しは折りたたまれると思います。

本記事で出来る目次&
サイドバー追従ハイライト目次例

ぜひ色々試して、素敵な目次を作成してみてください。

不明点等あればコメント頂けると嬉しいです。

最後までお読みいただきありがとうございました。

AFFINGER6カスタマイズ関連記事

2023/3/30

【AFFINGER6】目次をRTOCでサイドバー追従+ハイライトさせよう！【Rich Table of Contentsでキレイな目次】

AFFINGER6で、 キレイな目次を簡単に作りたい！PC表示で目次をサイドバー追従させたい！サイドバー追従の目次を現在位置でハイライトさせたい！サイドバー追従の目次のh3見出しを折りたたみたい！ と思ったことはありませんか？ これらを実装することでブログ来訪者が好きな見出しへ簡単に飛べます。 ユーザビリティが向上することで滞在時間が長くなり、ブログ順位が上がりやすくなります。 できるだけ簡単に、分かりやすく図解で説明するのでご安心ください。 それでは、さっそく作り方を確認しましょう！ ※現在当ブログでは ...

ReadMore

2023/3/8

【AFFINGER6】目次/トップ/ホームなどへ飛ぶ設定【スマホフッターメニュー】

AFFINGER6でもプラグイン無しで、 ページトップへ戻るをつけたい！ 目次へ戻るをつけたい！ ホームへ戻るをつけたい！ 収益記事へ飛ぶフッターをつけたい！ と思ったことはありませんか？ これらを実装することでユーザービリティが向上し、滞在時間が長くなります。つまり、グーグルから評価され、ブログ順位が上がりやすくなります。 また、せっかくAFFINGER6を購入したのだから、他のテーマにデザインでも負けたくないですよね！ できるだけ簡単に、分かりやすく図解で説明するのでご安心ください。 それでは、さっそ ...

ReadMore

2023/3/2

【AFFINGER6】一番簡単な表の作り方【横スクロール・列固定も】

AFFINGER6で表を作るときに、 簡単に表を作りたい！ 横スクロールさせたい！ 横スクロールさせたときに一番左の一列目を固定させたい！ エクセルからコピペしたい！ と思ったことはありませんか？ この記事を見て、ほとんどコピペするだけでとても簡単に作れます。 さっそく作り方を確認しましょう！ 本記事で出来る表（サンプル） タップできる目次 STEP1：プラグインの導入STEP2：CSSをコピペSTEP3：function.phpにコードコピペSTEP4：HTMLをコピペSTEP5：ビジュアル編集する上手 ...

ReadMore

当サイトでは、ブログツールの他、格安SIMの情報を数多く取り扱っています。データ通信量別最安プランの紹介なども行っていますので、あわせてご参照ください。

▼本サイトの情報リンク▼

▼スマホを賢く買うなら【ダイワンテレコム】▼

▼スマホの修理は【モバイル保険】▼

▼電気代の見直しは【電気チョイス】▼

▼法人向けレンタルサーバーは【エックスサーバー】▼

▼個人向けレンタルサーバーは【ConoHa WING】▼