はてなブログでアイコンを使う2通りの方法（デフォルト ＆ Font Awesome 5）

はてなブログでアイコンを使いたい場合がありますよね。
よく使われている方法を2通り紹介します。

1. はてなブログがデフォルトで読み込んでいるアイコンを使用する方法
2. Font Awesomeを利用する方法

なお、細かいことを言うと、はてなブログのデフォルト読み込みのアイコンを利用したほうがページ読み込み速度は若干早いと思いますが、 Font Awesomeの方がアイコンの数が圧倒的に多いので、私はFont Awesomeしか利用していません。

はてなブログがデフォルトで読み込んでいるアイコンを使用する方法

はてなブログはデフォルトでいくつかアイコンを読み込んでいるので、すぐに利用できます。
もちろん、はてな記法、Markdown、htmlのいずれでも利用できます。
以下のようなアイコンを利用できます。

                
                    File: hatena-icon.html
                    ----------------------

                    <!-- はてなのアイコン -->
                    <i class="blogicon-hatenablog"></i>
                    <!-- 人物のアイコン -->
                    <i class="blogicon-account"></i>
                    <!-- ツイッターのアイコン -->
                    <i class="blogicon-twitter"></i>
                
            

詳しい使用方法については以下のサイトがとても詳しくてわかりやすかったので参照してみてください。

orefolder-sample.hatenablog.com

Font Awesomeを利用する方法

はてなブログでのFont Awesomeを利用するには、詳細設定の「headに要素を追加」欄にコードを追加をする必要があります。
なお、今回紹介するのは現時点（2018年4月）最新版のFont Awesome 5の設定方法です。無料でたくさんのアイコンが使用できます。
最新版はアイコンがとても探しやすくなっているのでオススメです。私も最新版を導入しています。

はてなブログへの設定は以下をコピーして詳細設定の「headに要素を追加」欄に貼り付けるだけなのでとても簡単です。

                
                    File: font-awesome-5.html
                    -------------------------

                    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
                
            

使い方ですが、以下のサイトから気に入ったアイコンのコードをコピーして貼り付けるだけです。

Font Awesome : https://fontawesome.com/icons

アイコンの拡大・縮小もhtmlのclassに設定を加えるだけで簡単にできます。

                
                    File: font-awesome-5-example.html
                    ---------------------------------

                    <!-- 75%に縮小（fa-xsをつける） -->
                    <i class="fas fa-camera-retro fa-xs"></i>
                    <!-- 87.5%に縮小（fa-smをつける） -->
                    <i class="fas fa-camera-retro fa-sm"></i>
                    <!-- 通常版 -->
                    <i class="fas fa-camera-retro"></i>
                    <!-- 133%に拡大（fa-lgをつける） -->
                    <i class="fas fa-camera-retro fa-lg"></i>
                    <!-- 2倍に拡大（fa-2xをつける） -->
                    <i class="fas fa-camera-retro fa-2x"></i>
                    <!-- 5倍に拡大（fa-5xをつける） -->
                    <i class="fas fa-camera-retro fa-5x"></i>
                    <!-- 10倍まで拡大可能 -->
                
            

以上で、はてなブログのデザインや記事にアイコンを使う2通りの方法でした。
アイコンをうまく活用して素敵なブログにしたいですね。

伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール

posted with ヨメレバ

高橋 佑磨,片山 なつ 技術評論社 2016-08-05

Amazon

Kindle

楽天ブックス

楽天kobo