ブログのちから

副業やマネタイズ方法、アクセス解析やSEO、Wordpress、SNSの活用、ビジネス書の書評、育児、ダイエットなどを中心にお届けしてます。

Table of Contents Plus入れてる?設定とデザインのカスタマイズについてシェアするよ。

   

目次といえばTOC+

Table of Contents Plus (TOC+)入れてますか?

Table of Contents Plusといえば、記事の目次を自動で生成してくれる超有名なWordpressのプラグインですね。

 

このTOC+、目次の自動生成だけではなく、SEOにも影響するとかしないとかw

実際のSEOの効果のほどは不明ですが、検索結果に見出し表示されるなら訪問者さんのためにも導入しておきたいものですね。

 

という訳で、今日はそんなTable of Contents Plus (TOC+)の使い方と設定方法、デザインのカスタマイズ周りについてシェアしたいと思います。

SPONSERD LINK

Table of Contents Plus の設定と使い方

Table of Contents Plusの導入は、

  1. Table of Contents Plus のインストール(プラグインから)
  2. 有効化
  3. プラグインのインストール後に表示されるメニュー(設定)から各種設定

の3ステップで設置できます。

Table of Contents Plus の設定

Table of Contents Plus の設定

Table of Contents Plus の設定項目は下の表の通りです。

設定項目意味
Position目次をどこに生成するか

  • Before first heading (default):最初の見出しの上
  • After first heading:最初の見出しの下
  • Top:記事の最上部
  • Bottom:記事の最下部
Show when目次を自動生成する見出しの数(以上)
Auto insert for the following content typesどの記事タイプに目次を生成するか(主に指定するのは次の2つ)

  • page:固定ページ
Heading text目次の名前、表示/非表示リンクの設定
Show hierarchy目次を階層化するかどうか
Number list items目次に番号を付与するかどうか
Enable smooth scroll effect目次の項目クリック時に滑らかにスクロールさせるかどうか
Appearance:Width目次エリアの横幅
Appearance:Wrapping目次エリアの表示位置(左右詰め)
Appearance:Font size目次エリアの文字サイズ
Appearance:Presentation目次のデザインの指定

 

その他、Advanced の Heading levels で見出し(h1~h6)のどこまでを目次に表示するかを指定する事もできます

この辺りは何となくでも設定できそうですね。

 

Table of Contents Plus の デザイン・カスタマイズ

それでは、Table of Contents Plus の デザイン・カスタマイズについて見て行きましょう。
(といってもCSSを修正してやればOKですが)

Table of Contents Plus を中央に表示する!

Table of Contents Plus の中央表示

まず、Table of Contents Plus を中央に表示する方法を見てみましょう。

Table of Contents Plus の表示位置については、設定の中の Appearance の Wrapping という項目で設定できるんですが、設定項目は以下の3つだけ。

  • None (default): デフォルト(通常は左詰めになる。。。)
  • Left:左詰め
  • Right:右詰め

残念ながら中央表示がありませんので、スタイルシート(CSS)で変更してあげる必要があります。

といっても?Table of Contents Plus は「toc_container」というID付きで出力されますので、スタイルシートに次の記述をコピー&ペーストしてあげればOKです。

※ Appearance の Wrappingは「None (default)」にして下さい。

 

Table of Contents Plus の横幅を全体に合せる!

Table of Contents Plus の横幅を全体に合せる

次に、Table of Contents Plus を記事の横幅と合せる方法を見てみましょう。

こちらは、設定の中の Appearance の Width で93~95%といった感じでどうにかしようとしているブログを見かけますが、こちらもスタイルシート(CSS)で簡単に変更できます

そういう僕も面倒だったので、最近まで「Width:100%」で設定してましたけどw
(これがスマホ表示の横揺れの原因でした)

 

こちらも、スタイルシートに次の記述をコピー&ペーストしてあげればOKです。

※ Appearance の Width は「Auto (default)」にして下さい。

 

その他のデザインカスタマイズ

以上で基本的な表示位置のカスタマイズは出来ますが、表示位置のカスタマイズと同様に「toc_container」内に様々な追記をしてあげれば、色々とデザインをカスタマイズする事ができますね。

例えば、主なモノとしては、

  1. 背景色の変更 : background
  2. 枠線の変更 : border(ピクセル数や枠線の種類、色など)
  3. フォントサイズの変更 : font-size

くらいですかね。

 

最後に

Table of Contents Plus の基本的な設定とデザイン・カスタマイズは以上です。

 

特に、最初の見出しの前にアドセンスと目次を表示していて、「アドセンスは中央表示、目次は左詰め」というブログを良く見かけますが、簡単に両方を中央に揃える事もできますので、これを機会にデザインの見直しをしてみてはいかがでしょう?

 

以上、参考になれば幸いです。

footstamp

SPONSERD LINK

 - wordpress プラグイン

最後までお読み頂きありがとうございます!

よければシェアしてみませんか?
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 471 follow us in feedly
SPONSERD LINK

  関連記事