Plugin WordPress

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

更新日:

 

今回は、WordPressで作った記事に目次を挿入する方法とカスタマイズについて紹介します。

 

おじさん
目次って英語で「table of contents」って言うんですね
わたしは「index」と思ってました
うさぎ
おじさん
「index」は、本の後ろの索引のことらしいですよ

 

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

 

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

 

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

 

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

 

 

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

おじさん
目次が二つになってしまうことも

 

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

 

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

 

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

【WordPress】有料・無料のプラグインの入れ方・インストール方法

    プラグインとは、アプリケーションソフトを拡張するソフトウェアのことです。   セキュリティを強化したり、サイトに訪れた人数を調べたりと、ワードプレス本体には無い機 ...

続きを見る

 

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

 

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

 

位置

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

 

表示条件

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

 

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

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

 

見出しテキスト

目次のタイトルと、タイトル横の目次の表示・非表示を決めます。タイトルは「目次」のほか「この記事の目次」「ざっと流し読み」なんていうのもあります。

 

階層表示

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

 

番号振り

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

 

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

スムーズ・スクロールは、目次をクリックした時に目的の見出しまで一気に移動するか、ススーと流れるように移動するかの違いです。どちらでも、お好みで良いと思います。

 

設定例

 

「上級者向け」を開く

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

 

CSS ファイルを除外

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

 

見出しレベル

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

 

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

 

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

 

設定を更新

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

 

 

追加CSSにコードをコピペ

 

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

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

 

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

 

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

 

おじさん
コードはちょっと長いよ
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を使用しています。新しいバージョンを使っている場合は書き換えが必要です。

 

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

 

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

 

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

 

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

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

 

 

たとえば、WordPressのテーマ「SANGO」には、はじめから目次がカスタマイズされているので、うまく表示されません。こんなとき、追加CSSならコピペしたものを消してしまえば、簡単に無かったことにできます

 

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

 

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

 

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

 

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

 

SUGOIMOKUJIのメリット

 

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

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

 

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

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

 

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

どうリライトするのか方向性が分かりますね
うさぎ

 

その2・ページごとに表示見出しを編集可能

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

 

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

 

 

SUGOIMOKUJIのデメリット

 

WordPressテーマ「Affinger5 」専用のプラグインなので、他のテーマでは使えません。

有料のプラグインです。

サイドバーに目次を配置できなくなります。(TOC+は配置可能)

「WP Fastest Cache」など他のプラグインと干渉して計測できないことがあります。

 

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

 

SUGOIMOKUJI を購入後、ダウンロードします。

 

SUGOIMOKUJIのアップロード

 

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

 

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

【WordPress】有料・無料のプラグインの入れ方・インストール方法

    プラグインとは、アプリケーションソフトを拡張するソフトウェアのことです。   セキュリティを強化したり、サイトに訪れた人数を調べたりと、ワードプレス本体には無い機 ...

続きを見る

 

SUGOIMOKUJIの設定

 

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

 

設定はTOC+と同様です。

 

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

 

設定例

 

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

 

記事ごとの設定

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

SUGOIMOKUJIのカスタマイズ用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です
うさぎ

 

このブログはAffiger5/Wingを使っています

Affinger 公式サイト

 

関連記事
【WordPress】テーマAffinger5/Wingのカスタマイズの一覧!

  おじさん Affinger5って色を変えたいとか思っても、どこで設定したらいいのか分かんなくなるんですよね 設定項目が多いぶん、ちょっと迷子になりやすいかもですね うさぎ おじさん そこ ...

続きを見る

関連記事
The・THORの目次をコピペでカスタマイズ!

  The・THORの目次はプラグイン無しで設置できるのは良いのですが、標準のものはシンプルすぎるとの噂が。 おじさん ザ・地味!   これを下のようにカスタマイズしていきます。 ...

続きを見る

-Plugin, WordPress

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.