Kanamii

伝えたい想いを自分らしく・・・

kanamii-1055-1

スポンサーリンク

STINGERカスタマイズ

目次を表示するWordPressプラグイン【Table of Contents Plus】を簡単カスタマイズ!

2016/10/02

記事の見出しごとに目次を自動生成してくれるWordPressプラグイン「Table of Contents Plus」を当ブログでも使用してみました。
なんだか、記事ページが華やかになったみたいでウッキウキ♪

・・え?私だけ?・・

でも、なんだかデフォルトのままではちょっと堅苦しい感じ。
なので、ほんの少しだけ手を加えてカスタイズしてみました。

ここでは、「Table of Contents Plus」のインストールと設定方法、そして簡単なカスタイズ方法をご紹介します。

下記のようにカラーを変更、ボックスの角に丸みを付けて、見出しのテキストにGoogleフォントを使いました。
さらに、中央寄せで表示する場合のCSSコードもご一緒に。

スポンサーリンク

Table of Contents Plusのインストールと設定方法

WordPressダッシュボード→プラグイン→新規追加→「Table of Contents Plus」で検索して表示されるプラグインをインストールして有効化してください。

kanamii-1055-2

設定は、プラグイン→プラグイン一覧→「設定」から行います。

kanamii-1055-3

各項目は、お好みに応じて設定してください。

デザインと見出しレベルの指定

設定項目の中にある「デザイン」で「カスタム」を選択すると、背景、Border、各テキストのカラーをお好きなカラーに指定できます。
とても便利ですね。

kanamii-1055-4

さらに、「上級者向け」のタブを開くと表示される項目では、「見出しレベル」の指定ができます。
その他の項目は、お好みで設定してください。

kanamii-1055-5

style.cssにコードを追加

全てのテーマファイルの編集は「子テーマ」で行うことをおすすめします。
親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」(子テーマ可)に、コードを追加してスタイルを指定します。

余白調整&ボックスの角を角丸に

※ボックス下の余白を指定しています。px数はお好みに応じて変更してみてください。

見出しのテキストにGoogleフォントを適用

※こちらは、当ブログで使用している無料WordPressテーマ「STINGER PLUS+」、または、Googleフォント対応のテーマをお使いの場合の英数字に適用されます。

"Josefin Sans"は、適用したいフォント名に変更してください。

kanamii-590-4

中央寄せで表示させたいとき

子テーマのstyle.cssに追加したコードが反映されない場合は、追加場所を先に入力しているコードの前に変更して再度お試しください。

以上、WordPressプラグイン「Table of Contents Plus」のインストールと設定方法、カスタイズ方法のご紹介でした。
ちょっとした簡単なカスタマイズでウッキウキになりますので、是非お試しください♪

最後までお付き合い下さりありがとうございます。

▶STINGER PLUS+ カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGERカスタマイズ