まろりかモンスター

パソコンだいすき♡ 雑記ブログです!

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

f:id:marorika:20180108223420p:plain

はてなブログでアイコンを使いたい場合がありますよね。
よく使われている方法を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>
                
            

f:id:marorika:20180108210230p:plain


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

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

f:id:marorika:20180108210244p:plain

f:id:marorika:20180108210256p:plain


アイコンの拡大・縮小も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通りの方法でした。
アイコンをうまく活用して素敵なブログにしたいですね。