そらいろくらげが浮き輪で海に浮いているイラスト

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="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">

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

フォントの挿入

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

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

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

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

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

   
   
   
   
   

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

ブログでの用途

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

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


リストとして使う

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

  ミズクラゲ
  タコ
    イカ
  カニ
  ナマコ

締めくくり

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

コメントを残す


goToTop