アフインガーで追従する目次を設置&デザイン変更CSS公開|Rich Table of Contents

スマホに目次に戻るボタンを表示させる方法と、実装したカスタムをご紹介します。

このブログは「AFFINGER」を使用しています

Rich Table of Contentsとアフィンガーは相性が悪い(デザインが崩れる)という意見がありましたので、素人なりに色々いじってみた結果、いい感じ(自己満足)になりましたのでご紹介します。

アフィンガーでRTOCを設置する 概要

使用するプラグイン

  • Rich Table of Contents(無料)
  • Widget Logic(無料)
  • Widget Options(無料)

使用環境

記事のの内容(簡易)

  • RTOC「目次に戻るボタン」を、スマホ記事に表示させる
  • RTOC目次をサイドバーに追従表示させる(PC表示)
  • スマホで記事下に反映されるサイドバー目次を非表示にする
  • トップページに表示されてしまうRTOC目次を非表示にする
  • サイドバーに表示させた目次に、縦スクロールを付ける(PC表示)
  • サイドバーに表示させた目次に、閲覧中記事の見出しへマークを付ける(PC表示)
  • RTOC目次の表示幅、フォントサイズを変更する(PC表示)
  • マウスオーバー時の見出し下線を変更(PC表示)

ちょこちょこデザイン変更をしていますので、今記事と、実際のこちらのサイトの見え方に相違があること、ご容赦ください

現在は、RTOCではなく「Table of Contents Plus」の目次を使用しています。

Table of Contents Plusのカスタマイズ方法は、こちらの記事をご参照ください。

https://samurai0505.com/table-of-contents-plus/

Rich Table of Contentsをインストール

まずは、Rich Table of Contentsをインストール、有効化します。


有効化しますと、ダッシュボード上に『RTOC設定』と表示されます。

Rich Table of Contentsで目次デザインを決める

  • 目次のタイトル
  • 目次を表示させるページ
  • 表示する見出しの設定
  • 表示条件
  • フォント設定
  • タイトルの表示設定
  • 見出しの形成
  • 目次枠のデザイン
  • 表示アニメーション
  • スムーススクロール
  • カラー設定
  • これらが変更できます。

右側に表示される「Live Preview」に選択したデザインが即時反映されるので、感覚的にデザインを決めることができます。

素晴らしすぎる!!!

Rich Table of Contents設定ヒント

目次を表示させるページ」は基本記事のみでOK

表示する見出しの設定」は目次が長くなり過ぎないように、 h3までがおすすめです。

表示アニメーション」は、目次を開いたり閉じたりしたときのアニメーションです。

スムーススクロール設定」は、「ON」ではスクロールしながら目次に戻り、「OFF」ではぱっと目次に移動します。

Rich Table of Contentsで目次表示方法を決める

  • 目次に戻るボタン ON/OFF
  • PCでも目次に戻るボタンを表示
  • 目次に戻るボタンの位置 左/右
  • 上下間隔
  • 除外する投稿ID
  • 除外する固定ページID
  • 目次のデフォルト表示設定 最初から表示/閉じておく
  • 開閉ボタンテキスト
  • プラグインのCSSを読み込ませない
  • 7日間目次使用率を計測する

Rich Table of Contents設定ヒント

目次に戻るボタン
スマホ表示させるかの選択します。
Rich Table of Contentsを導入する大きなめりっとは、スマホに目次に戻るボタンが表示されるところだと考えます。
「興味あるところだけ読みたい」「さっき読んだところをもう一度確認したい」というニーズが発生することは、往々にしてあります。そのときにあると便利なのが「目次に戻るボタン」です。

ここは是非ONにしましょう!

目次に戻るボタンの位置
個人的には「右寄せ」をおすすめします。なぜなら、日本人は右利きが多いからです。利き手側にボタンがあるったほうが便利な予感です。

ソースはありません

ヒロユキに怒られるで

上下間隔
スマホに表示する目次に戻るボタンの設置します。数値が大きいほど、上へあがります。
スマホにフッターがある場合、干渉しないように設置しましょう。

更新しながら位置確認してね!

除外する投稿ID、除外する固定ページID
目次を設置しない記事やページを指定できます。
IDは、ダッシュボード>投稿>投稿一覧より、各記事のIDが確認できます。

