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

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

 

ここあです。

 

WordPressテーマ「THE THOR」には

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

 

「Table of Contents Plus」といった

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

 

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

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

という点から、

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

 

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

THE THOR目次

 

 

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

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

私も素直に思いました。

 

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

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

※ブログのカスタマイズはあくまでも自己責任でお願いします。また私の記事は結果を保証するものではなく、あくまでもカスタマイズのきっかけを掴んでもらうことを目的として書いていますので、あらかじめご了承ください。

 

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

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

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

 

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

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

ダッシュボードメニュー

 

 

投稿ページ設定[THE]をクリック

投稿ページ設定

 

 

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

目次設定

 

 

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

目次設定

 

 

そして、まずは

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

 

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

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

 

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

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

目次は表示されませんので^^;

 

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

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

 

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

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

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

 

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

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

ダッシュボードメニュー

 

 

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

追加CSS

 

 

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

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

特に問題はありませんが

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

THE THOR目次

 

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

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

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

 

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

THE THOR目次

 

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

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

 

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

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

 

ということで、まずはそれぞれの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;/*h3数字文字色*/
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コードはこちら

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

※ただし、後者の方はstyle-user.cssにGoogle Fontのコードをコピーしていないので、目次の番号が正常に表示されません。あらかじめご了承ください。Google Fontの設定方法はこの記事の最後に解説してあります。

 

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

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

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

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

 

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

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

 

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

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

 

/*目次*/
.content .outline {
border: 2px solid #58a9ef;/*外枠色*/
padding: 10px 0 15px;
background:#fffef6;/*背景色*/
}

border: 2px solid #58a9ef;/*外枠色*/のカラーコード

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

 

さらに、border: 2px solid #58a9ef;/*外枠色*/

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

 

また、border: 2px solid #58a9ef;/*外枠色*/

soliddasheddottedに変更することで

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

 

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

background:#fffef6;/*背景色*/のカラーコード

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

 

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

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

 

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

.outline__title {
color: #fd7a9c;/*目次アイコン色*/
font-weight: 700;
width:100%;
padding: 0px 0px 0px 20px;
}

 

ここのcolor: #fd7a9c;/*目次アイコン色*/

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

 

 

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

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

 

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

.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%;
}

 

ここに表記されているbackground:#fd7a9c;/*数字背景*/

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

 

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

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

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

 

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

 

 

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

 

以下のカラーコード

.content li ul li .outline__number{
font-weight:bold;
background:transparent;
color:#cfcfcf;/*h3数字文字色*/
width:auto;
}

 

このコードにあるcolor:#cfcfcf;/*h3数字文字色*/

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

 

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

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

 

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

.content .outline__link {
display: block;
color:#777;/*文字色*/
}

 

上記コードcolor:#777;/*文字色*/のカラーコード#777

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

 

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

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

 

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

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

 

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

.content .outline__switch::before {
content: "[ ▼ OPEN ]"; /*「開く」を上書き*/
border: 0;
color:#58a9ef; /*「開く」「閉じる」の文字色*/
}

content: "[ ▼ OPEN ]";の文字

[ ▼ OPEN ]ここを書き換えるだけです。

 

CLOSEも同様に

.content .outline__toggle:checked + .outline__switch::before {
content: "[ ▲ CLOSE ]"; /*「閉じる」を上書き*/
color:#58a9ef;
}

上記コードの[ ▲ CLOSE ]を書き換えれば

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

 

また下記コードの

.content .outline__switch::before {
content: "[ ▼ OPEN ]"; /*「開く」を上書き*/
border: 0;
color:#58a9ef;
}

 

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

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

 

縦棒の色を変更する方法

縦棒の色を変更する方法

 

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

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

.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;
}

 

この中にあるborder-right:solid 1.5px #58a9ef;/*縦棒色*/

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

 

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

 

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

.content .outline__link:hover {
color: #cfcfcf; /*ホバー色*/
}

 

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

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

 

Googleフォントを変える方法

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

 

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

THE THOR目次

 

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

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

 

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

 

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

Google Font

 

Google Fontにサクセスしたら

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

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

 

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

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

Google Font

 

 

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

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

 

 

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

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

Google Font

 

 

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

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

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

Google Font

 

 

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

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

Google Font

 

 

ということで、まずは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」にコピーした以下のコード

.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;
}

 

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

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

 

私の例であげると…

.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: 'Oswald', sans-serif;←コピーして上書き
}

 

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

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

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

 

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

 

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

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

 

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

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

 

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

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

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

 

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

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

 

ということで、最後までお読みいただき

ありがとうございました!

 

 

合わせて読みたい!

 

ネットで毎月30万円以上の自動収益を得ながら
「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年に独立。現在はネットとデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?