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

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

以下の記事では、エキサイトブログで Font Awesome の最新バージョン 5.0.8 を使う方法を紹介しましたが、スマホ画面ではアイコンが表示されないという問題がありました。

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

そこで、スマホ画面でも Font Awesome をなんとか使える方法がないかと調べてみたところ、いい方法が見つかりましたので紹介します。

スマホ画面ではすでに Font Awesome 4.3.0 が有効になっていた

Chrome のデベロッパーツールでエキサイトブログのスマホ画面を調べていたら、このことがわかりました。

これはラッキーです。

マイスキンの CSS に以下の行を追加して Font Awesome 4.3.0 を使えるようにすれば、パソコン画面とスマホ画面の両方で共通のアイコンを使えるようになりますね。

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

しかし、Font Awesome 5 で追加された新しいアイコン(例えば LINE)も使いたいところです。

いろいろと試してみたところ、Font Awesome 5 の CSS を組み込んでおけば、Font Awesome 4 のコードでもアイコンを表示できるみたいです。

つまり、マイスキンの CSS には以下の行を追加しておけばよいということになります。

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

スマホ画面での表示を考慮すると、記事本文では Font Awesome 4 のアイコンを使い、サイドバー(パソコンでのみ表示)では Font Awesome 5 のアイコンを使う、というのが現状のエキサイトブログではいちばんよい使い方ですね。

Font Awesome 5 のアイコンはこちら (サイドバーではこちらを使う)

4.7.0 のアイコンから選ぶときは、アイコンが追加されたバージョンにも注意が必要です。

例えば、以下のアイコンは 4.6 で追加されたものなので、4.3.0 が組み込まれているエキサイトブログのスマホ画面では表示されません。

また、エキサイトブログの編集画面にも Font Awesome (バージョンは 4.0.3) が組み込まれていて、バージョン 4.0.3 までのアイコンであれば編集画面に表示されます。