CSSを反映させない
ここにチェックを入れますとデザインが一切なくかり、シンプルな目次となります。
スマホにも「目次に戻るボタン」が表示されません。
クリエーターの方でしたら、この状態でお好みの目次デザインにするのも素敵ですね。
管理人は、Rich Table of Contentsのシンプルなデザインが気に入っていますので、ちょこっといじるくらいで満足しました。

そもそもそんな技術持ってないし

感覚的にらくらく設定できますね。

Rich Table of Contentsで基本設定を終えましたら、続いてユーザビリティ向上する設定をしていきましょう。

目次をサイドバーに表示させる


アフィンガーで、RTOC目次をサイドバーに表示させる方法をご紹介します。

サイドバー設置 簡単な流れ

  • RTOC設定でコードをコピー
  • スクロール広告に貼り付け
  • スマホ非表示設定をする
  • デザインCSSにスクロールコード貼り付け

1.目次をサイドバーに設置・追尾させる

記事を下へスクロールしても、目次がサイドバーにて追尾するようにします。視界に目次があると、ユーザビリティーが高まります。

  • 記事構成がわかりやすい
  • 読みたい個所にワンクリックで移動できる
  • 長文記事でも読みやすくなる

RTOC設置のショートコードタグを開き、「目次のショートコード」をコピーします。

このショートコードはカスタムが可能です。丁寧にコード解説も掲載されています。

先に設定した目次と違うデザインにてコード生成が可能です。

しかしながら、このコード上にてlist_h2_type=number2で指定しますと、以下で紹介しますカスタマイズデザインが反映されず、崩れてしまいました。
number1roundでは大丈夫、list_h3_type="number2"でも大丈夫、しかしながらlist_h2_type=number2はダメ…

原因わからんです。ごめんなさい..

管理人は特別デザインにこだわりがないので、うまく表示されるコードでサイドバー目次を設定しました。この点はご容赦ください。

コードを貼る場所は以下になります。

ダッシュボード>外観>ウィジェット

「テキスト」を「スクロール広告用」に追加、もしくはドラック&ドロップで「スクロール広告用」に設置します。

「テキスト」の「テキストタグ」に、目次のショートコードを貼ります。


最後に『保存』をお忘れなく。

ブログ記事を確認しまして、サイドバーの一番下にRTOC目次が表示され、スクロールしても付いてくることを確認してください。

RTOCが優秀なところ(訂正)

RTOCは、トップページに目次が表示されないところが優秀です。
Table of Contents Plusにて同様な設定したをしたときに、トップの固定ページの目次が表示されてしまったので、それを非表示にする設定をしていました。
RTOCはデフォルトでこの問題を回避できます。

===追記===

RTOC目次がトップページに表示されなかったのは、「表示条件」を2以上で設定していたためでした。ここを「1」で設定しますと、トップページの固定ページの目次を読み込み、トップページのサイドーにもRTOC目次が表示されます。

この解決方法は、後述します。

スクロール広告について

スクロール広告に設置したサイドバーは、何でも追尾してきます。おすすめ記事を設定するのも◎
スクロール広告のエリアには、Googleアドセンス広告を掲載することもできます。
AFFINGER6の管理画面では、スクロール広告のエリアに「アドセンスは禁止です」と表示されますが、2019年11月のGoogleのポリシー変更により追尾広告の設置が可能になりました。

2.スマホ記事下に目次を表示させないようにする

このままですと、スマホで記事を開きますと、記事の下の方に目次が表示されます。

アフィンガーの基本設定では、PCのサイドバーはスマホではページの下に表示されるようになっています。

PC表示
スマホ表示

目次が記事下にあってもほぼニーズはないでしょうし、記事がやたら長いものになってしまいます。

そのため、このスマホでの記事下目次を非表示にします。

スマホ記事下に目次を表示させないために使うプラグイン1・Widget Logic

使うプラグインは「Widget Logic」です。(「「Widget Options」もおすすめです。この後で紹介します。)

Widget Logicはウィジェットパーツごと、またページごとに表示/非表示を設定できるWordPressプラグインです。

こちらをインストール、有効化してください。

有効化後に、「外観」→「ウィジェット」で設定画面を開きましょう。

ウィジェットを見てみますと「ウィジェットのロジック:」という入力フォームが現れます。

RTOC目次を置いたウィジェットのウィジェットのロジックに、以下のコードを貼ってください。

!wp_is_mobile()

