どうも！quiです。
WordPressで目次をおしゃれにしたい！
難しいCSSとか分からないから、初心者でも出来る簡単なもの！
しかも無料でできるやつ！
そんなあなたのために、今回はプラグイン１つで
プラグイン１つでWordPressの目次を一瞬でおしゃれにする
【Rich Table of Contents】
というプラグインをご紹介致します。
＼ 当ブログのテーマ ／
Rich Table of Contentsインストール方法
Rich Table of Contentsは、JINテーマ開発者のひつじさんが作成したプラグインと
なっております。
ひつじアフィリエイト https://hituji-affiliate.com/
インストール方法ですが、
まずWordPressメニューからプラグイン→新規追加
キーワードに「RTOC」と入力。
するとこのようなアイコンのプラグインが出てきますので、インストール→有効化
※筆者はRTOC導入済みのため既に有効化がグレーアウトしています。
インストールと有効化が完了するとWordPressメニューに「RTOC設定」というのが
表示されます。ここで目次のデザイン等設定を行います。
Rich Table of Contents設定
次に、Rich Table of Contentsの設定をしていきます。
設定画面も日本語で、分かりやすく出来ています。
RTOC設定①基本設定
・目次タイトルは、自分のお好みで設定してください。
・目次を表示させるページは、投稿画面と固定ページで選択可能です。
・表示させる見出しは、H2まで、H3まで、H4までと選べます。
・表示条件は、見出しの個数（Hタグの数）がいくつ以上で見出しを自動生成するか決めます。
・フォント設定は、デフォルト、Helvetica、Noto Sansから選べます。
RTOC設定②デザイン設定
次に、デザイン設定です。
ここでは、タイトルの表示位置や各Hリストの表示形式、枠のデザインなどを変更出来ます。
・タイトル表示設定（タイトルを目次左寄せにするのか中央寄せにするのかを決めます。）
・Hリストの形式（赤枠の箇所の形式変更が出来ます）
・枠のデザイン
・表示アニメーション
スムーススクロールとは、目次の項目を押した際にその見出し箇所までススーっと滑らかに動くか
ジャンプするように移動するかの設定のことです。
ONの場合ススーっと動き、OFFの場合ジャンプします。
RTOC設定③プリセットカラー設定
次に、プリセットカラーを選択します。
自身のページのイメージに合ったカラーを選びましょう。
定番カラー６種類の中から選択可能です。
RTOC設定④カラー設定（上級者向け）
上記定番カラーで自分のイメージ合うのが無い！
と言う方は、自分でカスタマイズすることも可能。
※テーマによって、カスタマイズ出来ないこともあるので注意
RTOC設定⑤応用設定
最後に、応用設定です。
ここは特にいじらなくても問題ありませんが
よりこだわりたい方はお好みに変更してください。
・目次に戻るボタンは、スマホで見た際の記事内にこのような目次へ戻るボタンを設置するか選択します。
・目次に戻るボタンの位置は、先程のボタンを左寄せか右寄せに設置するか選択します。
・目次へ戻るボタンのテキストは、表記を「目次へ」や「目次へ戻る」など変更出来ます。
・上下調整は、ボタンの上下位置を細かく調整出来ます。
・除外する投稿IDは、目次を表示させたく無い投稿IDを入力することが出来ます。
・除外する固定ページIDは、目次をを表示させたく無い固定ページIDを入力することが出来ます。
・目次のデフォルト設定は、目次を最初から開いて表示するか、閉じている状態にするか選択出来ます。
・開閉ボタンの開く・閉じるテキストは、開閉ボタンの名前を変更出来ます。
・プラグインのCSSを読み込まないは、基本的にチェックを入れずに大丈夫です。
実際にRTOCを使った参考例
では実際に変更してみましょう。
- タイトル【アンパンマン】
- H3まで表示
- フォント【Helvetica】
- H2・H3リスト形式【1.番号】
- カラー【フェミニン】
こんな感じに、簡単に可愛くも出来ちゃいますね。
見出しをおしゃれにするならRTOC！
今回は、プラグイン１つで簡単にWordPressの目次を変更するやり方をご紹介致しました。
CSSとかよくわからない！って人は、プラグインに頼って見るのはいかがでしょうか。
以上！
よろしくどうぞ
コメント