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

どうも、あらやんです。

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

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

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

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

例えば、こちら

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

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

 

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は無料で使えるアイコンと有料のアイコンがあるということです。

画面の左に赤で囲った「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と記述していますが、ここの英数字を好みのアイコンのものに変えることでそれを表示させることが出来ます。

 

padding-right

「padding-right : 5px;」の部分はアイコンとその後に続くテキストの隙間の大きさを指定しています。

「5px」という部分の数字を変えることで隙間の大きさを変更できるので好みで調節しましょう。

 

color

colorは文字通りアイコンの色を指定する部分です。好みの色を16進数のカラーコードで指定しましょう。カラーコードの調べ方はこちらから。

 

まとめ

どうでしょうか、見出しのアイコンカスタマイズは無事にできましたか?こういった細かいところまでカスタマイズができるのもWordPress、そしてSTORKの強みですね!

CSSをいじるようなカスタマイズは初心者の方はちょっと敷居が高いように感じるかもしれませんが、私のブログでは出来るだけ簡単にコピペでもできるようなやり方で教えるのを心掛けているのでぜひ他のカスタマイズ記事も参考にしてくださいね。

 

カスタマイズの後は…

ブログを書いていると、どんどんと自分のブログに愛着が出てきますよね。そうするとカスタマイズしたい部分ってたくさん出てくると思います。ぜひSTORKカスタマイズ記事を活用して下さいね。

ブログのカスタマイズはもちろん大事なことですが、ブログを運営する上で一番大事なことは読者さんに読んでもらえること(アクセスがアップすること)です。たくさんカスタマイズして思い通りのブログが作れたのに全然読者さんが来ないんじゃ残念ですよね。

私の運営している無料のメールコミュニティではブログではお伝えしていないブログのアクセスアップノウハウやネットビジネスでお金を稼ぐためのノウハウ、自由を実現するためのマインドセットなどを無料でお伝えしています。

STORKブログをカスタマイズしてたくさんの読者さんに読んでもらいたい方はぜひ無料のメールコミュニティに参加して下さいね!


無料会員制のメールコミュニティへご招待しています

無料で参加できるメールコミュニティ、その名も「ニコニコスマイルコミュニティ」にご招待しています。

このコミュニティではブログでお伝えしきれなかった内容やコミュニティ参加者限定のコンテンツをプレゼントしています。ネットビジネスでお金を稼ぐ力を身に付け、自由なライフスタイルを実現して大切な人とニコニコ笑顔で暮らしていけるような人生を創造していきたいのなら、あなたも無料のコミュニティに参加して仲間になりませんか?