【WordPress】目次をコピペで作成!SUGOIMOKUJIもカスタマイズ!

7月 25, 2019

ブログの目次は、検索で訪問してきたユーザーが記事を探しやすくなるだけでなく、記事の内部リンクになるのでSEO的にも重要です。

そこで今回は、WordPressの記事に目次を挿入する方法カスタマイズについて解説します。

また、WordPressのテーマ「Affinger5」専用の「SUGOIMOKUJI」のカスタマイズについても紹介します。

目次プラグイン「TOC+」のカスタマイズ

今回は、下のような目次を作っていきます。

おじさん
カスタマイズは自己責任でお願いします

おじさん
わたしのような年配者には使いにくい配色ですな
一度設定してしまえば、後は色を変えたりアイコンのマークを変えたりするだけで下のように編集できますよ
うさぎ

例えば「SANGO」のように、もともと目次を表示する機能を持ったWordPressテーマでは、カスタマイズがうまく反映されないことがあります。

目次プラグイン「TOC+」のインストール

Table of Contents Plusをインストールし、有効化します。

プラグインのインストール方法がわからない方は、下の記事を参考にしてみてください。

目次プラグイン「TOC+」の設定

プラグインを有効化したら設定をクリックします。

標準設定

位置

目次を記事のどこに表示するかを決めます。とくにこだわりがなければ、「最初の見出しの前」でOKです。

表示条件

見出しの数がいくつ以上で目次を表示するかを決めます。

3か4で良いと思います。

以下のコンテンツタイプを自動挿入

通常は、投稿(post)と固定記事(page)にチェックすれば問題ないでしょう。

見出しテキスト

目次のタイトルと、タイトル横の目次の表示・非表示を決めます。

タイトルは「目次」のほか「この記事の目次」「ざっと流し読み」なんていうのもあります。

階層表示

階層表示にしないとズラっと羅列した目次になってしまうので、チェックしておきましょう。

番号振り

今回は見出し番号のない目次なので、チェックを外しておきます

スムーズ・スクロール効果を有効化

スムーズ・スクロールは、目次の項目をクリックした時に目的の見出しまでススーと流れるように移動する表示効果です。

一度試してみて、お好みで良いと思います。

設定例

上級者向け設定

設定画面の一番下にある「上級者向け」の「表示」をクリックし、以下の設定をしてください。

CSS ファイルを除外

「プラグインの CSS スタイルを読み込まない場合はチェックを入れてください。」の項目にチェックを入れます。

見出しレベル

heading 2 – h2」「heading 3 – h3」にチェックを入れます。

見出しは記事タイトルがh1になります。なので、目次はh2(大見出し)からが一般的です。大見出しだけでは記事の内容が分かりにくいのでh3(小見出し)を設定します。

また、h4まで目次に入れると項目が多くなりすぎるので、h2とh3が一般的です

設定を更新

以上の設定が終わったら、「設定を更新」ボタンをクリックして、設定完了で す。

追加CSSにコードをコピペ

WordPressの「外観」→「カスタマイズ」→「追加CSS」に下記のコードをコピペします。

おじさん
子テーマの「style.css」でも構いません

このコードは「将軍のブログ.com」さんの記事を参考に作りました。

TOC+のカスタマイズ用のコード

おじさん
コードはちょっと長いよ
/*TOC+の目次デザイン*/
#toc_container {
width: 90%;/*ボックスの幅*/
background-color: #faf5f4;/*ボックスの背景の色*/
border: 2px solid #EE817B;/*ボックスの枠の色*/
border-radius: 10px;/*ボックスの角を丸める*/
padding: 1em 2em 0em ;/*ボックスと項目間の余白*/
font-size: 18px;/*目次の文字のサイズ*/
box-sizing: border-box;/*横揺れの自動調節*/

}

#toc_container .toc_title {
text-align: center;/*タイトルを中央に*/
font-size: 20px;/*タイトルの文字サイズ*/
color: #EE817B;/*タイトルの文字の色*/
background-color: #faf5f4;/*タイトルボックスの背景の色*/
border-radius: 5px;/*タイトルボックス枠の角を丸める*/
border: 2px solid #faf5f4;/*タイトルボックスの枠の色*/
padding: 0em;/*タイトルボックスの上下の幅*/
position: auto;/*タイトルボックスの位置*/
}

/* タイトル前のアイコン */
#toc_container .toc_title:before{
content: "\f1d9"; /* FontAwesomeのコード */
font-family: FontAwesome;
padding-right: 6px;
font-size:100%; /* アイコンの大きさ */
color: #EE817B;
}

#toc_container ul {
list-style: none;/*目次のスタイル*/
margin-bottom: 0em;
}

#toc_container ul li {
margin: 0em;

padding-left: 0;
text-indent: 0;
}

