目次
情報系のサイトを作っているかたには必須ともいえる「目次」。
この目次を一度設定するだけで、自動で生成してくれるとっても便利なプラグイン Table of Contents Plus とEasy Table of Contents をご紹介します。
※プラグインのインストール方法についてはWordPressプラグインおすすめ８選でご確認下さい。
Table of Contents Plus は有効インストール数300,000∔と多くの人に使われているプラグインですが、長期間更新されていない為、 最新バージョンの WordPress で使用した場合、互換性の問題が発生する可能性があります。
そこで、同じように使え、 有効インストール数90,000∔と徐々に利用者が増えてきているEasy Table of Contents もご紹介します。
こちらの記事では、
①Table of Contents Plus の設定方法と目次をサイドバーに設置する方法
②Easy Table of Contentsで表示が崩れた際の設定方法
③目次を中央に表示させる方法
をご紹介します。
初期設定( Table of Contents Plus )
↓ ↓ ↓
左メニューの設定→ＴＯＣ＋をクリックします。
↓ ↓ ↓
基本設定の画面です。 上記は参考ですので、 ご自分の好みに設定して下さいね。
以下のコンテンツを自動挿入 の所の「post」=「投稿ページ」・「page」=「固定ページ」 です。
プレゼンテーションのカスタムを選ぶと背景・ボーダー・タイトル・リンク・リンク（マウスオーバー）・リンク（閲覧済み）の色を簡単に変更することが出来ます。
以下のような感じです。色々試してみて下さい。
↓ ↓ ↓
↓ ↓ ↓
↓ ↓ ↓
左下の上級者向け横の表示をクリックすると、上級者向けの設定が出来ます。
以下３点ご紹介します。
↓ ↓ ↓
- ＣＳＳファイルを除外：ＣＳＳをカスタマイズするする時にはこちらにチェックをして下さい。
- 表示・非表示の設定が出来ます。表示したいタイトルレベルにチェックします。
- 特定の文字を含んだ見出しを非表示にしたい時に、ここで設定します。
サイドバーに設置する方法
↓ ↓ ↓
左メニューの外観→ウィジェットをクリックします。
↓ ↓ ↓
ＴＯＣ＋をメインサイドバーの設定したい場所へドラッグし設置します。
↓ ↓ ↓
メインサイドバーのカテゴリー下に設置してみます。
↓ ↓ ↓
↓ ↓ ↓
サイドバーに表示されているのが確認できました。
Easy Table of Contents の設定
続いて、Easy Table of Contentsの設定方法です。Table of Contents Plusとほとんど同じです。
下図の目次の場合の設定を参考に添付しておきますね。
↓ ↓ ↓
以下はデフォルトのままです。最後に左下の変更を保存をクリックし完了です。
↓ ↓ ↓
サイドバーへの設置も同じで「目次」をメインサイドバーの好きな位置へドラッグ&ドロップ するだけです。
表示を確認し崩れていなければ完了です。お疲れ様でした。
青い丸が表示される時
テーマ、ストークではインストール直後は下図のような状態です。
↓ ↓ ↓
テーマによっては数字のところに青い丸が表示される場合があります。リストの点かと思われますが、不要なので非表示に設定します。
↓ ↓ ↓
左メニューの外観→カスタマイズをクリックします。
↓ ↓ ↓
追加ＣＳＳをクリックします。
下記をＣＳＳにコピペして下さい。
/* Easy Table of Contents */
/* 青○を消す */
#ez-toc-container li:before{
width: 0;
height: 0;
}
↓ ↓ ↓
↓ ↓ ↓
右上の公開をクリックします。
↓ ↓ ↓
青丸が消えました。お疲れ様です。
目次を中央寄せにしたい方は続きをご覧下さい。
目次を中央寄せにする
下記をＣＳＳにコピペして下さい。
↓ ↓ ↓
/* 目次中央寄せ */
#ez-toc-container{
margin: 0 auto;
}
↓ ↓ ↓
↓ ↓ ↓
右上の公開をクリックします。
以上で完了です。
・・・が、タイトルの目次の文字をなるべく中央にしたい方は続きをご覧ください。
↓ ↓ ↓
①を中央にし、②の幅を加えました。
/* ①目次タイトル中央 */
#ez-toc-container p.ez-toc-title{
text-align: right;
}
/* ② */
div#ez-toc-container ul li {
padding-left: 20px;
}
追加ＣＳＳにコピペして下さい。最後に右上の公開をクリック。
以上で完了にします！最後までご覧頂きありがとうございます。
