【Simplicity】FontAwesomeを使って記事を装飾する方法

FontAwesomeとは、ウェブアイコンフォントを提供しているサービスです。

↑の「」もFontAwesomeです。

Worspressテーマ「Simplicity」では、何もしなくてもFontAwesomeを使えるようになっています。

今回は、FontAwesomeを使って記事を装飾する方法と、Simplicityで使われているFontAwesomeのアイコンを変更する方法について説明します。

スポンサーリンク

FontAwesome(アイコンフォント)とは

FontAwesome(ウェブアイコンフォント)とは、「ヒラギノ明朝」や「游ゴシック」、「メイリオ」のように、フォントとして使うことのできるアイコンです。

画像ではなくフォントなので、フォントサイズを大きくすれば、きれいに大きく表示されるし、フォントカラーを設定すれば色を付けることも出来ます。

SimplicityでFontAwesomeを使うには

FontAwesomeを自分のブログに導入する方法はいくつもあるのですが、Simplicityでは、自分で導入しなくても、最初から使えるようになっています。

Simplicityのテーマ内でも使われています。
例えば、記事の「投稿日」、「カテゴリ」を示すアイコン。

これもFontAwesomeです。

このように、FontAwesomeはテーマ内のアイコンとしてよく利用されているのですが、実は、記事の中でも使うことができます。

FontAwesomeを使って記事を装飾する方法

Font Awesome Iconsにアクセスします。

このページで、アイコンの一覧を見ることが出来ます。

「Search icons」で検索もできます。

検索すると、結果が表示されます。

今回は、この中から「thumb-tack(pin)」を選択します。

「thumb-tack(pin)」のページが表示されます。
このページに書いてあるHTMLコードを記事内に貼り付けると、アイコンを表示することができます。

このコードは、通常はテキストエディタに記入しなければいけませんが、Simplicityでは、ビジュアルエディタに「Insert HTML」ボタンが用意されているので、簡単に挿入することが出来ます。

ピン「

↑コードを挿入すると、このように表示されます。
通常の文字と同じように、色やサイズを変えることもできます。

ピン(赤字)「
ピン(24px)「

Simplicityで使われているFontAwesomeのアイコンを変更する方法

続いて、テーマ内で使われているアイコンを変更する方法です。
記事の「投稿日」、「カテゴリ」を示すアイコンなどです。

他にも、ビジュアルエディタで利用できる「補足情報(i),(?),(!)」や、「SNSシェアボタン」、「トップへ戻るボタンのアイコン」、(モバイルの)「メニューボタンのアイコン」などにもFontAwesomeが使われています。

▼「メニューボタンのアイコン」

▼「トップへ戻るボタンのアイコン」

▼「SNSシェアボタン」

▼「補足情報(!)」

「トップへ戻るボタンのアイコン」、「メニューボタンのアイコン」については、テーマカスタマイザーから変更できるようになっています。

「トップへ戻るボタンのアイコン」、「メニューボタンのアイコン」を変更する

WordPress管理画面左画の「外観」→「カスタマイズ」からテーマカスマイザーを開き、左側のメニューにある、「レイアウト(全体・リスト)」を選択します。

下の方にある、「メニューボタンのアイコン(デフォルト:fa-bars)」という部分で、「メニューボタンのアイコン」を変更することができます。

変更するには、「fa-bars」と書いてある入力欄に、任意のFontAwesomeのアイコンのクラス名を記入します。

同様に、「トップへ戻るボタンのアイコン(デフォルト:fa-angle-double-up)」という部分で、「トップへ戻るボタンのアイコン」を変更することができます。

詳しい説明は、Simpliciyの公式サイトを参照して下さい。

それ以外の、テーマ内アイコンを変更する

記事の「投稿日」、「カテゴリ」や、「補足情報(i),(?),(!)」、「SNSシェアボタン」など、テーマカスタマイザーからは変更することの出来ないアイコンの変更方法です。

これらは、僕もデフォルトのアイコンが最適だと思うので、あまり変更する人はいないかもしれませんが、人と違うアイコンにして変化をつけたり、このカスタマイズ方法を別のことに応用することもできるので、一応説明しておきます。

テーマ内で使われているアイコンは、テーマファイル(PHPファイル)内で、FontAwesomeのアイコンのクラスが指定されています。

なので、テーマファイル(PHPファイル)の該当の箇所を、別のFontAwesomeのアイコンのクラスに書き換えることで、変更することが出来ます。

また、テーマファイル(PHPファイル)を編集したくない場合は、CSSを編集して、直接Unicodeを指定する方法もあります。

例えば、記事の「投稿日」は「fa fa-clock-o fa-fw」というクラス名が指定されているので、()が表示されています。

FontAwesomeのCSSで、「fa fa-clock-o fa-fw」の「before要素」に、()のUnicodeが指定されています(Unicodeの調べ方は、次の項目で説明します)。

」のUnicodeは「f017」です。
これを、子テーマのCSSで上書きすることにより、別のアイコンを表示させることが出来ます。
「f133」と書くと、「」が表示されます。

.fa-clock-o:before {
 content: "\f133";
}

ただし、クラス名を変更せず、CSSを編集して表示させるアイコンを変更すると、クラス名が「fa fa-clock-o()」なのに、表示アイコンが「fa fa-calendar-o()」になるという、若干スッキリしない感じになります。

FontAwesomeのアイコンのUnicodeを調べる方法

Font Awesome Iconsにアクセスします。

先ほどの、ピンのページで説明します。

「fa-thumb-tack」と、アイコンの名前が書かれているところの隣に、小さく「Unicode: f08d」と書いてあります。

これが、このアイコンのUnicodeです。

「補足情報(i),(?),(!)」のアイコンを変更する

「補足情報(i),(?),(!)」は、FontAwesomeのクラスではなく、Simplicityオリジナルのクラス名を使っています。

補足情報(i):class=”information”
補足情報(?):class=”question”
補足情報(!):class=”alert”

これらは、各クラスの「before要素」に、「(f05a)」、「(f059)」、「(f06a)」というUnicodeが指定されています。

なので、子テーマのCSSでこの部分を変更すると、別のアイコンを表示させることが出来ます。
僕は色を変更して使っています。

変更例

.question::before {
 content: '\f29c';
}

.alert::before {
 content: '\f071';
}

さいごに

FontAwesomeは可愛くて使いやすいので、このブログでも、記事内でよく使っています。

僕は、Simplicityの「補足情報」ボックスが使いやすくて気に入っているので、これらを参考にしてオリジナルのボックスを作って使っています。

外部リンク用

など。これらのボックスの作り方は、また別の機会に説明します。
→ボックスデザインについてはこちらの記事(コピペでできるボックスデザインサンプル10とビジュアルエディタへのボタン追加方法(CSS))で紹介しています。

Comments

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