最近よく見ていただいてるページはこちら

  1. 『AdSense を収益源として確保できるよう ads.txt ファイルをご修正ください 』メールに対処
  2. Bitnami|Macで最も簡単なWordPressのローカル環境を
  3. Luxeritas にしてみて気をつけるといいかもしれないこととか
  4. 雨の日に聴きたい14曲|洋楽バージョン
  5. これなんだっけ?忘れちゃうから導入プラグイン一覧

フォントアイコン『Font Awesome』でブログを飾ってみる

2016.7.18

フォントアイコンというものを知りました。今回は、それってなんなの?と、かんたんに使える『Font Awesome』の設定方法と、STINGER PLUS+ に使ってみたのを記録しておきます。

FontAwsome2

フォントアイコンとは

イラストかと思ってたら、文字だった! 例えば、ハートマーク。画像だと

ハートこんなふうに、かわいいのがあって、でも小さいなーなので大きくしようとすると、ガタガタになってしまいます。大きくしかたも知らないし…
フォントアイコンなら、文字の扱いと同じなので
こんなのだって → 大きくしていくのは かんたんだし、線が乱れたりしない。
色を変えるのは、CSSで  かんたんです。
回転させたり 90度回転  180度  270度  左右逆転(これじゃわかんないね)  逆さま
なんてのもできちゃう。
Loading… 回り続けるのもね。
ほか、私はうまくできなかったんだけど、フォントアイコン同士を重ねたりもできるようです。

『Font Awesome』の設定

当ブログは、WordPressテーマ『STINGER PLUS+』(2017年8月現在は Luxeritas)を使わせていただいてます。
Stinger5までは、デフォルトで入ってるとの情報があるんだけど…PLUSがどうなのか、私にはわかりませんでした。う〜ん…とりあえず やっちゃえ!ってことで、以下のようにしました。

header.phpにタグを追加

『Font Awesome』 の Get Started から、タグをコピーします。

FAリンク

自分のところに帰ってきて

FAヘッダーに

『外観』 → 『テーマの編集』 → 『header.php』 で、赤線部分を書き込みました。このあたりは、FTPクライアント使ったり? 直接 親テーマいじらなくてもいい方法とかあったり? するんだと思います。
これだけで、準備完了。

使ってみたよ

最初の、例としてあげた  や は、『Font Awesome』 の使用例です。
詳しくは Exanpleページを見てください。

STINGER PLUS+ のh3に

カスタマイズのしかたを教えていただきました。と、言っても記事を拝見したんだけどね。

「これをコピペするだけ」って記事を書いてくれる方、神さまみたい! 私のように、ほとんどなーんにも知らない者にとっては。とーってもありがたいです。
で、こうなりました。

h3にフォントアイコン

おしまいに

自分がいかに知らないかってことを知っていく。調べものしてると、さらにわからないものが出てきて、それも調べ始めドツボにはまってどこまでも遠くへ行ってしまう。

アバター画像
はっ! 今やるのは コレじゃないにゃん!

戻ってくることも、だいぶできるようになってきました。だいぶね。
このフォントアイコンみつけたのも、どなたのどの記事が最初だったのか、もうわからない。カテゴリーの横についてたら、かわいいよねって思ったのも、やり方わからなくてできてない…
ますます勉強しなきゃなぁになっていくWordPress。いつかそのうち、やりたいこと全部できるようになるのかなぁ。それとも、もういいやって思える日がくるのかも。どちらにしても、まだまだテをつけたいところがあります。
STINGERは、カスタマイザーでできることが多いからいいよね。

めでたし めでたし

かんじんの 書きたい記事はどうしたにゃ?
アバター画像