【ワードプレスDIVER】目次カスタマイズのおすすめ設定をご紹介!

こんにちは!月間最高16万PVの、さはら(@sahara_momo)です。

『目次』ってhtml?css?とかプログラミングができないとカスタマイズできないと思ってましたよね。

ホントは、『TOC+の設定』の変更や、『DIVERオプション』から簡単にカスタマイズすることができます!

設定の変更については注意するポイントもあるので、そこも紹介していきますね。

この記事では、htlmやcssを使わなくてもできる目次カスタマイズ方法を画像19枚つかって分かりやすく解説していきます。

最後まで読み終わったら、自分好みの『目次』があなたの記事に花を添えるでしょう!

スポンサーリンク

はじめに目次プラグインの入れ方

まずはじめに、『 Table of Contents Plus 』という目次を表示させるプラグインをインストールせんことには始まらへんで!

もうすでにインストールしてるよ!

って人は、次の『 Table of Contents Plusの設定 』に進んでね! 

Table of Contents Plus をインストールする

Table of Contents Plus をインストールする

ワードプレスのメニューにある『 プラグイン → 新規追加 』をクリック。

それができたら下の画面になるし、①~③の順に進んでね。

① キーワードになってるか確認

② Table of Contents Plus を入力

③『今すぐインストール』をクリック

Table of Contents Plus をインストールする
②番の場所に『 Table of Contents Plus 』を入力したら、自動で入力したキーワードに当てはまるプラグインが出てくるし、簡単に見つかるで!

Table of Contents Plus を有効化する

Table of Contents Plus を有効化する

プラグインをインストールしただけやったら何も変わらへんねん。

ちゃんと『 有効化 』せなアカンで!

後からプラグインを停止したり有効化、更新するときは『 プラグイン → インストール済みプラグイン 』の順で、対象のプラグインに個別で指定してね。

Table of contents plusの設定

TOC+ の設定からいくつかカスタマイズすることができるし紹介していくで。

注意点もあるし一緒に確認しといてや。

目次(contents)の名前を変更する

目次(contents)の名前を変更する

デフォルトでは目次を表す場所に『 contents [hide] 』って書かれてて、ん?? [hide] ってナニ?ってなってしまうよね。

そこで下の画像のように分かりやすく『 もくじ[とじる]』ってしてあげたら一目でなにか分るようになるしおすすめやで!

目次(contents)の名前を変更する

次に目次の名前の部分と開く、閉じるの部分のカスタマイズのやり方を解説するで!

目次(contents)の名前を変更する

まずはワードプレスメニューの『 設定 → TOC+ 』をクリックやで!

基本設定の真ん中くらいにある『 目次テキスト 』の中の『 目次の上にタイトルを表示 』にチェックを入れて、表示させたいタイトルを入力するねん。

目次(contents)の名前を変更する

ワシの場合やと『 もくじ(タップでジャンプ)』っていう感じで、パッと見たら何かわかるようにしてるねん。

変更がこれだけやったら、一番下にスクロールして『 設定を更新 』をクリックして終了やで。

その他にも、『 階層表示や番号振り 』があるけど、これらはどっちもあった方が読者さんは見やすいし両方にチェックを入れるのがおすすめやで!

目次(contents)の名前を変更する

目次の表示・非表示の設定(折りたたみ)

目次の表示・非表示の設定(折りたたみ)

目次のタイトル決めをしたすぐ下にある『 ユーザーによる目次の表示・非表示の切り替えを許可 』にチェックを入れて、それぞれに言葉を入力したらOKやで!

最後に『 設定を更新 』をクリックして終了やで!

DIVERオプションの目次設定

DIVERオプションでは TOC+ で設定した目次をさらにカスタマイズすることができるねん!

あとスマホ専用のちょっと便利な機能もあるし参考にしてみてね。

色の変え方(文字と囲い枠)

色の変え方(文字と囲い枠)

まずは『 DIVERオプション → 投稿設定 』をクリックやで!

そしたら下の画面に移動するし、

  • DIVERスタイルにチェックを入れる
  • TOC+基本カラーの選択(もくじの囲い枠の色)
  • TOC+文字色の選択(もくじの文字の色)
  • 最後に『 変更を保存 』をタップ

これで自分の好きな色に変更することができるで!

色の変え方(文字と囲い枠)

フッターに『目次へ戻る』ボタンを設置

フッターに『目次へ戻る』ボタンを設置

これはスマホで見た時だけの便利機能やねん。

PCの時はサイドバーに目次を出しといたら、いつでも目次を見れるよね。

スマホで記事を見た時って、PCと違ってサイドバーが一緒に見れへんやん?

そんなときの為に、スマホではフッターに目次ボタンを表示させることができるねん。

まずは『 DIVERオプション → フッターメニュー 』をクリックやで!

次に下の画面に移動するし、『 カスタムリンク 』をクリックするねん。

フッターに『目次へ戻る』ボタンを設置

クリックしたら下の画像の赤丸で囲った『 カスタムリンク 』をもう一回クリックするねん。

そしたらその下の赤丸で囲った項目が出てくるねん。

フッターに『目次へ戻る』ボタンを設置

アイコンはクリックしたら、めっちゃいっぱいアイコンマークが出てくるし、目次に似合ったのを選んでや(笑)

フッターに『目次へ戻る』ボタンを設置

タイトルは、『 もくじへ戻る 』とか『 目次へジャンプ 』とか、いい感じのを付けるんやで!

リンク先URLは『 #toc_container 』を入力やで!

全部終わったら『 変更を保存 』を押して終了やで!

フッターに『目次へ戻る』ボタンを設置

完成したのが上の画像の一番下の赤丸で囲った『 もくじに戻る 』の部分ね!

これでいつでもどこでも『サクッ』と目次に戻ることができるし、読者さんのストレスも半減やね!

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

追従サイドバーに『 目次 』を表示させるメリットは

いつでもどこでも好きな目次の項目にジャンプできるという事やねん。

これは読者さんにとって読みたい項目がすぐ読める!

っていうメリットがあるし、ぜひ追加して欲しいおすすめの設定やで!

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

まずはメニューの『 外観 → ウィジェット 』をクリックするねん。

そしたら、ウィジェット一覧の中に『 TOC+ 』があるしそこをクリックするねん。

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

クリックしたら、上の画像のようにウィジェットをどこに表示させるかが出てくるし、『 追従サイドバー 』を選択して『 ウィジェットを追加 』をクリックするねん。

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

追加を押したら追従サイドバーに『 TOC+ 』が追加されるし、それをデフォルトから入ってる『 カテゴリー 』『 アーカイブ 』の一番下に移動(ドラッグで移動)させるねん。

理由は、画面を下にスクロールさせたときに、追従サイドバーも一緒にスクロールされて、一番下のウィジェットでスクロールが止まるからやねん。

一番下まで移動させたら、目次のタイトルを入力して『 完了 』をタップして完了やで!

ここで注意しとかなアカンのが、『 目次をサイドバーのみに表示 』にチェックが入ってると、本文中に目次が表示されないし気を付けてやで!

【ワードプレスDIVER】目次カスタマイズのおすすめ設定方法をご紹介!まとめ

最後まで読んでいただいてありがとさんやで!

今回はワードプレスのテーマDIVERとTOC+の設定だけで目次をカスタマイズする方法をご紹介しました。

htlm とか css を知らなくても、設定を変更するだけで、見違えるほどいい感じの目次にすることができたよね!

目次をカスタマイズするって結構むずかしいと思ってたけど、やってみたら意外と簡単やったでしょ?( ^ω^ )

じゃちょっとおさらいするで!

  • プラグインはインストール後、有効化する
  • 目次のタイトルを変更する
  • 目次の折り畳みを変更する
  • スマホのフッターに目次を表示させる
  • 囲い枠と文字の色を変更する
  • 追従サイドバーに目次を表示させる

※設定を変更したときは、必ず最後に『 完了 』もしくは『 設定を更新 』をクリックせなアカンよ!

その他にもTOC+ をインストールしたけど、目次を表示されない時の対処法を『 【ワードプレス】目次の入れ方と表示されない時の対処法をご紹介します! 』で詳しく解説してるので、困ったときは参考にしてみて下さい!

業界初!全てのアフィリエイト会員さんが対象!!
通常報酬にプラス12%上乗せでお金がもらえる!!
※一部対象外アリ
Amazonアソシエイトに落ちたあなたも『もしもアフィリエイト』からならもしかして・・
Amazon審査落ちた人はもしもで再挑戦やで!
もちろんワシも、もしもから合格したで🤤
アフィリエイト満足度9年連続 No.1 のASP!!
広告の種類も一番多いし、アフィリエイトするなら絶対登録しとかなアカンASPやで!
てか、アフィリエターさんで A8.net 登録してへん人おらんやろ!
知らんけど(笑)
スポンサーリンク
初心者アフィリエイターにこそ使ってほしい。それがDiver。

Diver

htlmやCSSなどのプログラミングを全く知らなくても綺麗なサイト仕上げることが可能!

アップデートにより常に最新のSEO対策の恩恵が受けられる!

クリックだけで吹き出しやランキングを作成可能な手軽さ!

初心者でもベテランアフィリエイターのようなサイトが簡単に作れてしまうのがDiver。

Twitterでフォローしよう

おすすめの記事