最新記事を久々に書きました
最新記事を久々に書きました
副業アフィリエイトで給料以上稼げるようになった4つのコツを暴露します(2017年最新版)
副業アフィリエイターがアフィリエイトでサラリーマン収入以上を稼ぐ秘密を、全て暴露します。 副業アフィリエイトで...

かっこいい目次デザインへ!Table of Contents Plusの設定とカスタマイズ方法

本記事では上画像のようにTable of Contents plusで自動作成される目次のデザインをかっこよくする方法について紹介します.WordPressの管理画面からTable of Contents plusの設定画面でいくつか設定をした後に,スタイルシートでデザインを指定するという流れになります.

Table of Contents plusの概要

Table of Contents plusは記事から自動で目次を作成してくれるプラグインです.非常に便利です.

本サイトで参考にしている「沈黙のWebライティング」でも,記事内にどんな情報が書かれているかが訪問者に分かるように「目次」を設置することがお勧めされています.

参考沈黙のWebライティング」の内容レビュー

インストール方法

Table of Contents plusの導入方法については以前の記事に書いたのでご覧ください.

3.2 Simplicity2に入れておきたいプラグイン
本記事ではSimplicity2を使用するにあたり,最低限入れておきたいプラグインの紹介と,特に記事を書くのに便利になるプラグインを...

設定方法1(固定ページと投稿ページの設定)

通常の投稿ページには目次を入れるが,固定ページには目次を入れたくない場合の設定方法です.

①WordPress管理画面から,「設定→TOC+」を選択します.

161123_1

②「以下のコンテンツタイプを自動挿入」の部分に「post」とあります.postとは通常の投稿記事ページです.ここにはチェックを入れておきます.その下の「page」とは固定ページです.固定ページには目次を作らない場合はここのチェックを外しておきます.

161123_2

またその下の「見出しテキスト」の部分を編集することで,目次のタイトル部分に表示される文字を変えることができます.

設定方法2(見出しレベルの選択方法)

目次の見出しは記事のhタグを使用して自動生成されます.

Simplicity2の場合は記事内の一番大きな見出しがh2になっています.

h2からh4までを目次に並べると項目数が多くなりすぎるので,h2とh3を目次に反映させるのがおすすめです.

その設定は

①管理画面から「設定→TOC+」を選択します.

②設定画面の下の方の「上級者向け(hide)」をクリックして,上級者向け設定を表示します.

③見出しレベルがあるので,heading2, heading3にチェックを入れます.ここにチェックを入れたものが目次に挿入されます.

161123_3

設定方法3(非表示にする条件の設定)

見出しが2つほどしかない短い記事に,いちいち目次が作成されるのは不要なので,ある程度記事が長いときだけ目次を作成したいと思います.

そこで見出し項目数が一定数以上の場合だけ,目次を自動生成するように設定します.

①管理画面から「設定→TOC+」を選択します.

②「表示条件」で見出しの数を設定します.本サイトでは4つ以上にしています.

161123_4

設定方法4(目次の位置を中央に設定する方法)

デフォルトでは目次の位置が左寄せになってしまいます.目次の位置を中央そろえにしたい場合もあると思います.

残念なことに,TOC+の設定画面では配置位置の設定ができないので,以下のコードをスタイルシートに書き込むことで設定します.

①管理画面から「外観→テーマの編集」を選択します.

②「Simplicity2 child: スタイルシート (style.css)」に以下のコードを貼り付けます.

スタイルシートをカスタマイズする

スタイルシートを編集して,自動生成される目次のデザインを変更する方法を説明します.

デザインカスタマイズ用の事前設定

まずTOC+の設定が上書きされないように,以下の設定をします.

①管理画面から「設定→TOC+」を選択します.

②設定画面の下の方の「上級者向け(hide)」をクリックして,上級者向け設定を表示します.

③「CSSファイルを除外」という設定があるので,ここをチェックします.

161123_5

スタイルシートに以下のCSSを貼り付ける

①管理画面から「外観→テーマの編集」を選択します.

②「Simplicity2 child: スタイルシート (style.css)」に以下のコードを貼り付けます.

少し長いコードです.

各行の説明を全部コメントに書きましたので参考にしてください.

あまり難しいカスタマイズをしないで簡単にそのまま使いたい場合は,10行目のbackground-colorと11行目のborderの二つの色を,自分のサイトの雰囲気に合わせて変えるのがお勧めです.

設定が反映されない,目次が表示されない不具合への対処法

以上の操作をしてもTable of Contents plusの設定変更が反映されない場合は,次の3つの可能性が考えられます.

  • コードに全角スペースが入っている or {}がきちんと閉じていない
  • ブラウザのキャッシュが残っていて,新しい設定が反映されたページが表示されていない
  • サーバーのセキュリティでWAFが引っかかっている

このあたりの修正方法は以前の記事に書きましたのでご覧ください.

今回次のサイトも設定時に参考にさせていただきました.

以上,Table Contents plusの目次デザインをかっこよくする方法でした.

ご一読いただきありがとうございます.