皆さん、記事を書くうえで「目次」って入れてますか?
こんな感じのやつ♪( ´▽`)
目次があると、サイトに訪れた方にとって記事の全体像が一目瞭然で把握出来て、読みたい記事だけクリックして読むことも出来るようになるので便利です。
SEO的に効果がある・ないと意見は様々ですが、どちらにしてもあるのとないのとじゃ記事の見た目も変わりますし、なんだかスッキリ感じます。
なので、まだ入れてない方には入れることをおすすめします♫
ちなみにわたしはその目次をカスタマイズして使用しています。
その方法も出てきますので是非参考にしてみてくださいね(o^^o)
Table of Contents Plusをインストール
プラグインをインストールする前には、必ずバックアップを取りましょう!!
バックアップの取り方はこちらを参考にしてください♪( ´▽`)
「ダッシュボード」→「プラグイン」→「新規追加」をクリックし、「Table of Contents Plus」を検索し、インストールしましょう。
「有効化」すると「設定」に「TOC+」という名前で表示されるので、クリックしましょう。
基本設定をする
ここで、基本的な設定をしていきます。
- 表示する場所 → デフォルトのままでOKです。
- 表示条件 → 任意で選びましょう。
最初はデフォルトのままで、あとで変更したければ変更しましょう!!
- 投稿タイプ →「post」(投稿)、page(固定ページ)を選択しておけばOKです。
- 見出しテキスト → なんて表示させたいかを入力しましょう。
- 階層表示 → チェックしておけば、タグの通り階層が表示されるのでチェックしましょう。
- 番号振り → 同様の理由でチェックしましょう。
- デザイン → デフォルトのままでOKです。
変更したかったら、いつでも変更可能です♪
最後に、表示のデザインを選択しましょう。
多いのはデフォルトのGreyですが、ご自身のサイトのイメージに合わせて設定しましょう(*^o^*)
最後に「更新」をクリックすれば設定完了です!!
次はこの目次をカスタマイズする方法を紹介します。
この目次に飽きてしまった方、他の方と差別化を図りたいという方にはオススメな方法です(*^o^*)/
追記:
一度この方法でカスタマイズすると、初心者のわたしは元に戻したくても戻せませんでした(^o^;
なので、自己責任でお願いしますm(__)m
目次自体のデザインはシンプルで、任意で色も変えられるので個人的にはおすすめです(*^^*)
変更後元の目次スタイルには戻さないという方、コードについてお詳しい方にはおすすめしたいカスタマイズです。
目次をカスタマイズする
目次を中央に設定したい場合、こちらのデフォルトの設定では選択が左よりか右寄りしか選択出来ません。
そのため、カスタマイズをして中央に持ってきてあげたり、色を変えたりして自分のサイトに合う目次に変えてあげると、また雰囲気が変わるのでおすすめです♪( ´▽`)
方法はいろいろあると思いますが、わたしはこちらの記事を参考にさせていただきました!!
Table of Contents Plusデザインカスタマイズで目次をおしゃれに演出!
こちらのコードをそのままコピペさせていただき、作成した目次がこちら。
見出しに対して、きちんと中央に表示されているのと、デフォルトではメインが灰色だったのに対して、白くなっています。
ただ、このままだとパソコンで表示する分には問題ないのですが、モバイルで表示したときに文字が寄り過ぎて見づらかったので調整しました。
また、下線の色も見やすいように変えてみました(=゚ω゚=)
変更後のパソコン表示がこちら。
モバイル表示がこちら。
(変更前のモバイル表示を撮るのを忘れたため、比較対象がなく…申し訳ありません)
調整が必要なければOKですが、気になる方はお試しください♪
パソコン表示のコードがこちら。
モバイル表示のコードがこちら。
(下線の色を変えるには、#0000ffを好きな色コードに変更すればOKです)
やはり、目次ってあると結構目を引くものなので、皆さんもカスタマイズしてみては??
ちなみに、こんな風にブログ内でコードをカラーで綺麗に表示したい場合は、こちらの記事を参考にしてみてください♫
プラグイン以外の方法で簡単に出来ました(*^o^*)
まとめ
本と同じように、目次を付けてあげることで記事が見やすくスッキリします。
好みの色などに変えて、記事を自分らしくカスタマイズするのも楽しいですしね!!
簡単なので、トライしてみてくださいね♪( ´▽`)
この記事を読んでいただき、どうもありがとうございました!!
またお会いしましょう。