こんにちは!月間最高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の設定
TOC+ の設定からいくつかカスタマイズすることができるし紹介していくで。
注意点もあるし一緒に確認しといてや。
目次(contents)の名前を変更する
デフォルトでは目次を表す場所に『 contents [hide] 』って書かれてて、ん?? [hide] ってナニ?ってなってしまうよね。
そこで下の画像のように分かりやすく『 もくじ[とじる]』ってしてあげたら一目でなにか分るようになるしおすすめやで!
次に目次の名前の部分と開く、閉じるの部分のカスタマイズのやり方を解説するで!
まずはワードプレスメニューの『 設定 → TOC+ 』をクリックやで!
基本設定の真ん中くらいにある『 目次テキスト 』の中の『 目次の上にタイトルを表示 』にチェックを入れて、表示させたいタイトルを入力するねん。
ワシの場合やと『 もくじ(タップでジャンプ)』っていう感じで、パッと見たら何かわかるようにしてるねん。
変更がこれだけやったら、一番下にスクロールして『 設定を更新 』をクリックして終了やで。
その他にも、『 階層表示や番号振り 』があるけど、これらはどっちもあった方が読者さんは見やすいし両方にチェックを入れるのがおすすめやで!
目次の表示・非表示の設定(折りたたみ)
目次のタイトル決めをしたすぐ下にある『 ユーザーによる目次の表示・非表示の切り替えを許可 』にチェックを入れて、それぞれに言葉を入力したらOKやで!
最後に『 設定を更新 』をクリックして終了やで!
DIVERオプションの目次設定
DIVERオプションでは TOC+ で設定した目次をさらにカスタマイズすることができるねん!
あとスマホ専用のちょっと便利な機能もあるし参考にしてみてね。
色の変え方(文字と囲い枠)
まずは『 DIVERオプション → 投稿設定 』をクリックやで!
そしたら下の画面に移動するし、
- DIVERスタイルにチェックを入れる
- TOC+基本カラーの選択(もくじの囲い枠の色)
- TOC+文字色の選択(もくじの文字の色)
- 最後に『 変更を保存 』をタップ
これで自分の好きな色に変更することができるで!
フッターに『目次へ戻る』ボタンを設置
これはスマホで見た時だけの便利機能やねん。
PCの時はサイドバーに目次を出しといたら、いつでも目次を見れるよね。
スマホで記事を見た時って、PCと違ってサイドバーが一緒に見れへんやん?
そんなときの為に、スマホではフッターに目次ボタンを表示させることができるねん。
まずは『 DIVERオプション → フッターメニュー 』をクリックやで!
次に下の画面に移動するし、『 カスタムリンク 』をクリックするねん。
クリックしたら下の画像の赤丸で囲った『 カスタムリンク 』をもう一回クリックするねん。
そしたらその下の赤丸で囲った項目が出てくるねん。
アイコンはクリックしたら、めっちゃいっぱいアイコンマークが出てくるし、目次に似合ったのを選んでや(笑)
タイトルは、『 もくじへ戻る 』とか『 目次へジャンプ 』とか、いい感じのを付けるんやで!
リンク先URLは『 #toc_container 』を入力やで!
全部終わったら『 変更を保存 』を押して終了やで!
完成したのが上の画像の一番下の赤丸で囲った『 もくじに戻る 』の部分ね!
これでいつでもどこでも『サクッ』と目次に戻ることができるし、読者さんのストレスも半減やね!
追従サイドバーに目次を表示させる
追従サイドバーに『 目次 』を表示させるメリットは
いつでもどこでも好きな目次の項目にジャンプできるという事やねん。
これは読者さんにとって読みたい項目がすぐ読める!
っていうメリットがあるし、ぜひ追加して欲しいおすすめの設定やで!
まずはメニューの『 外観 → ウィジェット 』をクリックするねん。
そしたら、ウィジェット一覧の中に『 TOC+ 』があるしそこをクリックするねん。
クリックしたら、上の画像のようにウィジェットをどこに表示させるかが出てくるし、『 追従サイドバー 』を選択して『 ウィジェットを追加 』をクリックするねん。
追加を押したら追従サイドバーに『 TOC+ 』が追加されるし、それをデフォルトから入ってる『 カテゴリー 』『 アーカイブ 』の一番下に移動(ドラッグで移動)させるねん。
理由は、画面を下にスクロールさせたときに、追従サイドバーも一緒にスクロールされて、一番下のウィジェットでスクロールが止まるからやねん。
一番下まで移動させたら、目次のタイトルを入力して『 完了 』をタップして完了やで!
ここで注意しとかなアカンのが、『 目次をサイドバーのみに表示 』にチェックが入ってると、本文中に目次が表示されないし気を付けてやで!
【ワードプレスDIVER】目次カスタマイズのおすすめ設定方法をご紹介!まとめ
最後まで読んでいただいてありがとさんやで!
今回はワードプレスのテーマDIVERとTOC+の設定だけで目次をカスタマイズする方法をご紹介しました。
htlm とか css を知らなくても、設定を変更するだけで、見違えるほどいい感じの目次にすることができたよね!
目次をカスタマイズするって結構むずかしいと思ってたけど、やってみたら意外と簡単やったでしょ?( ^ω^ )
じゃちょっとおさらいするで!
- プラグインはインストール後、有効化する
- 目次のタイトルを変更する
- 目次の折り畳みを変更する
- スマホのフッターに目次を表示させる
- 囲い枠と文字の色を変更する
- 追従サイドバーに目次を表示させる
※設定を変更したときは、必ず最後に『 完了 』もしくは『 設定を更新 』をクリックせなアカンよ!
その他にもTOC+ をインストールしたけど、目次を表示されない時の対処法を『 【ワードプレス】目次の入れ方と表示されない時の対処法をご紹介します! 』で詳しく解説してるので、困ったときは参考にしてみて下さい!
広告の種類も一番多いし、アフィリエイトするなら絶対登録しとかなアカンASPやで!
てか、アフィリエターさんで A8.net 登録してへん人おらんやろ!
知らんけど(笑)