ワードプレス自動目次生成プラグイン

 

WordPressブログの目次を導入してみます。

 

 

賢威7のテンプレートでは、実装されているので
改めてプラグインを使う必要もないのですが、
自分好みの目次とカスタマイズをしたいと思いました。

 

また目次の初期設定を非表示にしたくて、こちらの記事を拝見しました。

 

 

具体的にわかりやすく書かれていて助かりました!

 

 

目次が記事に設けられていると、
記事本文内で知りたい情報に時間をかけずに探せますし、

見出しが3つ以上ある長文になると目次をつけた方が、
読者にとって気配りができていて喜ばれますよね。

 

ということで今回は、目次の作り方をご紹介します。

 

スポンサーリンク

プラグイン「Table of Contents Plus(TOC+)」

 

プラグイン「Table of Contents Plus(TOC+)」
で、目次を自動作成ができるようになります。

 

ということで、あなたのブログにも、このプラグインを入れてみましょう。

 

wordpressの管理画面から

 

WordPressプラグインのダッシュボードからプラグインをクリック

 

 

新規追加を選択

 

 

画面右上の①検索フォーム「Table of Contents Plus」と入力し

②「Table of Contents Plus」の今すぐインストールをクリック

 

 

 

 

インストールしたら①「有効化」をクリックして有効化をします。

 

 

 

「プラグインを有効化しました。」って表示されればOK

 

Table of Contents Plusの設定

 

「インストール済みプラグイン」から「Table of Contents Plus」「設定」を選択、
「TOC+」Table of Contents Plusの略称です。

 

 

 

基本設定

 

 

Table of Contents Plusの基本設定をしていきます。

 

画像の「基本設定」タブ内の各項目を設定します。

 

 

 

①:表示する場所

 

最初の見出しの前(デフォルト)はそのままでOK

この箇所は目次をどこに表示させるかを選べます。

 

②:表示条件

 

でいいと思います。

記事内の見出し・小見出し数により数字を変えるといいです。

ただ、3以下だと意味がないと思います。

 

③:次の投稿タイプの時の表示

 

postとpageにチェックを入れる.

 

ここは、どんなタイプの記事に目次を入れるかってことを決めるところ。

postは投稿した記事pageは固定ページ

【プロフィールとかお問い合わせページのこと。】

 

④:見出しテキスト

 

Contents

目次の上にタイトルを表示する。「目次」「コンテンツ」など

好きなタイトル名を付ければいい。

ユーザーによる目次の表示・非表示を切り替えができます。

 

⑤:階層表示・番号振り

 

チェックを入れる.

見出しと小見出しで、階層がわかるようにするかを決めるところ。

文章の頭に番号を入れるかどうかを決めるところ。

 

⑥:スムーススクロール

 

チェックを入れる。

目次をクリックすると、クリックした記事に移動できます。

その際に「ジャンプ」「スクロール」するかを選べます。

 

どちらを選択するかは好みですが、僕は「スクロール」にしています。

 

デザインの設定

 

 

①:横幅

デフォルトで設定されている自動でOK

 

②:回り込み

 

デフォルトで設定されているなしでOK

 

③:文字サイズ

 

デフォルト設定のままの95%でOK

 

④:デザイン

 

あなたの好きな色を選択してください。

初期状態では灰色になっていますが、
個人的な好みで選択するといいです。

 

上級者向け設定

 

上から小文字・ハイフン・トップページ・CSS除外、
テーマのCSSなどの設定は不要。

 

 

①:見出しレベル

h2、h3にチェック。

 

目次にどの程度の見出しを表示したいのかを設定する箇所です。

個人的な判断にゆだねますが、細かい見出しを表示すると
目次自体が見づらくなります。

せいぜいh4位までならいいのかも知れません。

 

除外する見出し

 

ここでは除外したい見出しがある場合に入力します。

例えば記事下の「関連記事」などを表示したくなければ
「関連記事」と入れておきましょう。

 

 

ここまで設定できたら、
最後に「設定を更新」のボタンをクリック。

 

設定状態を確認

 

ここまでのTable of Contents Plusの設定は完了しましたが、
実際の記事を表示して確認してみましょう。

 

あなたのブログにも、目次が自動的に表示されていて、
デザイン的に自分好みでなければ各項目を変更してみてください。

 

目次デザインのカスタマイズ

 

Table of Contents Plusの初期状態だと
文字が左詰めの配置で、中央へ寄せたいと思ったのですが
設定項目が見当たりませんでした。

 

そこで、目次を中央に寄せたり、
文字サイズなどのカスタマイズ方法を紹介します。

 

デフォルトでは、外枠が角ばっているので
丸みを持たせるための設定です。

 

外枠の角を丸くする

 

外枠の角に丸みを持たせると優しい感じになります。

外枠の角々に丸みを持たせるのは「5px」の数字を
大きくしたら小さくすることで対応が出来ます。

 

 

内側の余白の変更する

内側に余白を持たせることで余裕ができます。

 

 

見出しと小見出しの文字の色を変える

 

見出し小見出しの色を変えてメリハリをつける設定です。

色の変える場合は「color: #△△△」「color: #○○○」
箇所に自分の好きな色をHTMLカラーコードから選んで対応します。

WEB色見本 原色大辞典

 

また、マウスオーバーの際の色の変更は
「color: red!important」redの部分を変えることと、
アンダーラインが不要であれば最後の
「 text-decoration: underline; 」を削除することで対応できます。

 

 

見出し小見出しの文字の大きさを変える

 

デフォルト状態の見出し・小見出しの文字は均等なので、
見出しと小見出しの文字の大きさを変えることで
メリハリがついた目次表示になります。

「font-size:90」の数字を変えることで対応できます。

 

 

見出し全体の横幅を広げる

 

見出しの横幅を広げてバランスを整えるために
以下のコードを追加します。

横幅を整えるには、

 

 

プラグインなしで「目次」自動生成させる方法

 

プログインを使った目次表示方法を伝えてきましたが
ここでは、プラグインなしで目次を自動生成する方法をお伝えします。

 

WordPressの設定画面の「賢威の設定」をクリック

 

 

投稿ごとの目次を自動で生成するの赤枠「無効にする」のチェックを外す。

 

 

初期設定では「無効にする」にチェックが入っているので、
このチェックを外すと目次が表示されるようになります。

 

見出しが少なくて目次が必要ないような記事では
目次を生成しないようにすることもできます。

 

 

 

下へスクロールしていき「変更を保存」をクリックして設定完了です。

 

 

賢威7の目次の表示位置

 

デフォルトでの目次表示位置に、気になる人もいます。

そこで、目次の表示を自由に変更する方法です。

 

AddQuicktagを使う

 

コードいちいちコピペするのが面倒なら
AddQuiuktagを使えばさらに簡単です。

 

このタグをAddQuiuktagに設定し、
好きなところに目次を表示させることができます。

 

 

参考までに以下の箇所に上記のコードを貼ります。

 

 

記事作成のたびに、タグやコードを加えていく手間を考えたら
AddQuicktagを使用した方が便利だと思います。

 

まとめ

 

賢威7はデフォルトでプラグインを使用せず目次を自動生成できます。

 

けれど目次の表示位置やデザイン的に、どうも好みじゃないです。

 

また、コードをその都度、貼り付けなど面倒なので、
プラグインを使って目次生成方法をお伝えしました。

 

スポンサーリンク