【コピペだけ！】THE THORの目次をおしゃれにカスタマイズ！

ここあです。

WordPressテーマ「THE THOR」には

デフォルトで記事の目次を表示させる機能があるので

「Table of Contents Plus」といった

目次を表示させるためのプラグインは一切不要です。

とはいえ、「THE THOR」の目次は

• 非常にシンプル
• 左隅に表示される

という点から、

不満を持たれている人もいるかもしれません。

↓なんせこのシンプルさですからね＾＾；

なので、せっかくデフォルトで目次の機能が付いているなら

「もっと生かさなければもったいない！」と

私も素直に思いました。

ということで、今回は「THE THOR」のシンプルな目次を

おしゃれにカスタマイズする方法をご紹介したいと思います。

THE THORの目次はここで設定しよう！

それではまず目次のデザインをカスタマイズする前に

目次を表示させるための設定をしましょう！

目次の表示方法は、ダッシュボードメニューから

外観 → カスタマイズをクリックし

投稿ページ設定［THE］をクリック

さらに目次設定をクリック

以下、目次の設定画面で設定できます。

そして、まずは

▪️目次を表示するか選択の項目は必ず「表示する」に設定し

目次を表示させるための見出しの数や

見出しのレベルも必ず設定するようにしてくださいね。

ここの設定が正しくできていなければ

どれだけカスタマイズを頑張っても

目次は表示されませんので＾＾；

ということで、下準備ができたら

いよいよカスタマイズです。

THE THORの目次をカスタマイズする方法

それではTHE THORの目次をカスタマイズするための

CSSコードの記述先について先に説明を致します。

これからあなたにする紹介するCSSコードは

ダッシュボードメニューから外観 → カスタマイズをクリックし

以下「追加CSS」の部分に記述しましょう。

他にもコードの記述先としてダッシュボードメニューから

外観 → テーマエディター → style-user.cssに記述しても

特に問題はありませんが

「追加CSS」に記述する方がライブプレビューで

確認しながら作業ができるのでおすすめです。

THE THORのおすすめ目次デザイン

今回あなたにご紹介する目次のデザインは2つあります。

それほど大きな違いはありませんがちょっとだけ仕様を変えているので

あなたが使ってみたいデザインのCSSコードをコピペしてくださいね。

カスタマイズ方法も合わせて解説致しますので

紹介するコードをベースに

あなたのオリジナル目次デザインに仕上げましょう！

女性らしい可愛い目次デザイン

こちらの目次はh2、h3見出しをメインにした目次のデザインです。

色をピンク系にして少し女性らしくしてあります。

※目次の書体はGoogle Fontの「Kosugi」になっておりますので予めご了承ください。
THE THORの記事書体を変更する方法はこちらに記載しています。

Googleフォントを使った少しクールな目次デザイン

こちらの目次はh2のみの見出しをメインにした目次のデザインです。

※目次に設定する見出しのレベルは必ず「2」に設定してください。

非常に分かりにくいですが、見出しの数字はGoogle Fontにしてあります。

私が今、このサイトに採用している目次デザインに近いイメージです。

ということで、まずはそれぞれのCSSコードをご紹介しますので

気に入ったデザインがあればコピペしてくださいね。

先に紹介した女性らしい可愛い目次のCSSコードはこちら

追加CSSにコピペ

.content .outline {
border: 3px solid #ffdee0;
padding: 10px 0 10px;
background:#fffef6;
}.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:#fd7a9c;
color:#fff;
border-radius:50%;
}.content .outline__link {
display: block;
color:#777;
}.content .outline__link:hover {
color:#cfcfcf;
}.outline__title {
color: #fd7a9c;
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;
}
}

Google Fontを使ったクールな目次のCSSコードはこちら

追加CSSにコピペ

.content .outline {
border: 2px solid #58a9ef;
padding: 10px 0 15px;
background:#fffef6;
}.content li ul li .outline__number{
font-weight:bold;
color:#cfcfcf;
width:auto;
}.content .outline__number{
width:2em;
height:2em;
padding:0;
line-height:2em;
text-align:center;
background:none;
border-right:solid 1.5px #58a9ef;
font-family: 'Dosis', sans-serif;
}.content .outline__link {
display: block;
color:#777;
}.content .outline__link:hover {
color: #cfcfcf;
}.outline__title {
color: #777;
font-weight: 700;
width:100%;
padding-left:4% ;
}.content .outline__switch{
right:1.5rem;
top:10px;
}

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

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

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

.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:2rem;
}

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

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

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

@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コードをコピペした時点で目次のデザインは変わります。

THE THORの目次デザインを調整する方法

ということで、ここからはあなたがコピペした

CSSコードを調整し、あなた好みの目次に

設定する方法を簡単にだけご説明致します。

目次の外枠と背景色を変更する方法

目次の外枠の色を変更する場合は

以下のカラーコードで調整してください。

border: 2px solid #58a9ef;のカラーコード

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

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

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

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

solidをdashedやdottedに変更することで

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

そして、目次の背景色を変更したい場合は

background:#fffef6;のカラーコード

#fffef6を変更してください。

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

アイコンと目次の色を変更する場合は以下のコード

ここのcolor: #fd7a9c;

カラーコード#fd7a9cを変更してください。

目次の数字の色を変更する方法

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

ここに表記されているbackground:#fd7a9c;の

カラーコード#fd7a9cを変更してください。

また、border-radius:50%;のコードを

border-radius:5px;などに変更することで

数字の背景を丸ではなく、角丸の四角に変更することもできます。

↓border-radius:5px;とするとこうなります。

そして、h2側ではなく、h3側の数字の色を変更したい場合は