このコードは、PCでは表示、スマートフォン・タブレットでは非表示を指定するものです。

Widget Logicの他のコード紹介は、別記事にまとめます。

これで、スマートフォン・タブレットではサイドバースペースの目次をに非表示できます。

スマホ記事下に目次を表示させないために使うプラグイン2・Widget Options(おすすめ)

Widget Optionsは、上で紹介したWidget Logiとは違い、分岐条件を必要とせず、感覚的にウィジェットの表示・非表示を設定できます。

「Widget Options」をインストールし、有効化してください。

有効化後に、「外観」→「ウィジェット」で設定画面を開きましょう。

ウィジェットを開くと、Widget Optionsの設定項目がタブで表示されています。

デバイスごとの表示設定(スマホのマークのタブ)→「Hide on checked devices」を選択→「 mobile」にチェックをいれ、保存をクリックします。

これで、スマートフォンではサイドバースペースの目次を非表示できます。

タブレットも非表示にしたい場合は、「Tablet」にもチェックをいれましょう。

スマホ表示すっきり

チェックを入れるだけですので、簡単ですね。

Widget Optionsの詳しい使い方は、こちらの記事ご参照ください

https://samurai0505.com/widget-options/

(追記説明)トップページに表示されたRTOC目次を非表示にする

トップページに見出しつきの固定ページを設定していたり、RTOC設定で「表示条件」が少ない数字ですと、トップページのサイドバーにも目次が表示されてしまいます。

こちらは需要がないので、非表示にしましょう。

方法は3つあります。

①.Widget Logicを使う

先の【スマホ記事下に目次を表示させないようにする】で使用しました「Widget Logic」を、ここでも使用します。

外観>ウィジェット>スクロール広告用>RTOC目次コードを置いたテキストの「ウィジェットのロジック:」に、以下のコードを入力してください。

!is_home()

「保存」「完了」をすることで、トップページのサイドバーにRTOT目次が表示されなくなります。

②.Widget Optionsを使う(おすすめ)

先の【スマホ記事下に目次を表示させないようにする】で使用しました「Widget Optionsを、ここでも使用します。

ウィジェットの表示設定(目のマークのタブ)→「Hide on checked devices」を選択→Misc→「 Home/Front」にチェックをいれます。

「保存」「完了」をすることで、トップページのサイドバーにRTOT目次が表示されなくなります。

idget Optionsの詳しい使い方は、こちらの記事ご参照ください

③.「除外する固定ページID」で指定

RTOC目次には、固定ページの目次を非表示にする機能が予め備わっています。これはとても便利です。

「除外する固定ページID」に、トップページに設定した固定ページのIDを記入すれば、トップページに目次は表示されることはありません。

固定ページのIDは、固定ページ>固定ページ一覧で確認ができます。

3.サイドバー目次に縦スクロールをつける(デザインCSS設定)

目次が長いと画面下からはみ出してしまい、見きれてしまいます。
これを解消するために、目次が長い場合は自動でスクロールを付くようにしましょう。

ダッシュボード>外観>カスタマイズ>追加CSS
に、以下のコードを貼り付けてください。

/*サイドバー目次自動スクロール*/
.rtoc-mokuji.mokuji_ol.level-1 {
max-height: 500px;
overflow-y: auto;
}

ブログ記事を確認してください。
目次が見きれるほど長い記事がありませんでしたら、テスト記事を上げてみて確認してください。

コード解説

max-height: 500pxにて、要素の高さの最大値を設定することができます。
○○○px以上でスクロールを表示させるという指示です。
それぞれ自身のサイトにあった数値に変更ください。

auto;にすることで要素のmax-heightを計算して選択します。
max-heightより大きくなれば縦スクロールが表示され、そうでなければ非表示になります。

目次のデザイン幅を変える

アフィンガーでRich Table of Contentsの目次を設定しますと、やや幅の狭いものとなってしまいます。サイドバーでの表示も余白が多すぎて読みにくいです。

変更前 記事内目次
変更前 サイドバー目次

もう少し、全体の幅に合うようにしたいので、目次を幅広にしていきます。

ダッシュボード>外観>カスタマイズ>追加CSS
に、以下のコードを貼ってください。

