今日はCSS。
直近の課題でCSSを触っていたこともあり、はてなブログにFontAwesomeという、超絶便利にアイコンやらイラストやらをサイトに入れ込む事ができるウェブアイコンを入れたくなった。
FontAwesomeとは
こういうのとか、
こういうのとかである。
自分は楽なのでCDNを用いたアイコンの利用を行っている。参考サイトはこちら。
fastcoding.jp
要はサイトのヘッダー部分にアイコンを引っ張ってくる為のスクリプトを埋め込むだけで、HTMLとかCSSとかにそのサイトのWebアイコンを表示する事ができるということ。
このスクリプト、その辺のサイトで拾ってきたやつでもかろうじて動いたのだが、version5.9以降を用いるには無料の会員登録を済ませる必要があるようだ。2021にver.6が出てきているらしい。ソースはここ。
www.webdesignleaves.com
なので自分はすぐさま登録をすることにした。
使う上で簡単に理解できてすぐ使えるようになるのはこのサイトだと思う。課題やるときもお世話になった。
saruwakakun.com
HTML表記ではサイトにある通り
<i class="fas fa-info-circle"></i>
と打ち込むだけでアイコンが表示される。これはinformationアイコン。
はてなブログだとはてな記法にぶち込んだりみたまま表示だとhtmlのところに入れるだけでアイコンが入れられる。良い。
このアイコン、何が便利かというと
- 簡単にアニメーションが入れられる
- 無料
という点が特に便利だと思った。
まずアニメーションだが、例えばこう。
グルグル回ってんね！これhtmlに少し加えただけなのとても楽しい。
<i class="fas fa-info-circle faa-spin animated"></i>
アニメーションの入れ方はさっきも引用した通りsaruwakakun.comが本当にわかりやすいので探してみて欲しい。
次に無料だがこれは言わんこっちゃない。はてなブログをProにもせず用いてる身としてはとても嬉しいところ。
CSSでFontAwesomeをいじる
こっちが本題。
HTMLに埋め込んだ場合はわりかし比較的に制御が可能なのだが(当社比)、はてなブログでアイコンをいじろうとすると、どうしてもCSS表記でアイコンを入れることになる。
具体的にははてなブログの管理画面から
管理画面 > デザイン > カスタマイズ > デザインcss
の部分に以下のように::beforeやら::afterやらの擬似要素を使えばアイコンを付け足す事ができる(ちなみに自分は擬似要素についてよくわからないままここまできているのでそのうちちゃんと調べたいと思っています)。
.entry-category-link::before{ font-family: "Font Awesome 5 Free"; content:"\f55f\0020"; color: orange; font-weight: 900; }
これで自分は記事ページのカテゴリのところにカエデの葉っぱをオレンジにしてくっつけることに成功した。しっかし表示するまでに大きな紆余曲折があったので誰かが困った時にみてくれたら嬉しい。
cssでアイコンを表示する時にはbeforeやafterを用いるのが定番である。
contentを使うことで、本当にくっつけたい部分の前後にアイコンをつける、というのが主とした役割。
font-familyはどのウェブフォントを用いるのかを教える為の部分。Twitterアイコンとかを使うときはFreeではなくBlandsになるらしいので注意。
contentが前後にくっつける部分。"\f55f"がカエデアイコンを表すUnicodeで、自分は半角の余白を入れるために\0020を入れている。これはもっと良い方法があるような気がするのであまり強い参考にはならないと思う。
colorは色。orangeを使用。
最後のfont-weight。こいつが曲者だった。諸悪の根源。
css初学者なので、最悪これだけで動くと思っていた。
.entry-category-link::before{ font-family: "Font Awesome 5 Free"; content:"\f55f"; }
すると、表示されるものとされないものがある。
なんならスマホ版なら表示されるのに、PCだとみられない。表示されない。
どうして？？？？？？
正解は
FontAwesom 5からはCSSでアイコンを設定する時にfont-weightを設定しないと表示されない
が原因だった。
なので、運よくPCで表示されていたのはver5前のものを使用していたからであって、おかしいのはこっちだった。5以降のものは完全に表示されていない状態になっていたである。しかもよくある質問とかでみる豆腐にすらならず、まじで空白のまま。
自分が気づいたのはこのサイトをみてからだったが、
solabo.blog
先ほどから引用している
saruwakakun.com
にもしっかり書いてあった。ごめんなさい。
