Plugin

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

更新日:

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

 

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

 

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

 

WordPressのテーマ 「The・THOR」の目次のカスタマイズはコチラの記事を読んでください。




 

目次プラグイン「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にコードをコピペ

 

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

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

 

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

 

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

 

おじさん
コードはちょっと長いよ


アイコンのコードは、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」という名前のファイルだけをアップロードし、有効化します。

 

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

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

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

続きを見る

 

SUGOIMOKUJIの設定

 

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

 

設定はTOC+と同様です。

 

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

 

設定例

 

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

 

記事ごとの設定

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

おじさん
カスタマイズは楽しいけどキリが無いのでほどほどに
おじさんはカスタマイズだけで1日が終わることが多いですよね
うさぎ




 

まとめ

 

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

 

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

 

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

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

 

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


Affiger5/Wingの公式サイト

 

 

-Plugin

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