/***RTOC目次幅変更***/
/*記事内目次*/
.rtoc-mokuji-content {
width: 100%!important;
 font-size: 2em;/*文字サイズ*/
box-sizing: border-box;
}
/*サイドバー*/
.rtoc-mokuji.mokuji_ol.level-1{
width: 230px;/*幅*/
}
変更後 記事内目次
変更後 サイドバー目次

コード解説

 font-size: 2em;
使われている書体や、CSSで指定している文字の大きさによって変化するようにemにしました。お好みでご変更ください。

width: 230px;
文字全体を中央に合わせようと思ったのですが、width: だけでも充分だなとなり、これだけの変更です。

べ、別に面倒だったわけじゃないんだからっ

目次に現在位置マーカーをつける

読者が迷子になりにくいように、今どこの記事を読んでいるのかを目次の見出しにマークしてくれる実装をしていきます。

ぺんさんのサイトのご案内通りになります。

RTOC を利用しているユーザーでしたら、テーマを問わずマーク機能を使えますこと、嬉しい限りです

1.JavaScriptを貼り付ける

アフインガーの場合、ダッシュボード>外観>テーマファイルエディターの、編集するテーマを選択:AFFINGERにて「AFFINGER: テーマのための関数 (functions.php)」に貼り付けます。

AFFINGER: テーマのための関数 (functions.php)一番下に、以下のコードを貼ってください。

/*** 目次マーク***/
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' );

完了しましたら、「更新する」を忘れずにクリックしてください。

2.CSSを貼り付ける

ダッシュボード>外観>カスタマイズ>追加CSS
に、以下のコードを貼り付けてください。

/*** 目次マークカラー設定***/
a.current {
background-color:#edf5ff;
}

プレビューでマーカーが表示されましたら、公開のクリックをお忘れなく保存してください。

貼るだけ簡単!

ぺんさんありがとうございます!

一部記事では反映されない(原因究明中)

ワードプレスで作成した記事では問題なく目次に現在位置がマークされるのですが、はてなブログ時代の記事では、マークが反映されません。

現在位置を示すclass=”currentが効いていません。これから原因を考察し、改善していきます。

マウスオーバー時の下線を変える

ちょっとデザイン性を高めるため、マウスオーバー時の下線アニメーションを追加しましたのでご紹介します。

例.マウスオーバー時、左から下線が現れるCSS

ダッシュボード>外観>カスタマイズ>追加CSS
に、以下のコードを貼り付けてください

/***RTOC元の下線を消す***/
.rtoc-mokuji-content .rtoc-mokuji li > a{
text-decoration: none!important;
}
/***RTOC目次下線***/
.rtoc-mokuji-content .rtoc-mokuji li > {
position: relative;
display: inline-block;
text-decoration: none;
}
.rtoc-mokuji-content .rtoc-mokuji li >a::after {
position: absolute;
bottom: 1px;/*線の位置*/
left: 0;
content: '';
width: 100%;
height: 2px;/*線の太さ*/
background: #333;/*線の色*/
transform: scale(0, 1);
transform-origin: left top;
transition: transform .3s;
}
.rtoc-mokuji-content .rtoc-mokuji li >a:hover::after {
transform: scale(1, 1);
}

下線CSSコードはNxWorldさんから頂き、アレンジいたしました。
他の下線デザインもありますので、お気に入りがありましたら、置き換えてください。

アレンジの際には、.rtoc-mokuji-content .rtoc-mokuji li >は消さないようにご注意ください。

記事でRTOC目次が表示されない

記事で目次が表示されないとお悩みの方は、こちらの記事をご参照ください。表示されない複数の原因を紹介しています。

https://samurai0505.com/rtoc-notfound/

アフィンガーでRTOCを設置する まとめ

アフインガーの「すごいもくじ」を使えば、もっと簡単に欲しい機能が追加できると思いましたが、勉強も兼ねて実装してみました。

無料でここまでの機能を備えているRich Table of Contentsに感謝です。

アフィンガーを使ってのブログの作り方については、こちらの記事をご参照ください。

https://samurai0505.com/how-to-make-the-blog/
アフィンガーでプロフィールカードを作る|サイドバーを整えよう

2022/11/8

サイトの右側のサイドバーにある自己紹介の欄。 こちらをプロフィールカードといいますが、アフィンガーでは、プラグインなしにおしゃれで見やすいプロフィールカードを作ることができます。 今回はアフィンガーの ...

アフィンガーでサイドバーをデザインする方法を徹底解説!

