ブログ作りって楽しいですよね。センスが問われます。笑
そして私はセンスがないです！！
そんな私でも、ブログをちょっとおしゃれにバージョンアップできた方法をご紹介します。
具体的に言うとこの部分！
ナビゲーションバーに私は使っていますが、本文やその他どこでも使えるのでおすすめです。
この記事のおすすめな人
- これからブログを始める人
- ブログをオシャンティにしたい人
- ブログに個性を出したい人
活用しようFont Awesome！！
Font Awesomeはご存知でしょうか？？
Font Awesomeはブログやサイト上でよく使われるであろうアイコンを「文字」として使うことができるツールです。
色や大きさなど様々簡単に変更ができます。
これも”文字”です。
具体的に私のブログではこのようについ買ってます。
＜Before＞
＜After＞
どっちがいいです？
Afterでしょう？そうでしょう？？？？（圧）
[temp id=2]
Font Awesomeの導入方法
簡単に導入できるのでおすすめです♪
下記の３パターンに分けて導入方法をご紹介します。
※初心者向けの導入方法です。
- WordPress（テーマ：Cocoon）を使っている人
- WordPressを使っている人
- WordPressを使っていない人
WordPress（テーマ：Cocoon）を使っている人
実は…cocoonを使っている人はすでに、導入されており使える状態なのです！！！
知ってました？笑
Cocoon設定 → 「全体」タブ → サイトアイコンフォント
ほら。ありました。笑
WordPressを使っている人
プラグインで導入しましょう。
「Font Awesome」でプラグインを検索
今すぐインストール → 有効化
終わり。笑
一応、設定を確認すると…下記の通りになっています。
※有料版を使いたい場合はここの設定を変更しましょう。
WordPressを使っていない人
CDNを活用しましょう。
CDNとはContent Delivery Networkの略で、要は外のサーバーにデータを置いておくのでそれを使ってください。と言うものです。
つまり、インターネットに繋がっていない環境では使えないと言うことですね。
（あまりないかもしれないですが…ネットに繋がっていないローカル環境でテストしても表示されません）
下記の公式サイトにアクセスし、メールアドレスの登録を行います。
アカウントにログインした状態で下記にアクセスをします。
上記のリンクをコピーして、<head>～</head>内に link タグを記述して読み込みます。
[temp id=2]
Font Awesomeの使い方
順番に実際に利用する方法を記載していきます。
①公式ページの上部にある検索バーに欲しいものを入力します。
※英語で検索してくださいね。
②画面左側「Free」をクリックすると無料で利用できるものに絞られます。
③次に、使いたいアイコンフォントをクリックします。
④上部に表示されている<i>タグをコピーしましょう。
例）<i class=”fas fa-envelope”></i>
⑤コピーした<i>タグのソースをテキストエディタに貼り付けましょう。
⑥こんな感じになります！！（ちっさ）
＜重要＞
[temp id=2]
Font Awesomeのカスタマイズ方法
カスタマイズ例をご紹介します。
デフォルトは下記の形式で用意されています。
カスタマイズしたい時は
と、カスタマイズしたい内容をスペースを入れて追記します。
詳細は下記の公式ページをご参照ください
アイコンのサイズを変える
<i class=”fas fa-envelope fa-xs”></i>
<i class=”fas fa-envelope fa-sm”></i>
<i class=”fas fa-envelope fa-lg”></i>
<i class=”fas fa-envelope fa-2x”></i>
<i class=”fas fa-envelope fa-3x”></i>
<i class=”fas fa-envelope fa-5x”></i>
<i class=”fas fa-envelope fa-7x”></i>
<i class=”fas fa-envelope fa-10x”></i>
アイコンを傾ける
<div class=”fa-4x”>
<i class=”fas fa-envelope”> </i>
<i class=”fas fa-envelope fa-rotate-90″></i>
<i class=”fas fa-envelope fa-rotate-180″></i>
<i class=”fas fa-envelope fa-rotate-270″></i>
<i class=”fas fa-envelope fa-flip-horizontal”></i>
<i class=”fas fa-envelope fa-flip-vertical”></i>
<i class=”fas fa-envelope fa-flip-both”></i>
</div>
アイコンを回転させる
<div class=”fa-3x”>
<i class=”fas fa-spinner fa-spin”> </i>
<i class=”fas fa-circle-notch fa-spin”> </i>
<i class=”fas fa-sync fa-spin”> </i>
<i class=”fas fa-cog fa-spin”> </i>
<i class=”fas fa-spinner fa-pulse”> </i>
<i class=”fas fa-stroopwafel fa-spin”> </i>
</div>
カスタマイズの参考書
文字フォントはCSSで簡単に装飾が可能です。
例えば…赤に変えたりも簡単（style=”color:red;”を追加）
CSSの知識をつければもっと幅が広がります！
まとめ
Font Awesome最高。
ナビゲーションバーへの反映方法などはまた別の記事を作成予定です。