#toc_container .toc_list > li > a {
border-bottom: 2px solid #FFB2AE;/*h2の下線サイズと色*/
font-size: 18px;/*見出しh2の文字のサイズ*/
}

#toc_container ul a {
display: block;/*項目をブロック形式*/
text-decoration: none;/*項目の文字の下線なし*/
color: #EE817B;/*各項目の文字の色*/
border-bottom: 2px dotted #faf5f4 ;/*小見出しの下線サイズと色*/
font-size: 16px;
}

#toc_container ul ul {
padding: 1em 0 1em 1em;/*小見出しの余白*/
}

#toc_container li {
margin-bottom: 0.8em;/*項目の横の余白/*
padding-bottom: 0.5em;/*項目の下の余白*/
}

/*h2のアイコン*/
#toc_container .toc_list > li > a:before {
font-family: FontAwesome;
content: '\f1b0';
color: #aaceff;
font-size: 120%;
padding-right: 5px;
}

/*h3のアイコン*/
#toc_container li li > a:before {
font-family: FontAwesome;
content: '\f111';
color: #FFB2AE;
font-size: 10%;
padding-right: 5px;
}
#toc_container .toc_toggle a{
color: #EE817B; /*目次タイトルの横の閉じるマークの色*/
}

アイコンのコードは、Font Awesome4.7のページでお好きなアイコンを選択すると、その下に表示されます。

タイトルや見出しの前のアイコンはFont Awesome 4.7を使用しています。

Font Awesome 5を使っている場合は書き換えが必要です。

Font Awesome 5の導入のしかた

余談・追加CSSに貼り付ける理由

目次のカスタマイズのコードは、子テーマのスタイルシート (style.css)に貼ることもできます。

でも、貼り付け→保存→確認の流れになり、一度保存しないとカスタマイズを確認できません

その点、追加CSSは表示を見ながらカスタマイズできます。なので失敗しても保存する前に書き直せます。

子テーマと同様、親テーマをアップデートしても追加CSSは書き換えられないのもメリットですね
うさぎ

たとえばWordPressのテーマ「SANGO」には、はじめから目次がカスタマイズされているので、うまく表示されません。

こんなとき、追加CSSならコピペしたものを消してしまえば、簡単に元の状態に戻ります。

追加CSSで完成したら、style.cssに貼り付けるのが良いですね
うさぎ

目次プラグイン「SUGOIMOKUJI」とは?

と、ここまではTOC+のカスタマイズについてお伝えしました。

ここからはAffinger5専用のプラグイン「SUGOIMOKUJI」について紹介します。

SUGOIMOKUJIのメリット

その1・クリックされた目次を計測

どの目次がクリックされたかを計測することで、訪問者のニーズを知ることが出来ます(一つでもクリックされるとWordPressの各投稿記事の最下部に表示されます)。

たとえば、「Affinger5のカスタマイズ」の記事では次のような結果が出ました。

これを見ると、訪問目的が「画像系を知りたい」であることが明らかに分かります

この結果をもとに、画像系の記事を上に配置するとか、別記事を作るとか、対策することが出来ますよね。

どうリライトするのか方向性が分かりますね
うさぎ
その2・ページごとに表示見出しを編集可能

TOC+は一つの設定が全ページに及びますが、SUGOIMOKUJIはページごとに表示する見出しを変更できます

記事ごとに、h5までとか、h3は外すとか、目次そのものを無くす、といった選択ができます。

SUGOIMOKUJIの注意点

  • WordPressテーマ「Affinger5 」専用のプラグインなので、他のテーマでは使えません。
  • 有料のプラグインです。
  • サイドバーに目次を配置できなくなります。(TOC+は配置可能)
  • 「WP Fastest Cache」など、他のプラグインと干渉して計測できないことがあります。

目次プラグイン「SUGOIMOKUJI」の設定方法

SUGOIMOKUJI を購入後、ダウンロードしたところから説明いたします。

SUGOIMOKUJIのアップロード

ダウンロードした圧縮ファイルには説明書も入っているので、解凍後「st-toc.zip」という名前のファイルだけをアップロードし、有効化します。

アップロードの仕方が分からない場合は、下の記事を参考にしてみてください。

SUGOIMOKUJIの設定

WoradPressの左のメニューに「目次」というメニューが出来ているのでクリックします。

設定はTOC+と同様です。

カスタマイズする場合は「プラグインの CSS スタイルを読み込まない場合はチェック」を必ずチェックし、計測を正確に知るには「ログインユーザーを計測から除外」をチェックしておきましょう。

設定例

おじさん
最後に忘れずに「変更を保存」をクリックしてください

記事ごとの設定

各記事の最下部で記事ごとに設定を変えられます。

