Table of Contents Plus/WordPress記事中に目次を表示・カスタマイズする方法

この記事は約4分で読めます。

gf01a201501281600

 

皆さん、記事を書くうえで「目次」って入れてますか?

 

こんな感じのやつ♪( ´▽`)

スクリーンショット 2016-03-08 6.16.19

 

目次があると、サイトに訪れた方にとって記事の全体像が一目瞭然で把握出来て、読みたい記事だけクリックして読むことも出来るようになるので便利です。

 

SEO的に効果がある・ないと意見は様々ですが、どちらにしてもあるのとないのとじゃ記事の見た目も変わりますし、なんだかスッキリ感じます。

 

なので、まだ入れてない方には入れることをおすすめします♫

 

ちなみにわたしはその目次をカスタマイズして使用しています。

 

その方法も出てきますので是非参考にしてみてくださいね(o^^o)

スポンサーリンク

Table of Contents Plusをインストール

 

プラグインをインストールする前には、必ずバックアップを取りましょう!!

 

バックアップの取り方はこちらを参考にしてください♪( ´▽`)

BackWPup×DropboxでWordPressのバックアップを確実に取る方法
追記:サイト運営しておよそ1年半後、記事の増加に伴い、有料のロリポップ!バックアップオプションに申し込みました。サイト運営を初めた最初のうちは、こちらの無料プラグインを使用していれば安心且つ充分なので、おすすめです。 WordPres...

 

「ダッシュボード」→「プラグイン」→「新規追加」をクリックし、「Table of Contents Plus」を検索し、インストールしましょう。

スクリーンショット 2016-03-08 5.54.10

 

「有効化」すると「設定」に「TOC+」という名前で表示されるので、クリックしましょう。

スクリーンショット_2016-03-08_5_54_55 (1)

基本設定をする

 

ここで、基本的な設定をしていきます。

 

  • 表示する場所 → デフォルトのままでOKです。

 

  • 表示条件 → 任意で選びましょう。

 

最初はデフォルトのままで、あとで変更したければ変更しましょう!!

 

  • 投稿タイプ →「post」(投稿)、page(固定ページ)を選択しておけばOKです。

 

  • 見出しテキスト → なんて表示させたいかを入力しましょう。

スクリーンショット 2016-03-08 6.13.32

 

  • 階層表示 → チェックしておけば、タグの通り階層が表示されるのでチェックしましょう。

 

  • 番号振り → 同様の理由でチェックしましょう。

 

  • デザイン → デフォルトのままでOKです。

 

変更したかったら、いつでも変更可能です♪

スクリーンショット 2016-03-08 6.13.52

 

最後に、表示のデザインを選択しましょう。

 

多いのはデフォルトのGreyですが、ご自身のサイトのイメージに合わせて設定しましょう(*^o^*)

スクリーンショット 2016-03-08 6.14.07

 

最後に「更新」をクリックすれば設定完了です!!

 

次はこの目次をカスタマイズする方法を紹介します。

 

この目次に飽きてしまった方、他の方と差別化を図りたいという方にはオススメな方法です(*^o^*)/

追記:

 

一度この方法でカスタマイズすると、初心者のわたしは元に戻したくても戻せませんでした(^o^;

 

なので、自己責任でお願いしますm(__)m

 

目次自体のデザインはシンプルで、任意で色も変えられるので個人的にはおすすめです(*^^*)

 

変更後元の目次スタイルには戻さないという方、コードについてお詳しい方にはおすすめしたいカスタマイズです。

 

目次をカスタマイズする

 

目次を中央に設定したい場合、こちらのデフォルトの設定では選択が左よりか右寄りしか選択出来ません。

 

そのため、カスタマイズをして中央に持ってきてあげたり、色を変えたりして自分のサイトに合う目次に変えてあげると、また雰囲気が変わるのでおすすめです♪( ´▽`)

 

方法はいろいろあると思いますが、わたしはこちらの記事を参考にさせていただきました!!

Table of Contents Plusデザインカスタマイズで目次をおしゃれに演出!

 

こちらのコードをそのままコピペさせていただき、作成した目次がこちら。

 

スクリーンショット 2016-03-08 7.40.00

 

見出しに対して、きちんと中央に表示されているのと、デフォルトではメインが灰色だったのに対して、白くなっています。

 

ただ、このままだとパソコンで表示する分には問題ないのですが、モバイルで表示したときに文字が寄り過ぎて見づらかったので調整しました。

 

また、下線の色も見やすいように変えてみました(=゚ω゚=)

 

変更後のパソコン表示がこちら。

スクリーンショット 2016-03-23 0.41.49

 

モバイル表示がこちら。

(変更前のモバイル表示を撮るのを忘れたため、比較対象がなく…申し訳ありません)

スクリーンショット 2016-03-23 0.49.26

 

調整が必要なければOKですが、気になる方はお試しください♪

 

パソコン表示のコードがこちら。

 

モバイル表示のコードがこちら。

 

(下線の色を変えるには、#0000ffを好きな色コードに変更すればOKです)

 

やはり、目次ってあると結構目を引くものなので、皆さんもカスタマイズしてみては??

 

ちなみに、こんな風にブログ内でコードをカラーで綺麗に表示したい場合は、こちらの記事を参考にしてみてください♫

 

プラグイン以外の方法で簡単に出来ました(*^o^*)

Gistを使ってWordPressに色分けされたソースコードを綺麗に表示させる方法
皆さんは、ブログにコードを表示させるとき、どのようにしていますか?わたしは今まで、ブログ初心者でそういった類のことが全くわからず、整形済みテキストを使用して表示させていました。(合っているのかさえ分からず、そうしていました笑)でも、他のブロ...

 

まとめ

 

本と同じように、目次を付けてあげることで記事が見やすくスッキリします。

 

好みの色などに変えて、記事を自分らしくカスタマイズするのも楽しいですしね!!

 

簡単なので、トライしてみてくださいね♪( ´▽`)

 

この記事を読んでいただき、どうもありがとうございました!!

 

またお会いしましょう。

タイトルとURLをコピーしました