The・THORの目次をコピペでカスタマイズ!【WordPress】

8月 7, 2019

目次を含めたブログのデザインを考えたことがあるでしょうか?

WordPressのテーマを購入して、そこに設定されたデフォルトの配色パターンをそのまま使っているブログが非常に多いです

どんなキーワードでも良いのでライバルサイトを検索すると、上位に表示されるサイトは必ずカスタマイズしているはずです。

デザインの良いブログが必ず稼げるわけでは無いです。

でも、デザインに気を使わないブログは稼げないことを証明していると思いませんか?

センスうんぬんの前に、「訪問者に読んでもらいたい」という思いがあるかどうかです。

どんなに良いことが書いてあったとしても、デザインだけで「あ、こりゃダメだ」と離脱されては稼げるはずもありません

まずは読んでもらわないと
うさぎ

The・THORの目次はプラグイン無しで設置できるのは良いのですが、シンプルすぎて「読んでほしい」という思いが伝わりません。

おじさん
ザ・地味!

今回は、これを下のようにカスタマイズしていきます。

おじさん
だいだい色が入るだけで雰囲気が変わりますね
オレンジ色ね
うさぎ

本当は当ページのような目次を作りたかったんだけど、今の私の力では無理でした。

おじさん
CSSをもっと勉強してから再挑戦します

The・THORの目次の設定

目次を作るとき、他のテーマでは「Table of contents plus」などのプラグインを入れる必要がありますが、The・THORでは不要です。

「The・THOR」は、最初から目次を表示できるようになっているので、簡単な設定だけでOKです。

設定方法

まずWordPressのカスタマイザー(「外観」→「カスタマイズ」)を開きます。

続いて、「投稿ページ設定」→「目次設定」へと進みます。

設定項目


「目次を表示するか選択」→表示する


「目次を表示するための最小見出し数を指定」→1以上でお好きな数


「目次に表示する見出しのレベルを指定」→見出し2以上を目次に表示する場合は2、見出し3以上の場合は3を入力(それ以上は多すぎると思います)


「目次パネルをデフォルトで閉じておく」→最初にページを見た時に目次を表示するかどうかを決めます


おじさん
わたしは表示派

とりあえず、これで目次は表示されるはずです。

目次が表示されない場合にチェック

目次が表示されない場合は、次の項目をチェックしてみてください。

上で紹介したように設定しているか

そのページの見出し数が設定未満になっていないか

他の目次プラグインが入っていないか

目次のコードをコピペ

次のコードをカスタマイザーの「追加CSS」に貼り付けます。

追加CSSに貼り付ける理由

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

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

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

おじさん
追加CSSで完成したら、style.cssに貼り付ければ良いですね

※目次のフォントサイズはテキストリンクと同じになります。そのため下のコードのフォントサイズを変更すると全体の表示が崩れる恐れがあります。

/*THOR目次デザインカスタマイズは自己責任でお願いします*/
.content a {font-size: 100%;/*項目の文字サイズ*/
}
.content .outline {
width: 100%;/*外枠の幅*/
border-top: solid 10px #f4bb3f;/*外枠の線*/
background: #fdf8ec;/*背景色その1*/
border-radius: 3px ;
box-shadow: 0 3px 4px
rgba(0, 0, 0, 0.1);/*外枠の影*/
}
.content .outline__number {
background: #fdf8ec;/*項目数字の背景色*/
color:#f4bb3f;/*項目数字の文字色*/
font-weight: bold;/*項目数字の文字の太さ*/
font-size: 100%;/*項目数字の文字サイズ*/
}
.content .outline__switch::before{
border-radius:5px ;
color:#7c4006;/*閉じる文字色*/
border-color:#f4bb3f;/*閉じる枠*/
}
.content .outline__link {
color:#7c4006;/*項目の文字色*/
}
.content
.outline__switch + .outline__list{
background:#fdf8ec;/*背景色その2*/
}
.content .outline__item {
background: #fdf8ec;/*h2の背景色*/
}
.content .outline__list {
background: #fdf8ec;/*h3の背景色*/
}

目次をさらにカスタマイズ

出来上がった目次を自分のサイトにあわせて、さらにカスタマイズしていきましょう。

色のカスタマイズ

今回紹介した目次の色は、タイトルの「目次」の色以外、全て変更できます

色の組み合わせやカラーコード(#××××××という色の番号)が分からないときは、「カラーコード」や「カラーコード 爽やか」「カラーコード 食べ物」などで検索してみてください。

おじさん
背景のカラーを入れる箇所がいくつもありますが、The・THORの仕様なので許してください

外枠のカスタマイズ

上のコードでは目次の上部のみオレンジの線がありますが、

  • 上 border-top
  • 下 border-bottom
  • 右 border-right
  • 左 border-left

に変更して好きな位置に枠線を入れることができます。

例えば、次のように2箇所を指定することもできます。

border-top: solid 10px #f4bb3f;/*外枠上の線*/

border-bottom : solid 10px #f4bb3f;/*外枠下の線*/

また、全体を四角く囲みたいときは、「-top」を消して単に「border」とすればOKです。

影が不要な場合は、box-shadowの行を削除すればOKです!

まとめ

THORの目次は、他のテーマを使ったサイトと比較して地味なのが難点でした。

また、無料のLionシリーズと同じ目次なので、同じようなサイトが多いのも気になるところでした。

目次を変えるだけでもサイトの雰囲気が変わるので、ぜひカスタマイズしてみてください!

テックアカデミー

ド素人の40歳のおじさんが
2ヶ月間WordPressを学んで
自在にカスタマイズできるようになり、
在宅収入を得られるようになった
オンラインスクール

The・THORの関連記事一覧