スポンサーリンク

【ブログ】Webアイコンフォント「Font Awesome」を使って見出しを作ってみた【WordPress】

スポンサーリンク
ブログ/WordPress
スポンサーリンク

見出し3を使う機会が来たので

作業自体を行なったのはかなり前ですが
記事を書く際に、見出し3を使うことになり

前回もお世話になった
サルワカから候補を探していると、
これを気に入りました ⬇️
アイコンフォントとな

早速、リンクの記事を読みつつ
CSSをカスタマイズして
Font Awesomeを導入してみました。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

header.phpの編集

まずはURL取得

最初にやるのが
Font AwesomeのCDN利用の為の
URL取得ですが、
サルワカの記事のは
バージョンが若干古いので
Font Awesomeのサイトから
最新のものを取得します。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

header.phpへの貼り付け

取得したURLをheader.phpに
貼り付けるのですが、
WordPressのテーマがCocoonの場合、
header.phpは親テーマの管轄の為、
子テーマの「head-insert.php」
に貼り付けます ⬇️
head-insert.php

最後にスタイルシート編集

見出し2を作成した時同様
スタイルシートを記述します。

基本はコピペで、色の部分だけ変えました。
Font Awesomeの記載はこんな感じ ⬇️
stylesheet

実際に使ってみる

意気揚々とビジュアルエディタで
h3タグを使用してみると…
icon
こうなりますが、慌てないでOK

プレビューで見ると…
preview
無事反映されていました。

あとがき

今回は見出しでの使用例として
紹介したFont Awesomeですが、
CDN利用の設定さえしてしまえば
記事中のどこにでも
キャッチーなアイコンたちが使用可能です。

ただ、アイコンの種類が多すぎて
目当てのモノを探すのも一苦労
というのも現実(笑)

上手く、オシャレに使いこなせるように
なりたいものですね。

コメント

タイトルとURLをコピーしました