WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた

      2014/08/06

WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、サイト全体の印象がグッと良くなりますよ!

font-awesome-catch

サイトのちょっとした装飾に使ったりする「アイコン」ですが、わざわざ画像を作成したり、素材を探してきたりするのは結構大変です。それにアイコン画像のサイズや色をあとで変えたいと思っても、画像自体を作りなおさないといけないので、それはそれで面倒な話になっちゃいます。

でもそんな面倒な話は、「Font Awesome」というWEBフォントを使えば一気に解決します。これを使えば、簡単にアイコンを挿入することができるうえ、WEBフォントなので、あとでサイズを大きくしたり色を変えたりといった作業も、CSSを触るだけで簡単にやれちゃうんです。

ということでわたしも「Font Awesome」を使って、STINGER3を使った当サイトの細かいところにアイコンを入れて装飾をしてみましたよ!では早速、「Font Awesome」の導入手順をご紹介しましょう。

スポンサーリンク

「Font Awesome」の導入でやったこと

  • 「Font Awesome」をダウンロード
  • 「css」と「fonts」フォルダをアップロード
  • cssファイルの読み込みタグを追記
  • 任意の場所にアイコンタグを挿入

以上が、今回のお品書きになります。今回も全く難しい作業はありませんのでご安心ください。では早速、順に見ていきましょう。

「Font Awesome」の導入手順

「Font Awesome」をダウンロード

先ずは、以下のサイトから「Font Awesome」のzipファイルをダウンロードします。

Font Awesome, the iconic font designed for Bootstrap

font-awesome-1

「css」と「fonts」フォルダをアップロード

ダウンロードしてきたzipファイルを解凍すると、「css」「fonts」「less」「scss」の4つのフォルダに展開されます。

font-awesome-2

この中で今回利用するのは「css」と「fonts」になりますので、この2つのディレクトリをFTPでサーバーの「stinger3」フォルダ内にアップしましょう。ちなみにわたしは今回、先ず「webfont」というフォルダをつくって、その中に今回の「css」と「fonts」のディレクトリをアップしました。

font-awesome-3

cssファイルの読み込みタグを追記

次に、header.phpに今回アップしたcssの読み込みタグを追記します。以下のタグをhead要素内に追記してください。

これで「Font Awesome」を使う準備は完了です。ね、簡単でしょ?

任意の場所にアイコンタグを挿入

あとは、アイコンを入れたいところに下記のタグを記載します。

(最初に「fa 」を入れるのを忘れずに!)

【例】

font-awesome-4
このように、「公開日」のテキスト左側にカレンダーのアイコンを装飾できます。

ちなみにこの[入れたいアイコンのclass名]ですが、名前と実際のアイコンの対応は、以下のページで確認してください。

Font Awesome Cheatsheet

たとえばわたしは、記事のページ(single.php)にこのようなアイコン装飾を入れてみましたよ!

font-awesome-5
font-awesome-6

さいごに

今回は非常に細かいカスタマイズTIPSですが、こういった細かいところまでに気をつかえばこそ、サイト全体の印象がグッと良くなります!

今回ご紹介した箇所以外にも、気軽にアイコンを設置することができるのと、アイコン自体の種類もいっぱいありますので、是非いろいろ試してみてください。

こちらの記事もいかがですか?

そのほか、STINGER3のカスタマイズについてまとめてみました。

わたしがSTINGERでカスタマイズしたことをまとめてみた

 - ブログカスタマイズ

スポンサーリンク

  関連記事

STINGER3の「関連記事」表示を横並びにカスタマイズしてみた

STINGER3の「関連記事」表示を横並びにカスタマイズする方法をご紹介します。必要以上に縦長になっ …

WordPressのテーマをSTINGER3に変更してみた

ブログを始めて少なくとも数ヶ月はほとんどアクセスなんてありませんよっ!なーんてことは重々承知のつもり …

WordPressでメディアを挿入のリンク先を最初からなしに設定する方法

WordPressで投稿の本文に画像メディアを挿入する時、リンク先をメディアファイルではなく、最初か …

気持ちいいエフェクトのスライドメニュー「Off-Canvas Menu Effects」を入れてみた

スライドメニューを表示するときのエフェクトが気持ちいい「Off-Canvas Menu Effect …

WordPressのコメント欄をデフォルトからFacebookに変更してみた【STINGER3】

当ブログですが、まだそれほどアクセスは無いはずなのにしばしばスパムコメントが入ってきます。不思議です …

STINGER3のフッターを3カラムにカスタマイズしてみた

個人のブロガーは、記事の執筆はもちろんのことながらブログのデザインにも多少は気を配って、自分でカスタ …

STINGER3のtitleタグ先頭に入る改行とスペースを消してみた

photo credit: Huasonic via photopin cc 実はさっき気がついてし …

CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法

最近よく見かける、プロフィールの画像やサムネイルの画像なんかを丸く切り抜いたデザイン。これは丸く切り …

わたしがSTINGERでカスタマイズしたことをまとめてみた
わたしがSTINGER3でカスタマイズしたことをまとめてみた

STINGER3をテーマにした当ブログで、わたしがこれまでに実装したカスタマイズの内容を、まとめてご …

CSSとWEBフォントだけで作ったSNSシェアボタンをSTINGER3に入れてみた

CSSとWEBフォントだけで作ったSNSシェアボタンを、STINGER3に導入する方法をご紹介します …