Simplicityでカッコイイ「もくじ」を自動生成する方法

toc-キーイメージ

WordPressのテーマ「Simplicity」で記事を投稿した際に、「もくじ」を記事冒頭に自動生成する方法をご紹介します。

流れとしては、もくじ自動作成プラグイン「Table of Contents Plus(TOC+)」をインストールし、CSSでカスタマイズして完成です。CSSは、後ほどご紹介しますので、コピペしてご利用ください。

※(2017-11-03)追記:コンパクトなデザインを追加しました。


完成イメージ

設定後は、下記の様な「もくじ」が自動で挿入されるようになります。

もくじ完成イメージ

デモページでも確認できます。>>Simplicityで「もくじ」を自動生成

それでは、手順をご説明いたします。

WordPressプラグインをインストール

まず、前回の記事(追加した方がいいWordPress必須プラグイン「5選」)でもご紹介した「Table of Contents Plus(TOC+)」というプラグインをインストールします。

Table of Contents Plus

インストール方法が不明であれば、「追加した方がいいWordPress必須プラグイン」でご確認ください。

設定

「Table of Contents Plus(TOC+)」の設定を行います。

初期設定のままでは見にくいので変更していきます。
初期設定をカスタマイズ

  1. 「ダッシュボード」>「設定」>「TOC+」へ進みます。
    TOC設定
  2. 下記のように変更してください。変更点のみ赤枠で囲っています。
    toc設定画面

下記の項目は、お好みに合わせて変更してもOKです。

  • プレゼンテーション(もくじの背景色です。)
  • 見出しテキスト(もくじのタイトル:「目次」や「コンテンツ」でもいいですね。)
  • ユーザーによる目次の表示・非表示を切り替えを許可(目次の表示ON・OFFボタンの設定)
  • 以下のコンテンツタイプを自動挿入(post:投稿記事、page:固定ページに目次が表示されます。)

CSS

最後にCSSでカスタマイズして完成です。

下記のCSSを、WordPress「ダッシュボード」>「外観」>「テーマの編集」>「スタイルシート (style.css)」に全てペーストしてください。
(すでに何か記入している方はその下に貼り付けてください。)
ペースト場所

下記のCSSを全てコピペしてください。

/*TOC+*/
#toc_container{
min-width:60%;
padding:1em 2em 1.5em 2em !important;
margin:2em auto 1em auto;
border:1px solid #ccc !important;
}
#toc_container ul{
counter-reset:num;
list-style:none;
}
#toc_container ul li{
position:relative;
font-weight:bold;
}
#toc_container p.toc_title+ul.toc_list{
margin-top:0.5em !important;
}
#toc_container ul ul{
margin-left:1.1em !important;
}
#toc_container ul ul li{
font-size:90% !important;
font-weight:normal;
}
#toc_container li a{
display:block;
padding:0.4em 0 0.4em 1.3em;
border-bottom:1px dotted #ddd;
}
#toc_container li a:hover{
text-decoration:none;
border-bottom:solid 1px;
}
#toc_container li a:before{
position:absolute;
left:5px;
counter-increment:num;
content:counter(num);
color:#666;
}
#toc_container .toc_title:before,#toc_container ul ul li a:before{
font-family:'FontAwesome';
font-weight:normal;
color:#ccc;
}
#toc_container .toc_title:before{
content:"\f0f6";
padding-right:6px;
}
#toc_container ul ul li a:before{
content:"\f105";
}
@media screen and (max-width:480px){
#toc_container{padding:0.5em 0.5em 1em 0.5em !important;}
#toc_container ul ul{margin-left:0.2em !important;}
#toc_container p.toc_title+ul.toc_list{margin-top:0.3em !important;}
}

以上です。

※(2017-08-20)CSSを一部修正:可読性を上げるためにスマホ用の余白を少し修正しました。

CSS(コンパクトVer.)

※(2017-11-03)追記:コンパクトなデザインを追加しました。

