更新 1,781 view

WEBフォントでブログをカスタマイズ！アイコンや記号を入れる方法

WEBフォントでブログをカスタマイズ！アイコンや記号を入れる方法

@Manamiです。

ブログの記事中に、アイコンを入れてカスタマイズしたいなあ、と思っていたら、こちらの記事（WEBフォントで簡単に！STINGER3の細かいところにアイコンを入れてみた）でそれが解説されていたので、実際にやってみました。

こんなアイコンたちがフォントとして使えるようになります。
フォントとして使えるというのは、文字のように使えるということです。画像のように重くならず、いちいち読み込ませないので、サイトの表示速度にもほとんど影響しないということです。

こんな感じで、アイコンは全部で439種類ほどあります。どれを使用するか迷ってしまいますね。

このように、stinger3で簡単にWEBフォントを使ってアイコンを入れることができたので、その方法を紹介したいと思います。

といっても、ほとんど上記の記事の通りですが。

少しの作業でいい感じにカスタマイズできるので、是非やってみてください。

具体的な手順としては、

といった流れです。順に説明します。

※ちなみに、Wordpressの場合、プラグインをインストールして挿入する方法もあるようですが（こちらの記事参照）プラグインを入れるとサイト自体がどんどん重くなってしまうので、なるべくプラグインは使いたくないところです。
というわけで今回はプラグインを使用せずにアイコンを使う方法です。

まずはFont Awesomeをダウンロード

Font Awesome, the iconic font and CSS toolkit

こちらのページで、そのアイコンたちをダウンロードします。
海外のサイトです。「Download」ボタンをクリックしてダウンロードします。

ダウンロードしたフォルダをWordpressのテーマに入れる

ダウンロードができたら、そのフォルダをみてみてください。

「css」「fonts」「less」「scss」の４つのフォルダがあるかと思います。
これをそのまま、WordpressのFTPサーバーのテーマの中に入れてしまいます。

場所は、WordPressテーマ「stinger3」の中に「webfont」というフォルダを新しく作成し、その中に上記でダウンロードしたフォルダ（「css」「fonts」「less」「scss」の４つ）を全て入れます。

cssファイルの読み込みタグをヘッダーに追記

アップロードができれば、次はそのフォルダをhtml内に呼び出せるように命令します。

WordPressの管理画面にいき、テーマ編集の中の「header.php」の中の部分に下記のコードを書きます。（コピペでOK！）

<!--webフォント読み込み-->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/webfont/css/font-awesome.min.css">

私はの直前に入れています。

あとは、入れたい場所にアイコンを挿入するだけ

ここまでできれば、下準備は終わりです。

あとは、アイコンを入れたい場所に、コードを入れていくだけです。

例） ハートマーク

<i class="fa fa-heart"></i> ハートマーク

例） アップルマーク

<i class="fa fa-apple"></i> アップルマーク

など。
注意しなければならないのは、と、コードの名称の前に「fa」を入れるのを忘れずに。

コードの一覧はこちらから見ることができますので、それを任意の場所に挿入するだけです。

Font Awesome Icons

当ブログでは下記のように入れています。
「single.php」の中や、「archive.php」のぱんくずリスト内など。

挿入例１）single.php内の関連記事前のアイコン

<h3><i class="fa fa-edit"></i> 関連する記事</h3>

挿入例例２）single.php内の公開日、フォルダ、タグ表示部分

<div class="blogbox">

<span class="kdate"><i class="fa fa-calendar"></i> 公開日：
<time class="entry-date" datetime="&lt;?php the_time('c') ;?&gt;">
<!--?php the_time('Y/m/d') ;?-->
</time>
:
<!--?php if ($mtime = get_mtime('Y/m/d')) echo ' 最終更新日：' , $mtime; ?-->
</span>
<i class="fa fa-folder"></i> <!--?php the_category(', ') ?-->
<i class="fa fa-tag"></i> <!--?php the_tags('', ', '); ?-->
</div>

PHP内は個人によって違うと思いますので、自分の入れたいところに入れてみてください。

まとめ

いかがでしたか？
WEBフォントを使って簡単にアイコンを入れる事ができたかと思います。

少しのデザイン、気遣いによってウェブサイトの見た目やクリックのしやすさ、ユーザーの使い勝手も向上すると思うので、ぜひやってみてくださいね！
アイコンも439種類の中から使い放題、です。

おしまい。

こちらの記事も人気です。