WordPressで自作テーマ作り(第8回:アイコンフォントで装飾)

スポンサーリンク


WordPress(ワードプレス)の仕組みがわからないという方向けに、テーマ作りの基礎を通じて構造を説明する長期連載を少しずつ書いています。今回はアイコンフォントの利用方法について簡単に書いていきたいと思います。手軽におしゃれでわかりやすい見た目を演出できるのでおすすめです。

使うアイコンフォントは定番中の定番、FontAwesomeです。

fontawesome

FontAwesome

アイコンフォント使えるようになるために、ダウンロードボタンを押して全てのフォントをサイト内に組み込むこともできますが、今回紹介するのはFontawesomeにリンクを貼って読み込むという方法です。

まず、headタグの内側に以下のコードを書き込みましょう。

スポンサーリンク

</pre>
これを打ち込んでも、残念ながら見た目には何の変化もありません。アイコンフォントを表示させるには、アイコンを表示させたい場所にコードを打ち込む必要があります。コードは<i>タグを挿入します。

試しに、投稿日であることを理解しやすくするため、時計のアイコンを入れます。投稿日を表示させているコードの直前に以下のコードを入力しましょう。
<pre>

<i class="&quot;fa"></i></pre>
これで、時計のアイコンが投稿日の前に表示されました。アイコンを入れる際は<i>タグは変わらず「fa fa-clock-o」の部分を変えることで表示が変化していきます。

<img class="wp-image-1822" src="https://banabo.net/wordpress/wp-content/uploads/2016/08/cb87421d332e5e0f7ab4b14d39cab815.png" alt="時計アイコン" width="350" height="193" /> 投稿日の前に時計アイコンが表示された

今度は、カテゴリーの前にフォルダのアイコンを表示させてみます。フォルダの場合、コードは「fa fa-folder-open」に置き換えましょう。

<img class="wp-image-1821" src="https://banabo.net/wordpress/wp-content/uploads/2016/08/d4e0c998726f03daf0a5f10a40dd315e.png" alt="フォルダーアイコンを表示させた" width="370" height="182" /> フォルダーアイコンを表示させた

これで投稿日とカテゴリーであることをアピールできますね。
<div class="point">
<h4>なぜ<i>タグを利用するのか?</h4>
<i>タグは本来、回想文や地の文とは雰囲気が違う表現の文章を装飾する際に差別化させるタグです。それにもかかわらず、関係がなさそうな<i>タグがなぜ使われているのかといえば<strong>「空要素」</strong>を作るためなのです。空の状態で記述しておき、スクリプトやCSSを後から挿入することが許されているため<i>タグが利用されているのです。

</div>
最後に、アイコンの色だけ薄くして差別化を図りましょう。スタイルシートで灰色に指定します。
<pre>

.postinfo i {color : #888888}

文字が灰色になる

文字が灰色になる

これで一段と投稿記事っぽくなりましたね。フォントアイコンは多用するとガチャガチャしてしまいますから、ちょっとしたアクセント的な使い方で添えるとおしゃれに仕上がります。

FontAwesomeでいろいろなアイコンを利用してみたいという方もいるでしょう。アイコンの一覧は公式サイトでも確認できます。

アイコンの選択画面

アイコンの選択画面

FontAwesomeを使うには、<i>タグにクラス名「fa」を追加して、半角のアキの後に追加したいアイコンの名前を追加して

以上で第8回のWordpress講座を終わりにします。次回は、前後に投稿された記事のリンクを表示させましょう。

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。