【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」と入力
  • 「インストール」を選択
  • 「有効化」を選択

下図参照。

RTOCのインストール手順

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

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

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

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

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

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

RTOCで出来たこと

  • PC表示のサイドバーへの設置
  • サイドバーの追従
  • サイドバー目次のハイライト
  • サイドバー目次のh3の折りたたみ

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

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

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

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

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

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

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

STEP2:RTOCの設定

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

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

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

基本設定

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

項目 内容
目次のタイトル 好きな目次タイトルを設定してください。当ブログでは「タップできる目次」としています。
目次を表示させるページ 「投稿」「固定ページ」の両方・いずれかに自動で目次を表示させられます。
表示させる見出し設定 目次に表示する見出し(H1,H2,H3…)の設定をします。
表示条件 見出しが何個ある「投稿」「固定ページ」に対し目次を自動表示させるかを設定します。
フォント設定 フォントを設定できます。

デザイン設定

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

項目 内容
タイトル表示設定 目次のタイトルを「左寄せ」「中央寄せ」のどちらにするか選択できます。
H2のリスト形式 目次に表示されるH2見出しの箇条書きの頭の形式を4種類から選べます。
H3のリスト形式 目次に表示されるH3見出しの箇条書きの頭の形式を4種類から選べます。
枠のデザイン 目次の枠を5種類から選べます。
表示アニメーション 目次が表示される時のアニメーションを3種類から選べます。
スムーススクロール設定 目次をクリック・タップした際、該当する見出しまでスクロールするか一瞬で飛ぶかを選べます。

プリセットカラー設定

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

項目 内容
定番カラー 6種類の目次カラーから選べます。
当ブログは、この6種類からは選んでいません。次の「カラー設定(上級者向け)」で設定しています。

カラー設定(上級者向け)

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

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

応用設定

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

項目 内容
目次に戻るボタン 目次に戻るボタンの表示/非表示を設定できます。
AFFINGER6の場合、スマホフッターメニューで表示させた方が綺麗です。そのため、RTOCの「目次に戻る」ボタンはOFFが良いと思います。スマホフッターメニューの設定はこちらの記事を参照ください。
※標準の「トップへ戻る」ボタンのサイズとRTOCの「目次に戻る」ボタンのサイズが合いません。そのため、RTOCの「目次に戻る」ボタンを使うとデザインがカッコ悪く感じます(主観ですが)。
PCでも目次に戻る
ボタンを表示
PCでも目次に戻るボタンを表示させるかどうか選べます。ただし、上記の「目次に戻るボタン」をOFFにしている場合は、本項目にチェックしてもPCで表示されません。
TOPページに目次を
表示させない
TOPページに目次を表示させるかどうかを選べます。上記の「目次に戻るボタン」をOFFにしている場合は、本項目のチェック有無に限らずTOPページに目次は表示されません。
目次に戻るボタンの
位置
目次に戻るボタンをONにしている場合のボタン位置を左寄せ or 右寄せから選べます。
目次へ戻るボタンの
テキスト
目次に戻るボタンをONにしている場合のボタンに表示されるテキストを入力できます。
上下調整 目次に戻るボタンを何pxかで上下にずらすことが出来ます。
除外する
投稿ID
目次と目次に戻るボタンを除外する投稿を選択できます。投降のIDは投稿一覧画面で確認できます。
除外する
固定ページID
目次と目次に戻るボタンを除外する固定ページを選択できます。固定ページのIDは固定ページ一覧画面で確認できます。
目次のデフォルト
表示設定
目次を最初から表示させるか閉じておくか選べます。最初から表示させることを推奨します。閉じておくとクリック・タップするというワンステップが必要となってしまい、読者目線だと不親切なため。
開閉ボタンの
開くテキスト
開閉ボタンを開くためのテキストを変更できます。デフォルトはOPENです。
開閉ボタンの
閉じるテキスト
開閉ボタンを閉じるためのテキストを変更できます。デフォルトはCLOSEです。
開閉ボタンを
非表示にする
開閉ボタンを非表示にすることができます。目次を開閉する理由はないと考えられるため、当ブログでは目次の開閉はできないようにチェックを入れています。
プラグインのCSSを
読み込まない
チェックをいれることで、RTOCの「基本設定」や「デザイン設定」などで設定した内容を解除できます。目次をCSSで改変できる方に推奨される項目です。
7日間目次使用率
を計測する
目次の7日間使用率を計測するかどうかを選べます。

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

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

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

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

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

