【STORK(ストーク)】見出しにおしゃれなアイコンを表示させるカスタマイズ

どうも、あらやんです。

以前STORK(ストーク)の見出しのカスタマイズに関する記事を投稿しました。

→【STORK(ストーク)】見出しのカスタマイズをしよう！シンプルなデザイン3選と設定方法

→【STORK(ストーク)】周りと差をつけろ！見出しをグラデーションにするカスタマイズ

見出しのカスタマイズは思ったよりも皆さん関心があるみたい！ということで今回は見出しカスタマイズをもう一つ紹介します。それは見出しにアイコンを表示させるカスタマイズです。

例えば、こちら

こんな感じで見出しにアイコンを表示させることが出来ます。このやり方を説明していきますね！

注意事項

STORK(ストーク)の場合ヘッダーに「英語表示テキスト」を使ってテキストを表示させることが出来ますが、この機能を使っている場合は今回紹介する方法は相性が悪いので注意が必要です。見出しにはh2を使われている方が多いと思いますが、今回の方法でh2見出しの前にアイコンを表示させると「英語表示テキスト」で表示させたテキストの前にもアイコンが表示されてしまうからです。

1 Step1：まずは下準備をしましょう！
2 Step2：使うアイコンを決めよう！
3 Step3：CSSを編集しよう！
4 まとめ
5 カスタマイズの後は…

Step1：まずは下準備をしましょう！

今回行う見出しのカスタマイズはまず最初にしておかないといけない下準備があります。それをこれから説明していきますね！

今回のカスタマイズでは「Webアイコンフォント」というものを使います。細かいことは知らなくても大丈夫なので「Webアイコンフォントを使うとたくさんのアイコンを使えるようになるんだな～」程度の理解でOKです。知りたい人はググってみて下さい！

このWebアイコンフォントを使うためにちょっとした下準備が必要と言う訳なんです。

やるべき作業はとっても簡単！以下のコードをテーマヘッダー(header.php)というファイルの<head>から</head>の間に貼り付けるだけです。

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">

テーマヘッダーはWordPressのダッシュボード画面左にある「外観」→「テーマの編集」でテーマの編集画面を開き、右側にあるテーマファイルの項目内にある「テーマヘッダー(header.php)」をクリックすれば開くことが出来ます。

これでWebアイコンフォントを使う準備ができました。

Step2：使うアイコンを決めよう！

Step1の下準備が終わったら、次は見出しに表示させるアイコンを決めていきます。使うアイコンは「Font Awesome」というサイトを見て選びます。まずは「Font Awesome」へアクセスしましょう。

Font Awesomeにアクセスする

アクセスするとこんな画面が開きます。

たくさんのアイコンが表示されていますよね！ここに表示されているアイコンを使うことができるのですが一つ注意点があります。それはFont Awesomeは無料で使えるアイコンと有料のアイコンがあるということです。

画面の左に赤で囲った「Free」という部分がありますよね？まずはここをクリックしましょう。文字通り無料で使えるアイコンのみが表示されます。無料で使えるものだけでも(この記事をかいている時点では)1,295個もあるので困ることはほぼないんじゃないでしょうか？

今回はboltというカミナリマークを使ってみます。

ちょっと見辛いかもしれませんが、下の方に赤で囲った部分がありますね。ここに表示されている4ケタの英数字を後ほど使うことになるのでウィンドウは閉じずにおいてください。

Step3：CSSを編集しよう！

それでは次にCSSを編集していきます。といってもコピペするだけなんで簡単ですよ！さっそく以下のCSSをコピペで追加して下さい。

h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e7";
  padding-right : 5px;
  color: #ffffff;
}

ちなみにCSSの追加はダッシュボード画面左の「外観」→「カスタマイズ」→「追加CSS」から行うことが出来ます。

さて、ここで上で示したCSSをちょっと詳しく見て見ましょう。

content

上記のコードを見てもらうと、「content: “\f0e7”;」という部分があるのが分かると思いますが、ここで表示するアイコンを指定しています。先ほど「赤で囲った部分の4ケタの英数字を後で使うことになる」と書いたのはここのことです。今回使ったboltは「f0e7」だったので今回のコードではf0e7と記述していますが、ここの英数字を好みのアイコンのものに変えることでそれを表示させることが出来ます。