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

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

 

ここあです。

 

WordPressテーマSTORK(ストーク)の目次を

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

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

 

テーマはSTORKなんですが

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

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

 

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

不思議な効果に驚いてます(笑) お得な性格…^^

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

 

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

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

 

さて、今回は…

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

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

 

Googleフォントを使った

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

 

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

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

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

 

結構簡単です^^

 

〈ご注意〉今回の目次はh2、h3見出しのみ対応です。h4のCSSコードは設定しておりませんのでh4タグを多用される場合はご利用を控えてください。

 

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

この目次の設定には、

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

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

 

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

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

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

 

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

 

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

 

目次の仕上がりイメージ

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

 

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

目次カスタマイズサンプル

 

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

SANGO風は可愛いすぎる…^^;

 

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

がんばりましょう(笑)

 

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

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

 

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

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

 

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

ダッシュボードメニュー

 

 

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

dropshadow

 

 

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

/*目次カスタマイズ*/
@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;
}

/* 目次のh2フォント設定 */
#toc_container li a{
border-top-width:0px;
line-height:12px;
padding-left:5%;
color: #008db7;/*目次の文字の色*/
}

/* 目次のh3フォント設定 */
.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;
}

/* 目次のh2フォント設定 */
ul.toc_list li a {
font-size:16px;
line-height: 2em;
text-decoration:none;
color:#008db7;
}

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

/* 目次のh3フォント設定 */
.toc_list ul li a {
font-size:90%;
text-decoration:none;
color:#888888 !important;
}
}

コピペした時点で

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

 

Googleフォントの導入方法

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

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

 

 

目次カスタマイズサンプル

 

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

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

 

Googleフォントの選び方

それでは…

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

Google fonts

 

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

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

googlefonts

 

 

この状態だと

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

フォントを絞り込むのがかなり大変^^;

 

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

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

 

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

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

Googleフォントの表示切り替え

 

 

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

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

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

こんな感じだと思ってください^^;

 

まずは、あなたが

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

 

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

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

 

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

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

 

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

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

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

Googleフォント使い方

 

 

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

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

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

Googleフォント使い方

 

 

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

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

しましょう。

 

 

Googleフォントの使い方

 

 

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

 

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

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

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

 

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

スタイルシート編集画面

 

 

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

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

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

googleフォント使い方

 

 

2つ目のコードは…

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

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

#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: 2px solid #dedede;
font-size:24px !important;
}

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

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

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

 

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

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

 

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

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

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

 

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

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

/* 目次のタイトル設定 */
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;
}

以上、2カ所(スタイルシートと追加CSS)

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

書体は変わります。

 

目次のカスタマイズ方法

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

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

 

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

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

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

 

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

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

目次にした表示例です。

 

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

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

 

 

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

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

 

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

 

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

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

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

 

#toc_container {
background: #fffef6 !important;/*目次の背景色*/
border: 5px solid #e1eff4;/*目次の外枠の色*/
}

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

 

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

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

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

 

#toc_container {
color:#008db7;/*タイトル文字の色*/
padding: 25px 40px;
}

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

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

 

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

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

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

 

/* 目次のアイコン */
#toc_container .toc_title:before{
content: "\f0f6";/*アイコンの種類*/
font-family: FontAwesome;
display: inline-block;
margin-right:4px;
width: 1.2em;
color:#008db7;/*アイコンの色*/
font-size:22px;/*アイコンの大きさ*/
}

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

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

 

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

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

FontAwesome

 

 

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

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

 

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

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

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

 

.toc_toggle a{
color:#008db7;/*目次の表示・非表示の色*/
font-size:80%;/*目次の表示・非表示の文字サイズ*/
}

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

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

変更はお好みで…

 

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

h2見出しの頭にある

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

 

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

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

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

 

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

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

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

 

/* 目次のh2フォント設定 */
#toc_container li a{
border-top-width:0px;
line-height:12px;
padding-left:5%;
color: #008db7;/*目次の文字の色*/
}

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

 

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

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

変更できます。

 

/* 目次のh3フォント設定 */
.toc_list ul li a {
font-size:90%;
line-height:16px !important;
color:#888888 !important;
text-decoration:none;
}

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

 

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

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

変更したいですよね。

 

もちろんできます。

#toc_container li a:hover{
color:#f05689;/*目次の文字の色マウスホバー*/
}

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

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

 

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

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

目次のCSSコードです。

 

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

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

説明は省かせていただきます^^;

 

まとめ:目次を変えれば印象が変わる!

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

 

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

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

 

 

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

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

 

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

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

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

 

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

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

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

 

かくいう私もその一人…

だからこそ大胆にもSANGO風に…(笑)

 

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

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

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

 

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

 

だからこそ、

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

 

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

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

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

 

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

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

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

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談ください!

「ここあ」に問い合わせをする

 

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

 

合わせて読みたい!

 

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

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。