エキサイトブログで Font Awesome 5 を使うには : パソコン教室くりっくのブログ

ブログランキング参加中。ポチッとお願いします。

注意点(はじめに)

この記事は Font Awesome の最新バージョン 5.0.8 をエキサイトブログで使用する方法を紹介しています。

ここで紹介する方法を行った場合、パソコンでブログを表示したときには期待通りの結果になりますが、スマホで表示するとアイコンが表示されません。

エキサイトブログではパソコンとスマホで使用されるスキン(デザイン)が違っていて、スマホのスキンはいじれないようになっています。

よって、以下のような用途に限定して使用するのがおすすめです。

サイドバーにSNSアイコンを表示 (この記事の最後で紹介)
サイドバーはパソコンのみに表示されますので、スマホの表示を気にする必要はありません。また、LINE のアイコンは最新版の Font Awesome でないと表示できません。
パソコンで表示できればOK、スマホはしかたない、と割り切れる

【2018年3月4日追記：エキサイトブログではバージョン 4・5 の使い分けがおすすめ】
なにかもっといい方法がないかと調べたところ、いい方法が見つかりました。以下の記事で紹介しています。

Font Awesome は Web で使えるアイコンのひとつで、絵文字のような使い方ができます。

画像ではなくフォント(文字)と同じように扱えますので、スタイルシートを使って色を変えることができますし、大きなサイズを指定して拡大しても輪郭がくっきりしています。

　　　　　　　

アイコンの種類は無料版で946個、有料版(60ドル)で2,481個あります。[2018年3月3日現在]

マイスキンの CSS に以下の行を追加します。

@import url("//use.fontawesome.com/releases/v5.0.8/css/all.css");

バージョン 5.0.8 が現時点での最新版です。

この行を追加する場所は @charset "UTF-8"; のすぐ下です。(下記参照)

以下のアイコン一覧ページを開いて、使いたいアイコンをクリックします。(色が薄くなっているのは有料版のアイコンです)

上の行で使用したアイコンを例に説明します。

大きなアイコンの下に表示されるコードをコピーします。コードの右のボタンをクリックしてコピーすることもできます。

記事を書く画面で HTML編集に切り替えて、アイコンを置きたい場所にコードを貼り付けます。

fa-2x を指定するとサイズが2倍になります。色を変えたいときはスタイルシートを使います。

Font Awesome のホームページはこちら

fa-spin を指定するとアイコンが回転します。

ただいま準備中です。もうしばらくお待ちください。

fa-pull-left を指定するとアイコンが左寄せされます。float:left; と同じ動きです。fa-5x でサイズを5倍にしています。

今日、新潟県南魚沼市では朝からずっと雪が降っていました。天気予報によると明日は晴れるみたいです。

SNSアイコンに色とリンクを設定して、このブログのサイドバーのプロフィール欄に配置してみました。

　　

アイコンだとすっきりしますね。

ちなみに、LINE のアイコンはバージョン5になって追加されましたので、バージョン4では使えません。