【コピペでOK】THE THORの目次をオシャレにカスタマイズ(ザ・トール)

THE THORの目次
初期設定が地味だよね…
もう少しカッコ良くならないかな?

このような疑問にお答えします。

WordPressテーマ「THE THOR」には、ディフォルト(標準装備)で
目次を表示させる機能がありますが、とてもシンプルです。

 
つるさん
かなり地味ですね(^▽^;)

そのままでも問題ないと思うかもですが、試しにどんなキーワードでも良いので検索してみてください。


上位表示されたサイトをのぞいて見れば分かりますが、ディフォルトで使われていることはほとんどありません。

やはり、読者から支持されるページというのは目次のデザインにも注意が払われていますよね。

なので今回は、自身のサイトに合った目次にカスタマイズする方法を紹介させていただきます。

THE THORの目次をオシャレにカスタマイズする方法

実際に僕の記事をもとに解説していきます。

前述のとおり、THE THORにはディフォルトで
目次を表示する機能があります。

目次before
 
つるさん
こんな感じです。

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

目次after
おーずいぶん印象が
変わりました!

まずは、THE THORで目次を表示させる方法から説明していきますね。

THE THORの目次の設定方法から

目次の表示方法は、
ダッシュボードメニューから【外観】➡【カスタマイズ】を選択。

THE THORの目次の設定方法から



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

「投稿ページ設定」➡「目次設定」

 設定項目


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


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


「目次に表示する見出しのレベルを指定」→見出し2以上を目次に表示する場合は2、見出し3以上の場合は3を入力


「目次パネルをデフォルトで閉じておく」→目次を表示するかどうかを決めます

 
つるさん
カスタマイズした目次を表示させたいなら、
最後のチェックボックスからチェックを外します。
 
つるさん
最後に必ず画面上部の
「公開」を押して、
設定を反映させてくださいね!

【公開済み】になったら、自身のサイトへ行って目次が表示されたことを
確認してください。これで、カスタマイズの準備が整いました!


目次のコードをコピペするだけでOK

 
つるさん
とりあえず、下のコードを
コピーしちゃってください!

.content .outline {
border: 3px solid #58a9ef;
padding: 10px 0 10px;
background:#e0ffff;
}.content li ul li .outline__number{
font-weight:bold;
background:transparent;
color:#cfcfcf;
width:auto;
}.content .outline__number{
width:1.8em;
height:1.8em;
padding:0;
line-height:1.8em;
text-align:center;
background:#1a4bd2;
color:#fff;
border-radius:50%;
}.content .outline__link {
display: block;
color:#777;
}.content .outline__link:hover {
color:#cfcfcf;
}.outline__title {
color: #1a4bd2;
font-weight: 700;
width:100%;
padding: 0px 0px 0px 20px;
}.content .outline__switch{
right:1.5rem;
top:10px;
}.content .outline__toggle:checked + .outline__switch::before {
content: "[ ▲ CLOSE]";
}

.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}

.content .outline__switch::before {
content: "[ ▼ OPEN ]";
border: 0;
color:#999;
}

.content .outline__switch + .outline__list {
background: transparent;
}

.content .outline__switch + ul.outline__list {
margin-left:0;
margin-right:0;
border-top:2px dotted #cfcfcf;
}

.content .outline__switch + .outline__list-2 li:first-child{
margin-top:1.0em;
}

.content .outline__switch + .outline__list-2 li ul li:first-child{
margin-top:0.5em;
}

.outline__list-2 > li > a{
font-weight:700;
}

.outline__title:before{
font-family: "icomoon";
content: "\e92f";
margin-right:5px;
}

@media only screen and (min-width: 992px){
.outline__list-2 > li > a{
font-weight:700;
}

.content .outline {
width:90%;
margin:3rem 5%;
}
}

@media only screen and (max-width: 991px){
.content .outline {
width:100%;
margin:3rem 0;
}
}



コピーができたら『追加CSS』に貼り付けます。

外観➡カスタマイズ
【外観】➡【カスタマイズ】の順にクリック


あとは『追加CSS』にペーストするだけ!

追加CSSに貼り付け


これで、バッチリ目次に反映されました!

目次カスタマイズ完了

なぜ『追加CSS』に貼り付けるの?

実は、目次のカスタマイズのコードの貼り付けは、もう一つやり方があって、子テーマのスタイルシート (style.css)に貼ることもできます。

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

その点、追加CSSは表示を見ながらカスタマイズできます。
なので色の変更や、線の太さなど、何度も書き直す際に便利なんです。

 
つるさん
納得のコードが書きあがったら
style.cssに貼り付ければ良いかもです

THE THORの目次デザインを細かく調整

あの~
大変ありがたいんですが、僕のサイト、
緑を基調としています…何とかなりませんか?

僕のサイトは青を基調としているので、僕のコードをそのまま紹介しました。