2022/10/28

サイドバーは、ブログの顔といっても過言ではない重要なスペースです。サイドバーを整頓することで、見た目の良さだけでなく、利便性も変わってきます。 現在管理人は、ユーザビリティ向上を第一に、以下の項目をサ ...

アフィンガーでおすすめ記事をサイドバーの好きな場所に設置する方法|プラグイン使用なし!

2022/10/28

多くのブロガーが設置しているサイドバーの人気記事。 おすすめ記事の表示がある事で、ユーザーに興味を持ってもらい、別記事へのアクセスやブログの滞在時間を伸ばしてもらう事に繋がります。 それを可能にしてく ...

アフィンガーでおしゃれなトップページを作る|ブロックエディタでの作り方を解説

2022/10/26

AFFINGER6(アフィンガー6)を購入したかたは、せっかくの有料テーマですので、それを生かした素敵なトップページをつくりたいと考えていると思います。 クラシックエディターを使った方法が上位表示され ...

Table of Contents Plusで見やすいブロブにカスタマイズする|アフィンガー環境で快適目次

2022/10/26

「Table of Contents Plus」は記事に目次を表示できるWordPressプラグインです。 今回はTable of Contents Plusを用いて、AFFINGER(アフィンガー) ...

アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる

2022/10/28

今やスマホでサイトを閲覧することが多いです。 「興味あるところだけ読みたい」「さっき読んだところをもう一度確認したい」というニーズが発生することは、往々にしてあります。そのときにあると便利なのが「目次 ...

UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogleドライブ

2022/8/28

UpdraftPlusは、WordPressのデータをバックアップ・復元できるプラグインです。 WordPressで構築したウェブサイトのデータベース、プラグイン、テーマ、アップロードファイル、wp- ...

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

2022/10/15

AFFINGERで"ヘッダーカード"を設定する方法をご紹介します。 ヘッダーカードを入れることで、以下のようにサイトが変化します。 ヘッダーカードを設置することで、「サイトがおしゃれに華やかになる」「 ...

ブログの作り方(アフィンガー)|当ブログのサイトマップ

2022/10/28

ブログを始めるにあたり、おすすめのサーバーやテーマ、またブログをはじめたら押さえておくべき設定などの記事をまとめました。 おすすめサーバー「スターサーバー」 スターサーバーのメリット・デメリット 当ブ ...

Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

2022/8/28

ブログをはじめたら必ず導入するべき、問い合わせフォームのプラグイン「Contact Form 7」。作成者は日本人ですので、公式サイトは日本語で解説されています。 Contact Form 7公式サイ ...

スターサーバーのメリット・デメリットと、性能や料金を徹底紹介

2022/8/28

月額138円~という格安でありながら、高性能サーバーであると言われているスターサーバー。 日本マーケティングリサーチ調べでは、 WordPress 利用者注目度・ブロガー&アフィリエ ...

スターサーバーの契約方法・設定方法を徹底解説

2022/8/28

この記事ではスターサーバーを使い、ワードプレスの設定方法を初心者でもわかりやすいようにお伝えします。 スターサーバーのメリット・デメリットについては、こちらの記事をご参照ください。 スターサーバーの有 ...

アフィンガー|スマホのヘッダーやメニューをおしゃれに設定する方法

2022/10/28

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」にて、スマホのヘッダーをおしゃれにする方法を、ブログ初心者さん向けに1からわかりやすく解説していきます。 今回紹介す ...

投稿タグを選択式(チェック)にする|らくらくタグ設定

2022/8/25

投稿記事の作成編集ページのタグは、フリー記述方式なので、タグの入れ漏れがある可能性があります。 管理人も、どんなタグ前に作ったっけ?と、確認しながら入力していました。 しかしながら、そのような面倒な作 ...

AFFINGERでヘッダーを個性的でおしゃれにする方法

2022/10/28

有料テーマのAFFINGERを購入したからには、デザインに優れた機能をつかい、かっこいいブログにしたいところです。 今回は、AFFINGER6のヘッダーエリアと、ヘッダーメニューエリアを個性的でおしゃ ...

このサイトはアフィンガーを使用しています

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING(アフィンガー6)公式サイト

2022年最新!おすすめレンタルサーバー

月額料金がライトプランで220円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです!

Twitterでも口コミ良好!

スターサーバー公式サイト

  • B!