実は私のブログは「Font Awesome」を使って
賢威7をカスタマイズしています!

例えばですが…この日付の部分!このカレンダーのマーク
更新日のマークはFont Awesomeを使っているんです。

そんなFont Awesomeを賢威7で使う方法を簡単にですがご紹介します!
その前にFont Awesomeって何?というトコロから解説しましょう。

Font Awesomeとは?

Font Awesomeはチェックマークや星マークなどのアイコンを
画像ではなく、テキストとし表示できる便利なアイコンフォントのことです。

先ほども少し紹介しましたが、私のブログの日付の部分のアイコン…。
これは画像ではなくFont Awesomeのアイコンフォントなのです。

ぱっと見は画像のように見えますがこれは立派な”文字(テキスト)”なのです!

 

最初は少し難しく感じますが一度「Font Awesome」を設定すれば、
わざわざ画像を用意する必要もないですし…。

なによりテキストなのでサイトの表示を重くする画像の読み込みが減ります!

もしブログのカスタマイズに画像をたくさん使っている、
なんとなくブログの表示が重い気がする!という方は…、。

この「Font Awesome」を使ってみてはいかがでしょうか!?

賢威7でFont Awesomeを使う!

まずは、Font Awesomeの公式サイトで
テキストアイコンをダウンロードしましょう。

fa00

fa02

 

ダウンロードしたファイルを解凍し、FTPツールを使って
Font AwesomeをWordPressのファイルにアップロードします!

fa03

私の場合は「wp」の中に「font」というファイルを作成し、
その中に解凍したFont Awesomeのデータをそのままアップしました!

 

次はWordPressにログインし、「賢威の設定」で
アップロードしたFont Awesomeのファイルを読み込みます。

</head>直前に挿入するコード記入欄に
Font AwesomeをアップロードしたファイルのURLを記入しましょう。

fa04

<link href="http://[あなたのサイトURL]/wp/font/font-awesome/css/font-awesome.min.css" rel="stylesheet">

これで準備OKです!さっそく使ってみましょう!

CSSで実際に使ってみる!

アイコンを使う前に、まず使いたいアイコンフォントの番号を調べましょう。

Font Awesomeの公式サイトのiconsに一覧表があります。

fa05

fa06

Unicodeの部分に番号が書かれているので、
これを使ってCSSでアイコンフォントを表示してみましょう!

.date:before{
	content:"\f274"; //使いたいアイコンの番号
	font-family: FontAwesome; //FontAwesomの宣言
	margin-right:5px; //右側に5pxの空白
}

使いたいアイコンフォントの左にある「\」は
「\(バックスラッシュ)」ではなく「\(¥マーク)」なので注意してください!

あとはアイコンフォントを表示したい箇所をこのクラスで囲えば…。

fa07

このようにアイコンフォントが表示できるようになりました!

まとめ

賢威7でFont Awesomeを使う方法でした!

最初の設定は少し難しいですが、一度設定できれば
色々なアイコンフォントが使えるようになります。

 

私は細かいアイコンの画像をいちいち用意するのが面倒だったので…w
このFont Awesomeを使いはじめるようになりました。

とても便利なのでぜひあなたのブログでも使ってみてくださいね!

The following two tabs change content below.
うたと
2014年11月から本格的にアフィリエイトを開始、Lureaで基礎を学ぶ。 初月で○万突破!という感じではなく、地道に少しずつコツコツと稼げるようになったタイプ。現在の月収はほったらかしでも約12,000~16,000ほどのクソザコ。 さらなる飛躍を求めてこのブログを立ち上げます。