小さいサイズの目次がお好みの方は、上記のCSSは使用せず、こちらをご利用ください。

コンパクトサイズのCSSです。上記のCSSに比べてコンパクトなサイズの「目次」を生成してくれます。下記のようなデザインです。
TOC+

下記のCSSを、WordPress「ダッシュボード」>「外観」>「テーマの編集」>「スタイルシート (style.css)」に全てペーストしてください。
(すでに何か記入している方はその下に貼り付けてください。)
ペースト場所

下記のCSSを全てコピペしてください。

/*TOC+ コンパクトVer.*/
#toc_container{
min-width:60%;
border:1px solid #ccc!important;
background: #fbfbfb!important;/*背景色*/
padding:0.5em 1em 1em 1em!important;
margin:1em auto 0.5em auto;
}
#toc_container p.toc_title{
font-size:14px;
}
#toc_container p.toc_title+ul.toc_list{
margin-top:0.5em!important;
}
#toc_container ul{
counter-reset:num;
list-style:none;
}
#toc_container ul li{
position:relative;
font-size:14px;
font-weight:normal;
}
#toc_container ul ul{
margin-left:0!important;
}
#toc_container ul ul li{
font-size:94%!important;
font-weight:normal;
}
#toc_container li a{
display:block;
padding:0.1em 0 0.1em 1.3em;
border-bottom:1px dotted #ddd;
color:#333;/*文字色*/
}
#toc_container li li a{
padding-left:2.3em;
}
#toc_container li a:hover{
text-decoration:none;
border-bottom:solid 1px;
}
#toc_container li a:before{
position:absolute;
left:5px;
counter-increment:num;
content:counter(num);
color:#666;
}
#toc_container .toc_title:before,#toc_container ul ul li a:before{
font-family:'FontAwesome';
font-weight:normal;
color:#ccc;
}
#toc_container .toc_title:before{
content:"\f0f6";
padding-right:6px;
}
#toc_container ul ul li a:before{
content:"\f105";
left:18px
}
@media screen and (max-width:480px){
#toc_container{padding:0.5em 0.5em 1em 0.5em!important;}
#toc_container li li a{padding-left:1.6em;}
#toc_container ul ul li a:before{left:8px;}      
}

以上です。

お好みでカスタマイズしてください。

また、背景色や文字色の指定が不要であれば、下記のコードを削除してください。

  • background: #fbfbfb!important;/*背景色*/
  • color:#333;/*文字色*/

もしくは、別の色に変更してください。

色見本:WEB色見本 原色大辞典 – HTMLカラーコード

特定のページのみ目次を非表示にする

特定のページだけ目次を表示したくない場合は、下記のショートコードを投稿記事のどこかに記述してください。

<目次を非表示にするショートコード>

[no_toc]

記事のどこに入力しても大丈夫です。
TOC+非表示

他にも「特定のページだけ表示」や「サイトマップを表示」などのショートコードもあります。

詳しくは、下記の公式サイトをご覧ください。様々な使い方が説明されています。(Google Chrome>右クリック>日本語に翻訳が見やすいです。)
>>Table of Contents Plus | dublue

参考サイト

感想

お疲れ様でした。これで記事にもくじが自動生成されるようになります。

私が作成した「Simplicityのスキン」もよろしければ使ってあげてください。
>>シンプルで美しい「Simplicityのスキン」を「4種類」作ってみました。

WordPressもSimplicityもほんと便利ですね。


(追記 2017-08-01:わいひらさんにご紹介していただきました。神です。ありがとうございます。)

シェアしていただけると、両手をあげて外へ飛び出します。

コメントを残す

お気軽にコメントをどうぞ。

ABOUTこの記事をかいた人

「やってみたこと」や「ライフハック」が中心のブログです。 少しでも多く役立つことができればうれしいです。 お気軽にコメントやフォローしていただけると、励みになります。 よろしくお願いします。