はてなブログでFontAwesome使えない問題の対処法

はてなブログのHTML編集画面では、システムの好意から「空のタグは自動で削除される」というような特徴があります。また「spanタグで書いたのに勝手にpタグに変えられてしまうよう」というようなこともあります。これは記述ミスを防ぐための「はてな」なりの工夫なのだと思います。

HTML編集画面で貼付けたFontAwesomeのコードが消えてしまう?

問題はHTMLでFontAwesomeを使うときです。

コードを貼付け

はてなブログのHTML編集画面で<i class="fa fa-car"></i>のようなコードを貼り付けててみます。

アイコンが表示されない

「見たまま編集」に戻しても何も表示されません。

コードが消える

もう一度、HTML編集画面に戻るとコードが消えています。厄介ですね。

対処法

iタグの中に&nbsp;を入れることで勝手に消えるのを防ぐことができます。例えば以下のように書きます。

<i class="fa fa-car">&nbsp;</i>

これでプレビュー画面を確認すると、きちんと表示されるのが分かるかと思います。

表示されるように

注意点

ただし、いくつか注意点があります。

「見たまま編集画面」ではアイコンが表示されない

「プレビュー画面」では表示されるのですが、編集画面では表示されません。実際公開したときにはきちんと表示されるので問題はないのですが、作業がしづらいですね。これは受け入れるしかありません…。

それでもタグが書き換わる

書いたiタグが勝手にpタグや別のタグに変わってしまうことがあります。きちんと表示はされるので、これも受け入れるしかありません。

最後に

はてなの仕様変えてほしいですね。FontAwesomeの使い方はこちらの記事でイチから解説しています。

サルワカ