Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
スポンサーリンク
目次
FontAwesomeとは？
FontAwesome(フォントオーサム)とは、様々なデザインのアイコンをWebページ上で自由に使うことが出来る無料のツールキットです。
このツールキットを使えば、色やサイズを自由に変えてアイコンをブログ記事に追加することが可能になるので、ブログの見た目をいい感じにすることが可能です。
導入自体はとても簡単に出来るのでご紹介致します。
手順
前提
FontAwesomeはCDNで導入する方法とファイルを公式サイトからダウンロードしてWordpressに直接配置する方法があります。
今回は前者のCDNを使って導入してみましょう。
CDNとは？
CDNとはコンテンツ・デリバリー・ネットワーク（Contents Delivery Network）の略で、様々なコンテンツを高速かつ安定して配信するためのネットワークの事です。
FontAwesomeをCDNで利用する事でCSSファイルやFontファイルを高速でインターネット経由読み込む事が可能になります。
HTMLに一行追記するだけで使えるというメリットがありますが、インターネット経由で利用するのでネット環境が無い状態だと利用出来ないというデメリットがありますので、環境に合わせて導入方法を変えましょう。
header.phpにCDN読み込みの追加
まずは前述した通り、WordpressでFontAwesomeを使えるようにするためにCDNを読み込む設定を追記しましょう。
ダッシュボードから外観>テーマの編集>テーマヘッダー(header.php)を選択します。
header.phpファイル内の「」を探して、その一行上に以下を追記して下さい。
|
1 |
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> |
これでFontAwesomeをWordpressで使用する準備は出来ました。
スポンサーリンク
使い方
アイコン一覧
FontAwesomeで使えるアイコン一覧はコチラから確認出来るので、使いたいアイコンを見つけてみてください。
HTMLでの使い方
まずはHTMLタグを使って直接記事に追加する方法です。
使いたいアイコンを見つけたらアイコンをクリックします。
移動した先のページ下部から埋め込みタグをコピーします。
コピーしたタグをHTMLファイルに貼り付けてみましょう
正しく表示されましたね！！
CSSでの使い方
一つ一つアイコンを入れたい場合は上記の方法で可能ですが、ブログ全体で同じアイコンを入れたい場合、すべての記事にアイコンを埋め込むのは非常に手間がかかるので、作業効率が良くありません。
そこでCSSでFontAwesomeの指定を追加する事で、CSSが読み込まれている記事全体に同じ設定をかける事が可能です。
今回は見出しタグ(h2~h6)に対してを追加するようなCSS記述をしてみましょう。
ダッシュボードから外観>テーマの編集>スタイルシート(style.css)を選択します。
次にCSSファイルの一番下に以下を追記してください。
|
1 2 3 4 5 |
h2:before,h3:before,h4:before,h5:before,h6:before{ content: "\f0c1\00a0"; font-family: 'FontAwesome'; color: #b22222; } |
そうすると、以下のように見出しタグの先頭にアイコンが追加されるようになります。
終わりに
いかがだったでしょうか？
簡単にアイコン画像をブログ記事に追加出来るようになりましたね。
文字だけのブログは読みづらいので、要所要所にアイコンをちりばめておしゃれで読みやすいブログを作っていきましょう♪
Travenist
Otakenist
