ブログカスタマイズ ワードプレス

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

アフインガーで追従する目次を置く

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

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

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

概要

使用するプラグイン

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

使用環境

記事のの内容(簡易)

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

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

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の使い方徹底解説

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

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

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

ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

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

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

スマホ表示すっきり

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

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

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

アフインガーで追従する目次を置く

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

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

方法は3つあります。

①.Widget Logicを使う

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

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

!is_home()
アフインガーで追従する目次を置く

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

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

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

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

ウィジェット表示・非表示をカスタマイズ!Widget Optionsの使い方徹底解説

「保存」「完了」をすることで、トップページのサイドバーに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目次が表示されない

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

まとめ

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

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

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

2022/9/2

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

今やスマホでサイトを閲覧することが多いです。 「興味あるところだけ読みたい」「さっき読んだところをもう一度確認したい」というニーズが発生することは、往々にしてあります。そのときにあると便利なのが「目次に戻るボタン」なのです。 今回は、フッターの中に「目次に戻る」項目を作っていきたいと思います。 フッターメニューに入れることで、追従してくれますのでとても便利です。 この記事を読めば、以下の動画のようなことができるようになります。 まだ、スマホに固定するフッターメニューを設置していない方は、こちらご参照くださ ...

ReadMore

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

2022/8/28

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

UpdraftPlusは、WordPressのデータをバックアップ・復元できるプラグインです。 WordPressで構築したウェブサイトのデータベース、プラグイン、テーマ、アップロードファイル、wp-content ディレクトリと、WordPressを丸ごとバックアップして、復元までプラグインで行えます。 WordPressのデータをバックアップとして有名なプラグイン「BackWPup」がありますが、BackWPupの復元はFTPでファイルアップロードして、phpMyAdminでデータベースを復元する手順 ...

ReadMore

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

2022/8/23

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

AFFINGERで"ヘッダーカード"を設定する方法をご紹介します。 ヘッダーカードを入れることで、以下のようにサイトが変化します。 ヘッダーカードを設置することで、「サイトがおしゃれに華やかになる」「サイト訪問者に読んでもらいやすくなる」というメリットがあります。 作成方法【簡易版】 どのようなヘッダーカードを作るか、構想を練る ヘッダーカードの背景画像を作る(canvaなど) ヘッダーカードの挿入と設定(デザインや文字入など) ヘッダーカードの背景を変更する(必要な場合のみ) Contentsどのような ...

ReadMore

2022/8/24

ブログの作り方|当ブログのサイトマップ

ブログを始めるにあたり、おすすめのサーバーやテーマ、またブログをはじめたら押さえておくべき設定などの記事をまとめました。 Contentsおすすめサーバー「スターサーバー」スターサーバーのメリット・デメリットスターサーバーの契約方法・設定方法独自ドメインからメールアドレスを作成するブログのバックアップ問い合わせフォームを作成するスパム対策アフィンガー関連設定ヘッダーとヘッダーメニューをおしゃれにするスマホでも追従する目次を設定するスマホに固定フッターメニューを追加する記事の文字をカラフルにするアフィンガー ...

ReadMore

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

2022/8/28

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

ブログをはじめたら必ず導入するべき、問い合わせフォームのプラグイン「Contact Form 7」。作成者は日本人ですので、公式サイトは日本語で解説されています。 Contact Form 7公式サイト Contact Form 7の導入方法と、問い合わせフォームを作成する方法を紹介します。 下記のようにお問い合わせフォームを作り、サイトのフッターメニュー(ブログの最下部エリア)に設置していきます。 ContentsContact Form 7の使い方【簡易】step1.Contact Form 7をイン ...

ReadMore

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

アフィンガー

WING(AFFINGER6 ver)

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

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

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

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

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

Twitterでも口コミ良好!

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

-ブログカスタマイズ, ワードプレス
-