ここからは、あなた好みの目次デザインにしていくためのCSSコードの調整方法をお伝えしていきますね。

一番印象を変えるのは色!【色見本から選ぼう】

シンプルなカスタマイズに見えるかもですが、たくさんのカラーコードが存在しています。多くの色の中から何を選べばいいか分からない…。

そんな方には「HTMLカラーコード: WEB色見本 原色大辞典」がオススメ。

ビビットカラー
パステルカラー
和色

ご自身のサイトコンセプトに合った色調の中から選べば失敗することなく、
オシャレなカスタマイズができますよ( ´∀` )


目次の外枠と背景色をカスタマイズする方法

目次の外枠と背景色をカスタマイズする方法


目次の外枠・背景色を変更する場合は、以下のコードで調整します。

.content .outline {
border: 2px solid #58a9ef;  ←外枠の太さ・枠の種類・枠の色
padding: 10px 0 15px;
background:#e0ffff; 背景色
}



border: 2px solid #58a9ef;

2pxの数字を変更すれば、外枠の太さが変わります。

さらに、border: 2px solid #58a9ef;

soliddasheddottedに変更することで外枠の線を点線や破線にすることもできます。

また、border: 2px solid #58a9ef;

#58a9efを変更すれば、外枠の色を変更することができます。

上のコードでは目次の四隅を枠で囲ってありますが、

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

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

例えば、次のように上下2ヶ所だけ指定することも可能です。


border-top: 10px solid #58a9ef;
border-bottom: 10px solid #58a9ef;

外枠を上下だけにカスタマイズ

そして、背景色を変更するには、background:#e0ffff;
#e0ffff;を好きなカラーコードに変えてください。

目次のアイコンと目次の色をカスタマイズする方法

目次のアイコンと目次の色を変更する方法

目次アイコンと目次の色を変えるコードは以下の部分。

.outline__title {
color: #1a4bd2;
font-weight: 700;
width:100%;
padding: 0px 0px 0px 20px;
}


color: #1a4bd2;のカラーコードを好みの色に書き換えればOK。

目次の数字の色をカスタマイズする方法

目次の数字の色をカスタマイズする方法

目次の先頭にある数字の色を変更したい場合は、以下のコード。

.content .outline__number{
width:1.8em;
height:1.8em;
padding:0;
line-height:1.8em;
text-align:center;
background:#1a4bd2;
color:#fff;
border-radius:50%;
}



background:#fd7a9c;のカラーコードを書き換えます。

OPEN/CLOSEの文字をカスタマイズする方法

OPEN/CLOSEの文字をカスタマイズする方法

[▲ CLOSE]の文字は自由に変更することが可能です。
コードもカンタンに見つかりますよね?

.content .outline__toggle:checked + .outline__switch::before {
content: "[ ▲ CLOSE ]";
color:#58a9ef;
}


この中の "[ ▲ CLOSE ]"を例えば、"[ ▼ 気になる所だけ読んでね ]"
と書き換えればこうなります。

気になる所だけ読んでね



[▼ OPEN]の変更も同様です。

.content .outline__switch::before {
content: "[ ▼ OPEN ]";
border: 0;
color:#58a9ef;
}

"[ ▼ OPEN ]"[ ]の中を好きな文言に変えてください。

ちなみに、color:#58a9ef;のカラーコードに変更を加えれば、
文字の色が書き換えられます。

見出しの文字色をカスタマイズする方法

見出しの文字色をカスタマイズする方法

見出しの文字色は全て“#777”で統一していますので、このカラーコードを
お好みの色に変更してください。

.content .outline__link {
display: block;
color:#777;
}



このコードの中のcolor:#777;を変更します。

【コピペでOK】THE THORの目次をオシャレにカスタマイズ|まとめ

いかがでしたか?

なるべくカンタンにカスタマイズできる方法を紹介してきました。

難しく感じた人は、今後オリジナルのサイト作りの為にプログラミングの勉強も取り入れると良いと思います。

と言っても複雑な言語を覚える必要なんてありません。


今回僕が紹介したコードのどこを触れば色や形が変化するのか理解できる。
程度で充分。以下の記事で詳しく解説しています。

参考記事

プログラムの勉強に限らず、何か新しいことを始めるのに いきなり高額な出費からスタートするのは厳しくないですか? それが将来に大きなリターンになるかもしれないと分かっていても、 まずは無料でどんなものか試してみたいですよね[…]


自分の思う通りにデザインが変更できると楽しいですよ( ´∀` )


とはいえ、THE THORを使えば、初期設定が優秀すぎて変更したい所が少ないですけどね!

WordPressテーマ『THE THOR』
圧倒的にSEOに強く・抜群に上位表示されやすい究極のSEO最適化テーマ『THE THOR(ザ・トール)』であなたもインターネットビジネスを本格的に始めてみませんか?