以下のカラーコード

このコードにあるcolor:#cfcfcf;の

カラーコード#cfcfcfを変更してください。

目次の文字色を変更する方法

目次の文字色は全て共通となりますが、文字色を変更したい場合は

上記コードcolor:#777;のカラーコード#777で

目次の文字色を変更してください。

OPEN/CLOSEの文字を変更する方法

目次の文字は変更できませんが

その右にある［▼ OPEN］の文字は変更できます。

変更に仕方は簡単。以下のCSSコードの中にある

content: "［ ▼ OPEN ］";の文字

［ ▼ OPEN ］ここを書き換えるだけです。

CLOSEも同様に

上記コードの［ ▲ CLOSE ］を書き換えれば

あなたの好きなワードに変更すことが可能です。

また下記コードの

color:#58a9ef;のカラーコード#58a9efを変更すれば

文字の色を変える事ができます。

縦棒の色を変更する方法

こちらの目次にある数字との仕切り（縦棒）の色を

変更する場合は、以下のコード

この中にあるborder-right:solid 1.5px #58a9ef;の

カラーコード#58a9efを変更すれば、縦棒の色を変更することができます。

また、同じ箇所にある1.5px<の数字を変更すれば

縦棒の太さを変えることもできます。

文字のホバー色を変える方法

文字のホバー色とは、文字の上にマウスを乗せた時に

そこにマウスを乗せたことが分かるように

文字の色が変わる設定のことです。

現状のCSSコードでは、マウスを乗せた時の文字色は

薄いグレーになるように設定してあります。

なので、この色もCSSのカラーコードを変更することで

マウスホバーさせた時の文字色を変えることができます。

ホバー色を変更するためのコードは以下のコード

ここのカラーコード#cfcfcfを変更することで

文字のホバー色が変更できます。

Googleフォントを変える方法

それでは最後にGoogle Fontの設定方法について解説致します。

とは言え、Google Fontを採用しているのはこちらの

目次デザインのみになりますので、

もう一方のデザインを採用した方は無視してください。

Google Fontの変更方法は簡単です。

まずは、Google Fontのサイトにアクセスします。

Google Font

Google Fontにサクセスしたら

全てのGoogle Fontが表示されているので

好きなフォントを選んでください。

フォントが多すぎて選べない場合は

カテゴリーを減らすなどして調整してください。

好きなフォントを選んだら続いて、そのフォントの右上にある

「＋」マークをクリックします。

そうすると画面下に黒い帯でPOPアップウィンドウが表示されますので

右端の「ー」マークをクリックしましょう。

「ー」マークをクリックすると、

下から以下のようなウィンドウが開きますので

続いて画面中心にある「@IMPORT」の文字をクリックします。

Google Fontを使う場合は、以下2つのコードを設定しなければ

サイトに表示させることができません。

ということで、まずは1つ目。

テーマ編集画面で使うコードをコピーしましよう。

ただし、コピーの際はこれら2つ<style></style>のコードは不要なので

間のコードだけをコピーしてください。

↓こんな感じに。

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

コードがコピーできたら、そのままワードプレスに戻り

ダッシュボードメニューから、外観→テーマエディターをクリックし

さらに、style-user.cssをクリックします。

style-user.cssをクリックしたら、先ほどコピーした

Google Fontのコードを以下のように貼り付けます。

コードの貼り付けが完了したら「ファイルを更新」をクリックして

設定を保存してください。

次に再びGoogle Fontのサイトに戻り

今度は追加CSSに記述するためのコードをコピーします。

上記コードがコピーできたら

先ほど「追加CSS」にコピーした以下のコード

ここのfont-family: 'Dosis', sans-serif;コードを

先ほどコピーしたコードで上書きして差し替えます。

私の例であげると…

以上、設定が上手くいけば

あなたが選んだGoogle Fontの数字が反映されますので

ぜひ焦らずじっくり試してみてください。

目次のカスタマイズ方法は以上です。

THE THORの目次をおしゃれにカスタマイズする方法まとめ

今回はTHE THORの非常にシンプルな目次を

目立たせるための方法として

ついでに少しでもオシャレになればと

カスタマイズの方法をご紹介しました。

あなたがどれほど目次を重視されるかは分かりませんが

読者の立場から見た場合はやはり

日々忙しい毎日の中で参考記事を探そうという時は

まず目次を確認してから本文を見る方もいると思います。

特に目次はブログタイトルからすぐ下

記事の導入文を書いた後に表示している人が多いので

いかに記事タイトルと目次の内容でブログが読まれるかが

変わってくると私は考えています。

なので、今回はそんな目次をしっかり見てもらえるように

デザインをカスタマイズコードと共に

あなたのオリジナル目次が作れるコードの変更方法も記載しました。

記事の中身はもちろん大事ですが

デザインにこだわるのも読者の気を引く１つのきっかけとしては

視覚的にわかりやすい分、非常に有効な手段です。

なので、ぜひあなたもシンプルな目次から

華麗な目立つデザインにカスタマイズして

読者の興味を視覚的にも惹きながら

ぜひいろんな方にあなたの記事を読んでもらってくださいね。

尚、目次のカスタマイズに関しては

個別での対応は致しかねますので

さらにカスタマイズしたいという方は

あなたご自身でも色々と勉強してみてください。

今回は特にコピペだけで目次のカスタマイズができる方法を

お伝えしましたが、例えCSSの知識がないあなたでも

コピペしてでもカスタマイズできることが分かることで

ブログのカスタマイズやCSSコードに

興味を持ってもらえると私はすごく嬉しいです＾＾

最後までお読みいただきありがとうございました！