FC2ブログでWebアイコンフォントを使用する

くらげ模様では、いたるところにWebアイコンフォントというものを使用しています。

ブログメニューなどにアイコンを使うと、それだけでぐっと洗練されている感が増します。また、スマフォで見る場合にもテキストより認識しやすくなります。
くらげは、ブログデザインをいじるときに調べ物をしていて、たまたまその存在を知りました。こんな便利なものがあるのかと思い、さらにカンタンに使えそうだったのでさっそく導入してみました。Webアイコンフォントを使うと、いちいち画像をアップして読み込ませる手間が省けるので便利です。

そこで、Webアイコンフォントの導入方法を説明していきます。

Webアイコンフォントとは

例えば、これ。 硝子のように繊細なくらげのハートです。他にはこんなのも。 チェックワンツー。忘れちゃならない、これ。 ぴかーん。

このように、画像をフォントとしてブラウザに認識させて表示します。
フォントとして使えるので、あまりCSSとかHTMLが詳しくない方でもフォントをいじるタグさえわかっていれば扱いやすいです。

Webアイコンフォントの使い方

Webアイコンフォントには何種類かありますが、くらげはFont Awesomeを使っています。参照したのは、以下のブログです。
超簡単!アイコンフォント Font Awesomeの使い方 -アズのWordPressカスタマイズと最新型SEO

Font Awesomeを使うための準備

まず、ブログテンプレートの編集画面を開きます。そして、HTMLの編集画面内からcommand+FもしくはControl+Fで</Head>という文字を検索します。
そして、</Head>より上に、下記のコードをコピペします。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

これでもう、ブログ上で使えるようになります。

なお、2017年末に新たにFontAwesome5がリリースされました。以前のFontAwesomeよりもアイコンが増えてサイトも使いやすくなっています。旧バージョンのFontAwesomeもまだ使用できますが、FontAwesome5の方をおすすめします。
上記のコードはFontAwesome5用のコードです。

フォントの挿入

使いたいフォントをこちらのサイトから選択してクリック。すると、下記のコードが表示されます。

<i class="fa fa-heart"></i>

このコードを表示させたい部分にコピペすれば表示されます。

アイコンフォントの大きさを変える

フォント名の後ろに大きさを表すスタイルを付け加えることによって、大きさも変えられます。

   <i class="fa fa-heart fa-lg">
   <i class="fa fa-heart fa-2x">
   <i class="fa fa-heart fa-3x">
   <i class="fa fa-heart fa-4x">
   <i class="fa fa-heart fa-5x">

他にもスタイルの種類がありますが、一番使う大きさを変えるスタイルのみ紹介しました。その他のスタイルについては、下記のブログをご参照下さい。
楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用 Tips – HAM MEDIA MEMO

ブログでの用途

グローバルメニューで使う

先日紹介した、”FC2ブログでグローバルメニューを設置する”という記事で紹介したメニューでも使用することができます。

Home
記事一覧
Profile
Contact

<i class="fa fa-home fa-lg"> Home
<i class="fa fa-th-list fa-lg"> 記事一覧
<i class="fa fa-lightbulb-o fa-lg"> Profile
<i class="fa fa-envelope fa-lg"> Contact

リストとして使う

例えば、ミズクラゲ・タコ・イカ・カニ・ナマコという語句をリスト表示させたい場合。
 ミズクラゲ
 タコ
 イカ
 カニ
 ナマコ

<i class="fa fa-check-square-o">  ミズクラゲ
<i class="fa fa-check-square-o">  タコ
<i class="fa fa-check-square-o">    イカ
<i class="fa fa-check-square-o">  カニ
<i class="fa fa-check-square-o">  ナマコ

締めくくり

ここで取り上げた例以外にも、いろんな使い道があると思います。ぜひ、活用してみてください。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください