【はてなブログ】アイコンが表示されない時の対処法【CSS】
つい先日、このサイトのスマートフォンのデザインを変更した。
「はてなブログ スマホ デザイン」で出てきてトップに来たもののデザインをお借りしたのだが、これが本当にすごかった。
こちらがそのサイトである。
正直はてなブログでここまでのデザインが出来るのかと感動した。１か月目で４万PV、収益２万（記事は５記事のみ）は怪物であるが、このくらい高レベルな記事を出していたら納得である。素直に尊敬。デザイン公開ありがとうございます。
というわけで、自分もこのデザインに憧れてコピー＆ペーストを繰り返してデザインを変えたのだが…
うーん…一部デザインが表示されていない。
というかアイコンがうまく表示されていなかった。
コピペしたから基本的にはコードは間違っていないはずなのになぜ…
「はてな アイコン 表示されない」とググっても求めているものとは違う……
詰んだからもう聞こうと思った時、コードを見てようやくわかった
答えは単純で、そのアイコンを使用する準備が出来ていなかったからだ。
CSSの編集などを今までほとんど学んでこなかったため、僕はアイコンがどう表示されているのか知らなかった。今回のこのデザインで使われているのはFont awesomeというWEB上にアイコンを表示させてくれるサービス。その下準備が出来ていなければ、当然表示されない。
というわけで、Font Awesome をはてなブログで表示させる方法を調べてみるとうじゃうじゃ出てきた。助かる。で、その中で分かりやすかったのがこちら
詳しい説明は省くが、どうやら
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
このコードをそのまま［設定］⇒［詳細設定］⇒［headに要素追加］のとこに貼ればよいらしい。
すると…
出来た
また、これははてなブログ限定になってしまうが、font awesome のコードの代わりにblogiconを指定してやることもできる。こちらは下準備等が必要なく、はてなブログであれば誰でも使うことが出来る
詳しくはこちらのサイトに載っています
僕以外にもきっとコピペ丸パクリ・アイコン表示されないマンがきっといると思うので、その方たち役に少しでも役に立てばなと思っています。
