WordPressテーマ ブログ/アフィリエイト ブログの始め方

【超簡単】THE THORの目次をカスタマイズ「コピペでOK」

目次
悩んでる人
「THE THORの目次の表示方法を知りたいなあ!」「THE THORの目次のカスタマイズってどのようにするのかな?」「THE THORの目次をおしゃれにしたいなあ…!」

 

本記事では上記のようなお悩みについて解決できるよう詳しく伝授します。

THE THORでおしゃれな目次を表示させたい方は必見です。

 

自己紹介

Tsumu
・Tsumu 会社員×副業ブロガー
・大手→ベンチャー 入社半年で支店長→上場ITベンチャー
・「引きこもるかつ強みを生かす」
がモットー
・「引きこもりつつ自由な暮らしを手に入れる」をテーマに情報発信 

この記事を書いている僕は、ブログ歴2年で累計200記事以上執筆。会社員の傍ら副業ブロガーとして活動し、毎月ブログ収益6桁を継続しています。

 

【超簡単】THE THORの目次をカスタマイズ

THE THORはなんと便利なことにデフォルトで目次設定が付いています。

 

ですがデフォルトでついているのにもかかわらず、

「目次の表示ってどこで操作するんだろう?」

「目次をおしゃれにしたいんだけどどう設定すべきなんだろう?」

とTHE THOR初心者だと上記のような疑問が出てきます。

 

そこで今回はTHE THORの目次を超簡単に表示&カスタマイズする方法を伝授します。

 

THE THORの目次のカスタマイズ(表示)方法

まずはTHE THORの目次設定(表示)方法について解説していきます。

これはめちゃめちゃ簡単なので、おそらく誰でも設定できるはずです。

 

早速ですが、WordPressの管理画面からいきましょう。

WordPress管理画面の「外観 → カスタマイズ」をクリックしてください。

 

カスタマイズをクリックしたら、次に「投稿ページ設定」をクリックしてください。

 

投稿ページ設定をクリックしたら、「投稿ページ設定 → 目次設定」をクリックします。

 

目次設定をクリックしたら、目次の設定画面が出てきますので、以下の設定にしましょう。

・目次を表示するか選択 → 表示する

・目次を表示するための最初生み出し数を設定 → 2

・目次に表示する見出しのレベルを設定 → 5

 

上記の設定を行えば、下記のような目次の表示となります。

 

目次の非表示方法

また、目次の設定画面で、「目次パネルをデフォルトで閉じておく」にチェックを付けると目次が隠れます。

 

THE THORの目次のカスタマイズ方法「コピペでOK」

目次の表示方法がわかったところでここからは、THE THOR目次のカスタマイズ方法について解説していきます。

「THE THORの目次をおしゃれにしたいなあ…!」

ここでは上記のような悩みを解決します。

 

現在の当ブログの目次デザインは以下の通りです。

以下のカスタマイズ表示にするための方法をこれから伝授していきます。

 

WordPress管理画面の「外観 → テーマエディタ」をクリックしてください。

 

クリックしたら、スタイルシートが出てきますので、「style-user.css」を選択しましょう。

 

「style-user.css」を表示させたら以下のコードをそのままコピペし、「ファイルを更新」すれば完成です。

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

 

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

ここからはTHE THORの目次のデザインを調整する方法について伝授します。

 

「外枠」については以下のコードの赤文字部分を調整しましょう。

数字やカラーのHTMLコードを変えることで外枠のデザインを変更することができます。

※HTMLカラーコードについては HTMLカラーチャートのサイトがおすすめです。

.content .outline {
width: 100%;/*外枠の幅*/
border-top: solid 10px #0431B4;/*外枠の線*/
background: #FAFAFA;/*背景色その1*/
border-radius: 3px ;
box-shadow: 0 3px 4px
rgba(0, 0, 0, 0.2);/*外枠の影*/
}

 

数字の文字と背景色については以下のコードを調整しましょう。

.content .outline__number {
background: #FAFAFA;/*項目数字の背景色*/
color:#0431B4;/*項目数字の文字色*/
font-weight: bold;/*項目数字の文字の太さ*/
font-size: 100%;/*項目数字の文字サイズ*/
}

 

文字(タイトル)の文字色と背景色については以下のコードを調整しましょう。

.content .outline__link {
color:#2E2E2E;/*項目の文字色*/
}
背景色
.content
.outline__switch + .outline__list{
background:#FAFAFA;/*背景色その2*/
}

今回は以上となります。

-WordPressテーマ, ブログ/アフィリエイト, ブログの始め方
-, ,

© 2021 TsumuBlog