「RTOC」を使っておしゃれな目次を作る、WordPress

WordPress目次を設置完了。

WordPressサイトを閲覧していると大抵のサイトが目次を掲載しています。マニュアルでは無いので箇条書きの見出しでも良いのではと思ってしまいますよね。

投稿記事が増えると目次を入れることによって記事の全体像が分かり、利便性が高まります。やはり、あった方がいいんじゃない？。そんな訳で導入して見ました。

色々沢山の目次機能があります。迷ってしまいますね。

THE THORテーマには標準の目次機能があるのですが、本当にシンプルです。

また、左側に固定されてしまいますので、中央に表示したい場合移動出来ません。

そこで探してみました。オシャレな目次を。

RTOC「Rich Table of Contents」がおすすめな理由を5つ。

・WordPressテーマ「JIN」を開発した「ひつじさん」が作ったJIN用の目次プラグインです。
　JIN用ですが他のテーマでも適用出来るそうなのですが…。

・操作が日本語でわかりやすい。
・目次の作り方が簡単
・デザイン性が高くおしゃれ
・スマホの目次に戻るボタンが便利
・★WordPressテーマに目次機能があった場合「使用しない」にしておきます。
・★JIN以外のテーマで作成した場合テーマと干渉する場合があるようです。

直感的に好きなデザインのおしゃれな目次を作れそうです。

THE THORでは表示が乱れる

「RTOC」で完成したのがこちら

なんか目次Noに丸印が付いていますね。たぶんTHE THORテーマが干渉しているためと思います。

他のテーマでも見受けられるようですが、ちょっと見た目が悪いですか。

残念ですがTHE THORでは表示の関係で使えませんでした。

試行錯誤した結果

現在は「Masaa.net」さんのCSSを拝借しています。

Cocoonの目次機能カスタマイズ

MASAa.net

【THE THOR】サイドバー／サイドバースクロール追従に目次表示 - MASAa.net

INDEX WordPressテーマ THE THOR（ザ・トール）目次プラグイン Table of Contents …

個人的にはこちらが好きですね。他のテーマでも導入出来そうなのですが。

今回「RTOC」では導入に失敗しましたが、好みにカスタマイズできる機能は魅力的でした。テーマによってですが導入を検討してみてはいかがでしょう。

こちらもオシャレな目次ですよ。THE THORに対応しています。

「ここあ」さんのサイト
THE THOR「目次」CSSカスタマイズ

旅するように人生を生きよう！

【コピペだけ！】THE THORの目次をおしゃれにカスタマイズ！

ここあです。   WordPressテーマ「THE THOR」には デフォルトで記事の目次を表示させる機能があるので  …

目次をつくる目的は主に2つです。

①検索者が必要とする情報をひと目で把握するため

②SEOの効果がある

WordPressに目次を表示させるは三つの方法

①WordPressテーマの機能を使う。

　メリットは簡単に設置出来ることですね。

　デメリットはただ設置出来ると言うことで好みにカスタマイズは出来ません。

②機能が無ければプラグインを使う。

　幾つかデザインされた中から好みのスタイルを選択して設置していくと言う方法です。

　デザイン・利便性は優れています。

　デメリットはWordPressテーマの機能によって表示が乱れることがあります。

③CSSを追加して見た目重視のカスタマイズを行う。

　CSSの知識が無くてもコピー＆ペーストで設置する事が出来ます。

CSSと言うと難しそうですが簡単にコピーペースト出来るので良く説明を読んで下さい。親身に説明されていますよ、きっと役立つサイトになるでしょう。

今回「THE THOR」では導入に失敗しましたが、以上のことを念頭に入れて「RTOC」の導入方法です。

RTOC「Rich Table of Contents」目次設定

一通り順を追って投稿ページのタグの使い方、付け方・表示方法を初心者向けに設置までの道のりを説明します。

自動で目次を作るためプラグイン「Rich Table of Contents」をインストールします。
「Rich Table of Contents」のインストール、設定は他のサイトで沢山あるので目次を設置するまでの簡単な手順まで説明して行きます。初心者、表示の仕方が分からない、すぐ設置したい方に簡単に設置できる様説明して行きます。カスタマイズなど上級者向けには説明がなされていないのでご了承下さい。他のサイトで説明していますので。

RTOCをインストールする

【外観】▶︎【プラグイン】と移動し、画面上にある【新規追加】をクリックします。

検索窓に「RTOC」と入力すると「Rich Table of Contents」のプラグインが出てくるので、インストール後【有効】にしておきます。

目次の基本デザインを設定をする

RTOCの目次プラグインを有効化すると、WordPressの左のメニューバーに「RTOC設定」が表示されるのでクリック。
目次の基本設定をしていきます。

「RTOC設定」

「Rich Table of Contents」の設定は他のサイトで沢山あるので目次を設置するまでの簡単な手順まで説明して行きます。初心者、表示の仕方が分からない、すぐ設置したい方に簡単に設置できる様説明して行きます。カスタマイズなど上級者向けには説明がなされていないのでご了承下さい。他のサイトで説明していますので。
目次の基本デザインを当サイトが適用させた設定で説明させていただきます。

①RTOC設定をクリック
②目次のタイトルを設定する
　目次としますが（人によって「Contents」とする人もいます）
③目次を表示させたいページを決める
　投稿だけ、固定ページ、TOPページ、両選択できます。投稿だけで設定しています。
④設定によって見出し3、見出し4は目次に非表示させることができる
⑤見出しが少ない時は目次を作らないことも可能。2個以上あれば表示出来ます。
⑥好きなフォントを選ぶ

