WPテーマ「STORK」カスタマイズ！目次をGoogleフォントでオシャレにしよう!

ここあです。

WordPressテーマSTORK（ストーク）の目次を

SANGO風にカスタマイズしたのをきっかけに

サイトの雰囲気までSANGO風にしてみました＾＾

テーマはSTORKなんですが

イメージをSANGO風にしたおかげで

何となくテーマを買い替えた気分になり

ちょっとモチベーションが上がるという

不思議な効果に驚いてます（笑）　お得な性格…＾＾

ということで、しばらくこのままにしておきます。

目次をSANGO風にする方法はこちらの記事をご覧ください。

WPテーマ「STORK」カスタマイズ！目次をSANGO風にしてみよう!

さて、今回は…

• 「いやいや別にSANGO風じゃなくていいし…」
• 「もう少し違う方法ないの？」

というあなたの声にお応えすべく

Googleフォントを使った

目次のカスタマイズ方法をご紹介したいと思います＾＾

今回は、Googleフォントの導入がいるので

一手間要りますが、ほとんどコピペだけでいけるので

チャレンジャーはぜひ参考にしてくださいね。

結構簡単です＾＾

目次をGoogleフォントでオシャレにする手順

この目次の設定には、

基本的にWordPressのプラグインである

Table of Contents Plusの導入が必須です。

まだ、プラグインを導入していないという方は

Table of Contents Plusを導入してから進めてください。

導入手順は以下のページに書いています。

WPテーマ「STORK」カスタマイズ！目次をSANGO風にしてみよう!

それでは順番に説明します。

目次の仕上がりイメージ

先に一応どんな目次に仕上がるのか画像で紹介…。

↓ 仕上がりはこんな感じ。

個人的には、こっちの方が好きです。

SANGO風は可愛いすぎる…＾＾；

「おぉ〜、イケてるやん！」と思った方は

がんばりましょう（笑）

目次をカスタマイズするCSS

ここからが作業手順です。

まずは目次をカスタマイズするためのCSSコードを

以下の場所にコピペしましょう。

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

追加CSSの部分がCSSコードの設置先になります。

それでは、以下の超長いコードをコピペしてください。

CSSコード

@media only screen and (min-width: 767px){#toc_container {
color:#008db7;
padding: 25px 40px;
}
#toc_container .toc_title:before{
content: "\f0f6";
font-family: FontAwesome;
display: inline-block;
margin-right:4px;
width: 1.2em;
color:#008db7;
font-size:22px;
}#toc_container .toc_title {
font-family: 'Nova Mono', monospace;
font-family: 'Source Code Pro', monospace;
font-family: 'Abel', sans-serif;
text-align: center;
border-bottom: 1px solid #dedede;
font-size:24px !important;
}#toc_container .toc_list {
list-style-type: none;
counter-reset: li;
}.toc_toggle a{
color:#008db7;
font-size:80%;
}#toc_container .toc_list > li:after {
counter-increment: li;
content: "0" counter(li) " |";
position: absolute;
font-family: 'Nova Mono', monospace;
font-family: 'Source Code Pro', monospace;
font-family: 'Abel', sans-serif;
letter-spacing: -1px;
color: #008db7;
padding-left:7%;
font-weight:bold;
left: -48px;
top: 0px;
font-size: 18px;
}

#toc_container li a{
border-top-width:0px;
line-height:12px;
padding-left:5%;
color: #008db7;
}

.toc_list ul li a {
font-size:90%;
line-height:16px !important;
color:#888888 !important;
text-decoration:none;
}

#toc_container li a:hover{
color:#f05689;
}

.toc_number{
display:none;
}

#toc_container {
background: #fffef6 !important;
border: 5px solid #e1eff4;
}

#toc_container .toc_list > li {
margin-bottom: 5px;
margin-left: 12px;
font-size: 1em;
}
}

@media only screen and (max-width: 766px) {

#toc_container{
border: solid 5px #e1eff4;
background: #fffef6 !important;
}

#toc_container .toc_title:before{
content: "\f0f6";
font-family: FontAwesome;
display: inline-block;
margin-right:5px;
width: 1.2em;
color:#008db7;
}

p.toc_title {
text-align: center;
font-size:17px;
font-family: 'Nova Mono', monospace;
font-family: 'Source Code Pro', monospace;
font-family: 'Abel', sans-serif;
color:#008db7;
}

ul.toc_list li a {
font-size:16px;
line-height: 2em;
text-decoration:none;
color:#008db7;
}

ul.toc_list li a:hover{
color:#0a69dd;
}

.toc_list ul li a {
font-size:90%;
text-decoration:none;
color:#888888 !important;
}
}

コピペした時点で

目次のデザインが変わると思います。

Googleフォントの導入方法

今回の目次でどこをGoogleフォントにしているかというと…

タイトルの文字と数字の部分です。

ただし、タイトルを日本語表示させる場合は適用されません。

あくまでも使用するのは欧文のGoogleフォントです。

Googleフォントの選び方

それでは…

あなたのお気に入りGoogleフォントを探す旅に出掛けましょう！

Google fonts

Google fontsのサイトにジャンプすると…

このような画面が表示されます。

この状態だと

Googleフォントが全て表示されているので

フォントを絞り込むのがかなり大変＾＾；

なので、少し表示フォントを絞りましょう。

表示フォントの絞り方は…

画面右にある5つのチェック項目を切り替えることで

表示フォントが変わります。

フォントカテゴリーは私も上手く説明できませんが

だいたいの雰囲気で言うと…

• Serif：明朝系のフォント
• Sans Serif：ゴシック系のフォント
• Display：個性的なフォント？（笑）
• Handwriting：手書き系のフォント
• Monospace：等幅系のフォント（文字の幅が左右一定）

