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

2020年8月12日
2020年8月13日
ブログ運営
THE THOR

ブログ運営

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

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

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

つるさん

かなり地味ですね(^▽^;)

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

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

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

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

1 THE THORの目次をオシャレにカスタマイズする方法
- 1.1 THE THORの目次の設定方法から
2 目次のコードをコピペするだけでOK
- 2.1 なぜ『追加CSS』に貼り付けるの？
3 THE THORの目次デザインを細かく調整
4 【コピペでOK】THE THORの目次をオシャレにカスタマイズ|まとめ

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

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

前述のとおり、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』に貼り付けるの？

実は、目次のカスタマイズのコードの貼り付けは、もう一つやり方があって、子テーマのスタイルシート (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;の

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

また、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;のカラーコードを書き換えます。