こんにちは。
今回は、ライブドアブログでFont Awesomeによるアイコンフォントを表示する方法についてまとめていきたいと思います。
当ブログでも使用している、こちらの箇条書きリスト（ul）を試しに作っていきます。
アイコンフォントとは？Font Awesomeとは？
アイコンフォントとは、文字として利用できるアイコン素材のことです。
Font Awesomeは、そのアイコンフォントを取り扱っているサイトです。
↓こんなやつです
これらは文字として扱うことができるので、大きさを変えたり…
色を変えたりすることができます。
また、色々なブランドのアイコンも用意されています。Twitterのアイコンもあります。
またりん ← クリックしてみてください。ブログのTwitterに飛びます。
このように、とても簡単にアイコンを扱うことができます。
HTMLから直接アイコンフォントを表示する
まずは、HTMLから直接アイコンフォントを表示してみます。
ライブドアブログの記事編集画面に直接入力することでアイコンフォントを表示します。
HTMLのheadタグにコードを入力
1, ライブドアブログの設定 ＞ デザイン / ブログパーツ設定 ＞ PC を選択します。
2, カスタマイズから、それぞれのHTMLファイルの<head></head>内に以下のコードを入力します。
これを入力↓
最新バージョンは、Font Awesomeの公式サイトから確認して、数字を適宜書き換えてください。
これで、Font Awesomeを利用することができるようになりました。
記事編集画面にアイコンフォントのコードを貼る
Font Awesomeの公式サイトから使いたいアイコンを検索します。
1, 上のメニューからIconsを選び、好きなアイコンを探す。
2, アイコン個別ページのコードをコピーする。
左クリックするだけでコピーできます。
3, 記事の編集画面に貼り付ける。
こんな感じで表示されます。
<i class=”fas fa-comments”></i> →
大きさを変えたい場合は、
<i class=”fas fa-comments fa-2x”></i> →
<i class=”fas fa-comments fa-3x”></i> →
色を変えたい場合はCSSと組み合わせて、
<i class=”fas fa-comments icon-red”></i> →
<i class=”fas fa-comments icon-blue”></i> →
これをCSSに入力↓
という感じです。
こちらのサイトを参考にしました。
スポンサーリンク
CSSを使ってアイコンフォントを表示する
先ほどの箇条書きリストを作っていきます。
事前に、HTMLのheadタグにコードを入力 を終わらせておいてください。
先ほどと同様にカスタマイズ画面からCSSを編集します。
今回はこのようなコードを追加しました。
私の場合、記事本文では「.article-body h2 { … }」のように先頭に「.article-body」とついていたので、これに従いました。
テーマによってクラス名が違うこともあるので、適宜変更してください。
14行目は font-family を指定しています。
無料版は “Font Awesome 5 Free” 、PRO版は “Font Awesome 5 Pro” となるようですね。
15行目の content は、アイコンフォントのコードを示しています。
アイコンフォントの個別ページに書いてあります。
16行目の font-weight は必須項目です。
これを入力しないと、アイコンフォントが表示されない！という問題が発生します。
アイコンフォントの個別ページにstyleが書いてあります。
これによって数値を決めます。
| スタイル | 値 |
|---|---|
| SOLID | 900 |
| REGULAR | 400 |
| LIGHT | 300 |
| BRANDS | 400 |
無料版だと、SOLIDとBRANDSしか使わないと思うので、これだけ気をつけておきましょう。
というわけで、これを利用してulでリストを作ると下のようになります。
- こんな
- 感じ
- です
（ライブドアブログの仕様上スマホから見るとただのリストになってしまいますが…）
こちらのサイトをとても参考にしました。
さらにカスタマイズしたい方はこのサイトをぜひ読んでみてください。
スポンサーリンク
まとめ
以上、ライブドアブログで「Font Awesome」によるアイコンフォントを表示する方法でした。
Font Awesomeのアイコンフォントはとても便利なので、どんどん使っていきましょう！
コメント