こんな感じだと思ってください＾＾；

まずは、あなたが

「これだ！」と思うフォントを選んでみましょう。

あまり奇抜なフォントは目次に適さないので

できるだけスタイリッシュなフォントを選んでくださいね＾＾；

Googleフォントのコードの貼り方

フォントは選べましたか？

好きなフォントを選んだら次に

そのフォントの右上にある

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

「+」マークをクリックすると…

画面下に黒いウインドウが表示されますので

「-」をクリックします。

そうすると、新たにウインドウが表示されますので

1. @IMPORTをクリック
2. 表示されたコードをコピー

しましょう。

コピーしたコードは以下の部分に貼り付けます。

ダッシュボードメニューから

外観 → テーマの編集 → スタイルシートの中。

貼り付ける目安は以下の画像の位置。

＠charset”utf-8″の下あたりがいいです。

1つ目のコードが上記の場所に貼り付けられたら

再び、Google fontsのページに戻り

2つ目のコードをコピーします。

2つ目のコードは…

先ほどあなたが追加した目次のCSS

以下の3行と入れ替えましょう。

上記フォントの場合はコピーするフォントコードが3つあったので

念のため全部貼り付けただけで

フォントによってコードの数が違います。

コピーしたコードが1行の場合は3行とも消して

新たにコピーした1行だけを追加してください。

また、今回ご紹介しているCSSコードは

スマホ用のコードもあるので、

忘れずにコピーしてください。

CSSコードの下の方にもGoogleフォントのコードを

貼り付ける場所があります。

以上、2カ所（スタイルシートと追加CSS）に

あなたの使いたいGoogleフォントのコードを貼れば

書体は変わります。

目次のカスタマイズ方法

お気に入りのフォントが設定できたら

あとはあなたの好みに調整するだけです。

カスタマイズできる場所を

簡単に記載しておきますので

色などご自由に変えて調整してください。

目次のh2タグとh3タグを切り替える方法

最初にお見せしたサンプルの画像はh2タグのタイトルのみを

目次にした表示例です。

h3タグのタイトルも目次にいれたい場合は

Table of Contents Plusの上級者向け設定で切り替えが可能です。

私は目次をすっきり見せたいので

h3タグのチェックは外しています＾＾

以下よりデザインのカスタマイズ方法になります。

目次の外回りの枠線と背景色を変える方法

目次の外回りの枠線と、背景色を変える場合は

以下のコードで調整しましょう。

ピンク色の文字の部分で色や太さを変えられます。

目次のタイトルの色を変える方法

目次のタイトルの色を変える場合は

こちらのコードで調整してください。

color:#008db7;のカラーコードを変えれば

タイトルの色が変わります。

目次タイトルのアイコンを変える方法

タイトルのアイコンや色も変更できます。

変更コードは以下の場所です。

上記コードのcontent: "\f0f6"のユニコードを

「FontAwesome」のページよりコピペすれば変更できます。

「FontAwesome」 のページでアイコンをクリックしたら表示される

以下の部分がユニコードです。

上記コードではcolor:#008db7;でアイコンの色

font-size:22px;でアイコンのサイズも変更できます。

目次の表示・非表示の大きさや色を変える方法

目次のタイトルカラーに合わせて

表示・非表示の色も変更できます。

上記コードで変更が可能です。文字のサイズも変えられます。

ほんの些細な部分ですが、ここまでこだわりたいのがデザイナー魂（笑）

変更はお好みで…

目次の数字の色や位置を変える方法

h2見出しの頭にある

数字の色や位置を変更するコードはこちら。

上記コードのcolor: #008db7;で色、

left: -48px;で左右の位置を変えられます＾＾

目次のh2タイトルの色を変える方法

h2タグで設定された目次タイトルの色は

以下のコードで変更できます。

h2タイトルの目次の色はcolor: #008db7;で変更しましょう。

目次のh3タイトルの色を変える方法

もちろんh3タグで設定された目次タイトルの色も

変更できます。

こちらでどうぞ。color:#888888 で色替えが可能です。

目次タイトルにマウスオーバーした時の色を変える方法

目次タイトルにマウスオーバーした時の色も

変更したいですよね。

もちろんできます。

上記コードのcolor:#f05689;で色を変えましょう！

以上がだいたいの設定箇所です。

@media only screen and (max-width: 766px) {と書かれた

コード以下は、タブレットやスマホ用の

目次のCSSコードです。

こちらもほとんどこれまで説明したコードを見れば

色などは簡単に変えられると思いますので

説明は省かせていただきます＾＾；

まとめ：目次を変えれば印象が変わる！

私はあまり目次のデザインは重要視していませんでした。

しかし、記事を読み始めると

一番最初に目につくのが目次になります。

なので、意外といろんな方のブログを見て回ると

「この目次どうやって作ってるの？」と気になったりします。

私はたまたまデザインに目がいくからだけかもしれませんが

それでもやはり、何にしても

訪問者の関心を引き付けるのは非常に大事なことです。

特にこのSTORKというテーマは利用者も多く

他のユーザーとデザインで差別化をしたいと思っている方も

たくさんいると思います。

かくいう私もその一人…

だからこそ大胆にもSANGO風に…（笑）

なので、私は自分一人でコソコソせずに

「デザインの力でみなさんを幸せにしたい」と思い

包み隠さずカスタマイズ方法をご紹介しています。

それがデザイナーとしての使命だと思うから…

だからこそ、

再現性のない未検証のコードは一切公開していません。

ストークユーザーの方には出来る限り

コピペだけで再現性の高いCSSコード使って

誰でも簡単にカスタマイズして欲しいと思っています。

なので、一人でも多くのストークユーザーには

オシャレなテーマをよりオシャレに

使いこなしていただければ、私は何よりも嬉しいです。

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