目次のデザインを決める

目次のデザインは、プレビューを見ながら好みに設定しましょう。
ちなみにこのブログの設定は下図です。
①目次タイトルを左寄せにするか中央寄せにするか選べる
②見出し2（H2）のデザインを決める
③見出し3（H3）のデザインを決める　番号 or ●印か
④目次の枠を好みに決定する　メインでここが好みですね。
⑤目次を表示させる際のアニメーションを決める
⑥読みたい見出しを目次の中から選択した際、目的の見出しまでスクロールさせるか一気に飛ばすかを選択できる

プリセットカラー設定

目次のカラーをワンクリックで好きなものに設定できます。

デフォルトの「JIN Color」以外を選択すると、さらに詳細なカラー設定ができます。
こちらで選んだカラー設定が下図の設定に移行されます。
あなたのブログカラーに合う目次のカラーがなかった場合は、こちらで調整しましょう！

その他スマホの「目次に戻るボタン」などの設定を行います。

①スマホの「目次に戻る」ボタンのON or OFFを切り替えます。
②スマホの「目次に戻る」ボタンを左右どちらかに設定します。
③「目次に戻る」ボタンの中のテキストを設定します。
④「目次に戻る」ボタンを数字の大小で上下の微調整をします。
⑤投稿したブログ記事のIDを指定して目次を表示させないことが出来ます。
　投稿IDが入りますがそのままで無視します。
⑥固定ページもIDを指定して目次の表示をさせないことが出来ます。
　固定ページIDが入りますがそのままで無視します。
⑦目次を最初から表示させるか、閉じておくかの選択が出来ます。
⑧目次が閉じている時に開くためのボタンテキストの内容を設定出来ます。
⑨目次が開いている時に閉じるためのボタンテキストの内容を設定出来ます。
⑩自分オリジナルのCSSを適用させたい場合はチェックを入れます。
最後には「変更を保存」を忘れないように。

目次タグの入れ方

WordPressの記事の作成画面で一行づつ設定します。

記事中に目次にしたいタイトルを入れます。これが目次の文面になります。一行に収まるよう短めにしましょう。

設定の中にある詳細設定で、h2, h3 など、どれを目次として表示するかの設定がありますが、それがこの段落の設定に対応しています。

★「見出し１」は使いません。WordPressタイトルで使用しています。
　見出しを〈h1〉で作っていると、目次が表示出来ません。気を付けて下さい。
・h2：見出し２
・h3：見出し３
・h4：見出し４
・h5：見出し５
・h6：見出し６
・（ h2, h3, … は、HTMLのタグです）
利用するのは見出し２，見出し３、使っても見出し４ぐらいまでです。

目次Noは要りません。

見出しとしたい文頭箇所にカーソルをクイック、この後「段落」から見出し２を選べば、その場所が見出しとなり、目次にも反映されます。h3は小見出しになります。最初が目次No.1になります。見出しのタイトルは事前にフォントサイズを若干大きくしておいた方が良いです。目次には反映されません。

以後順番に表示されます。

設定が終わりましたら通常の文章を執筆して下さい。

設定した最初のタグ（h2）の上に目次が表示されます。行間を詰めると一択されますので通常の行間で打ち込んでおきます。

執筆できたらパーマリング、半角英数字または「/」「-」を設定します。★パーマリングが無いと表示されません。

WordPressで目次が表示されない時の原因と対策

①パーマリングは設定してある？

②キャッシュをクリアにする
　Mac=command ＋ R　　又は Safari 開発→キャッシュを空にする
　Windows=Ctrl＋ F5
　ショートカットキーでのキャッシュクリアはこれでできます！

③干渉しているプラグインを探す

④RTOCをアンインストールして入れ直す
　古典的な方法ですが、一度アンインストールしてから再度インストールして有効化しましょう。
　これで直るケースもあります。多分前の設定が残っていると思います。変更を保存でやり直しましょう。

⑤テーマに目次機能があった場合「使用しない」にしてありますか。

⑥それでも表示されない場合
「JIN Forum」で確認してみましょう。

私のサイトも無事目次が表示されるようになりましたが、何故か「RTOC」では目次Noに丸印が入ってしまっていました。通常使用では十分だと思うのですが、やはり気にかかります。そこで目次のカスタマイズに気に入ったスタイルのCSSを追加することにしました。

終わりに

現在の目次はMASAaさんのCSSをチョットだけカスタマイズさせて戴きました。サイトのスタイルや好みはあると思います。色々見させて戴いて好みの目次を作成してください。

「MASAa」さんからも「ここあ」さんからもリンク許可を頂いております。

先駆者の公開しているサイト、お役に立ちます。ありがとうございます。

WordPress「Font Awesome」プラグインを使ってアイコン簡単導入。

こちらです

WordPress「Font Awesome」プラグインを使って簡単導入。

Font Awesome明日から簡単に表示させることが出来る。 ブログの中で目印のアイコンを表示させたい。 文章の先頭にチェックマークがあれば分かり易くなるのに……。 なんて思った事ありませんか。 ブログを運営していると投稿記[…]

WordPress 目次作成でお悩みの方、お役に立てれば嬉しいです。