操作内容

  • 「外観」を選択
  • 「ウィジェット」を選択
  • 「カスタムHTML」をスクロール広告用へ移動
  • 「カスタムHTML」の内容欄にコードを記載(詳細は本記事後方で解説)
  • 「保存」を選択

下図参照。③④の「カスタムHTML」は「00_STINGERカスタム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>

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

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

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

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

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

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

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

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

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

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

体験談

当ブログでも表示崩れがあり、一度全てのプラグインを無効化したところ目次ハイライトが表示されたので、一つひとつ有効化して原因を探りました。

結局、その時の原因はプラグイン「Autoptimize」でした。

現在は「Autoptimize」を有効化し、設定のチェック項目をブログに合わせていじっています。

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

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

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

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

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

スーパーリロード

ブラウザでキャッシュをクリアしたいページを開いた状態で、ShiftキーとF5(更新ボタン)を同時に押せばOKです。WindowsでもMacでも、EdgeでもChromeでもSafariでも大丈夫のはずです。

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

Chromeのキャッシュ削除方法

  • [Google Chromeの設定]アイコンをクリック
  • [設定」から[詳細設定を表示]を選択
  • [プライバシー]内で[閲覧履歴データの消去]を選択
  • [キャッシュされた画像とファイル]チェック・ボックスを選択
  • 消去する期間を選択
  • [閲覧履歴データをクリアする]をクリック

対策3:JavaScriptとCSSの設定

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

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

step
1
JavaScriptのコードを追加

下記のコードを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' );

操作内容

  • 「外観」を選択
  • 「テーマファイルエディター」を選択
  • 「AFFINGER Child」を選んで、その横の選択ボタンを押す
  • 「テーマのための関数 (function.php)」を選択
  • コードを追記
  • 「ファイルを更新」を選択

下図参照。

step
2
CSSのコードを追加

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

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

追加するコード

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

操作内容

  • 「外観」を選択
  • 「テーマファイルエディター」を選択
  • 「AFFINGER Child」を選んで、その横の選択ボタンを押す
  • 「スタイルシート (style.css)」を選択
  • コードを追記
  • 「ファイルを更新」を選択

下図参照。

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

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

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

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

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

以上、対策集でした。

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

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

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

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

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

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

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

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

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


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

あわせて読みたい

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

データ通信量別最安SIM

  • 1ギガ(GB)最安SIMはこちら👈
  • 2ギガ(GB)最安SIMはこちら👈
  • 3ギガ(GB)最安SIMはこちら👈
    ・・・スマホ利用者の60%以上をカバー
  • 4ギガ(GB)最安SIMはこちら👈
  • 5ギガ(GB)最安SIMはこちら👈
    ・・・スマホ利用者の70%以上をカバー
  • 6ギガ(GB)最安SIMはこちら👈
  • 7ギガ(GB)最安SIMはこちら👈
  • 8ギガ(GB)最安SIMはこちら👈
  • 10ギガ(GB)最安SIMはこちら👈
    ・・・スマホ利用者の80%以上をカバー
  • 15ギガ(GB)最安SIMはこちら👈
  • 20ギガ(GB)最安SIMはこちら👈
    ・・・スマホ利用者の90%以上をカバー
MMRIの調査結果抜粋

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

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

タップできる目次