全体設定を上書きする」をチェックし、目次にしたい見出しを選択できます(どれもチェックしなければ目次無しです)。

クリックされた場合は、この下にクリック回数が表示されます。

おじさん
訪問されているのにクリックされてないんですけど
PVがあるのに目次がクリックされていない場合は、魅力的な見出しが無いのかもしれませんね
うさぎ
おじさん
え…

コピペで出来るSUGOIMOKUJIのカスタマイズ

こちらの目次がカスタマイズした「SUGOIMOKUJI」。

コードは下に記載しておきます。カスタマイザー(「外観」→「カスタマイズ」)の「追加CSS」に張り付ければ、表示されるはずです。

上で記載した元のコードをイジっただけなので、余分なコードが残っています。色やアイコンなどはお好みで変更してください。

また、設定の一部はWordpressのカスタマイザーで行います。

・「目次色(目次のタイトル部分)」はカスタマイザーに入力してください。

・「第2リンクの数字を非表示」にチェックを入れておいてください。

・目次タイトルのアイコンのコード(Font Awesome)は、ここに入力してください。

アイコンのコードは、Font Awesome4.7でお好きなアイコンを選択すると、表示されます。

SUGOIMOKUJIのカスタマイズ用のコード

下のコードをすべて追加CSSまたは「外観」→「テーマの編集」→style.cssに貼り付けてください。

/*SUGOIMOKUJIの目次デザイン*/
#st_toc_container .st_toc_toggle a{
color: #092b79; /*タイトルの横の閉じるマークの色*/
}

.st_toc_hierarchical:not(.st_toc_contracted) .st_toc_toggle {
display:inline-block!important;
}/*タイトルの横の閉じるマーク=不要な場合は消してください*/

#st_toc_container {
width: 80%;/*ボックスの幅*/
background-color: #f4f6fb;/*ボックスの背景の色*/
border: 2px solid #092b79;/*ボックスの枠の色*/
border-radius: 3px;/*ボックスの角を丸める*/
padding: 1em 0em 0em ;/*ボックスと項目間の余白*/
font-size: 18px;/*目次の文字のサイズ*/
box-sizing: border-box;/*横揺れの自動調節*/

}

#st_toc_container .st_st_toc_title {
text-align: center;/*タイトルを中央に*/
color: #092b79;/*タイトルの文字の色*/
background-color: #f4f6fb;/*タイトルボックスの背景の色*/
border-radius: 5px;/*タイトルボックス枠の角を丸める*/
border: 2px solid #f4f6fb;/*タイトルボックスの枠の色*/
padding: 0em;/*タイトルボックスの上下の幅*/
position: auto;/*タイトルボックスの位置*/
}

#st_toc_container ul {
list-style: none;/*目次のスタイル*/
margin-bottom: 10em;/*項目間の高さ*/
}

#st_toc_container ul li {
margin: 0em;/*項目の幅*/
line-height: 1.3em;/*項目間の高さ*/
padding-left: 20;
text-indent: 1;
}

#st_toc_container .st_toc_list > li > a {
border-bottom: 1px solid #b0c7fb;/*大見出しの下線サイズと色*/
font-size: 16px;/*見出しh2の文字のサイズ*/
}

#st_toc_container ul a {
display: block;/*項目をブロック形式*/
text-decoration: none;/*項目の文字の下線なし*/
color: #092b79;/*各項目の文字の色*/
border-bottom: 1px dotted #f4f6fb;/*小見出しの下線サイズと色*/
font-size: 14px;
}

#st_toc_container ul ul {
padding: 0em 0 0em 0em;/*小見出しの余白*/
}

#st_toc_container li {
margin-bottom: 0.8em;/*項目の横の余白/*
padding-bottom: 0em;/*項目の下の余白*/
}

/*大見出しのアイコン*/
#st_toc_container .st_toc_list > li > a:before {
font-family: FontAwesome;
content: '\f22d';
color: #b0c7fb;
font-size: 120%;
padding-right: 5px;
}

/*小見出しのアイコン*/
#st_toc_container li li > a:before {
font-family: FontAwesome;
content: '';
color: #454545;
font-size: 100%;
padding-right: 5px;
}
おじさん
カスタマイズは楽しいけどキリが無いのでほどほどに
おじさんはカスタマイズだけで1日が終わることが多いですよね
うさぎ

まとめ

今回は、コピペで目次をカスタマイズする方法を紹介しました。

CSSをイジらないといけないので、初めての人は難しかったかも知れません。一度慣れてしまえば文字装飾などにも使えるので、ぜひチャレンジしてみてください。

また、SUGOIMOKUJIは、訪問者の知りたいことが具体的に分かるようになります。Affingerを使っている方は、導入を検討してみてください。

このブログの目次もSUGOIMOKUJIです
うさぎ

Affinger 5関連記事一覧