こんにちは、解説ゾロです!
Cocoonの「Font Awesome(フォント オーサム)」は、CSSのスタイルシートをいじらなくても「色」や「サイズ」を簡単に変更することができます。
変更する方法は、Font Awesome 5のサイトでコピーしたアイコンフォントのコードにちょこっと追記するだけで好きな色にしたり、大きくしたり小さくしたりするカスタマイズがとっても簡単にできちゃいます。
まだ導入していない方はぜひ使ってみてください。CocoonならWebアイコンフォントの、 や や が簡単に使えて楽しいのです・・・が、今日はもっと楽しくなるような内容です!笑
今の、 や や のアイコンフォントが、 や や のように、インパクトのあるアイコンフォントにちゃちゃっと変身できるのです。でも、目が回る~!!笑
今日は、CocoonでFont Awesome 5のコードにちょこっと加えるだけでアイコンフォントの「色」や「サイズ」を変更したり「回転」ができる、楽々カスタマイズ方法の解説です。CSSも使わずにとっても簡単ですので楽しみながら一緒にやりましょ!
Font Awesome 5アイコンの基本コード
コードはテキストの画面にお書きください!
コードを書く場合は、WordPress「投稿を編集」の「ビジュアル」から「テキスト」に変更し、
テキストの画面に書くことで変更が反映されます。
本日の解説で使うWebアイコンフォントは、当サイト「解説ゾロ」のマスク「」を使って解説いたします。
Font Awesome 5基本のコードをそのまま入力すると
Font Awesome 5アイコンの色を変更する方法
今回の色の指定は「style」タグというものを使います。書き方は、 style=”color:〇〇〇;”で、〇〇〇の部分に色の名前を指定すれば簡単に変更することができます。
Font Awesome 5の色変更のサンプルコード
変更したい色の名前 | 変更後のFont Awesome 5の「コード」 | 表示結果 |
red | <i class=”fas fa-mask” style=”color:red;”></i> | |
blue | <i class=”fas fa-mask” style=”color:blue;”></i> | |
yellow | <i class=”fas fa-mask” style=”color:yellow;”></i> | |
green | <i class=”fas fa-mask” style=”color:green;”></i> |
Font Awesome 5のコードに色を指定する場合の注意点
とっても簡単に色を変更することができました。注意点は、この「style」タグの方法はCSSを使いませんので、#から始まる「#ff0000」(red)のようなカラーコードは使えませんが、色の名前「red」や「blue」を指定することで、より簡単に色の変更ができます。
色を指定する場合の「red」や「blue」などの「色の名前」は下記「原色大辞典」が探しやすいかと思います。
Font Awesome 5アイコンのサイズを変更する方法
Font Awesome 5アイコンフォントの色の変更を実践してみると「コード」のこの辺にコレを指定すると変わる!というのが何となくわかってきます・・・よね!笑
今度は、Webアイコンフォントのサイズの変更ですが、色の変更をやられた方はすぐにできちゃいます。たぶん!笑。続けて、おなじみ?の「解説ゾロ」のマスク で解説していきます。
今度のコードの書き方は、サイズを指定する「fa-〇〇」をWebアイコンフォントのコード内に追記するだけです。具体的な「〇〇」は「2x」や「3x」などを入れてサイズを指定すれば簡単にアイコンフォントのサイズを変更することができます。
Font Awesome 5のサイズ変更のサンプルコード
変更したいサイズ | 変更後のFont Awesome 5の「コード」 | 表示結果 |
xs | <i class=”fas fa-mask fa-xs“></i> | |
sm | <i class=”fas fa-mask fa-sm“></i> | |
基本サイズ | <i class=”fas fa-mask”></i> | |
lg | <i class=”fas fa-mask fa-lg“></i> | |
2x | <i class=”fas fa-mask fa-2x“></i> | |
3x | <i class=”fas fa-mask fa-3x“></i> | |
4x | <i class=”fas fa-mask fa-4x“></i> |
マスクも大きくなると迫力があるのですね!笑
この方法で「fa-10x」まで大きなサイズを表示することができます。
でか笑!
Font Awesome 5の微妙なサイズ変更は「ピクセル」指定
Font Awesome 5のピクセルでサイズ変更のサンプルコード
変更したいピクセル数 | 変更後のFont Awesome 5の「コード」 | 表示結果 |
7px | <i class=”fas fa-mask” style=”font-size:7px;”></i> | |
26px | <i class=”fas fa-mask” style=”font-size:26px;”></i> |
Font Awesome 5アイコンの色とサイズ変更のサンプルコード
「色の変更」も「サイズの変更」もわかったところで、1つのコードの中に「色」と「サイズ」の両方を変更してみます。基本のコードは変わらずにこちら、
に、マスクを「red」の赤にして、サイズは3倍の「3x」にしてみます。完成したコードの、
が、表示されました。成功です!笑
Font Awesome 5アイコンを回転させる方法
回転させるなんてムズ!って思わないでくださいませ。まったく簡単です!笑
アイコンフォントを回転させるには、回転の指定「fa-spin」をFont Awesome 5のアイコンフォントコードに追記するだけでOKです。
Font Awesome 5アイコンの回転、サイズ、色変更のサンプルコード
では「色」「サイズ「「回転」の3つを、1つのコードで変更してみます。基本のマスクの黒色から「green」(緑色)に変更して、サイズを4倍の「4x」にして、回転させるために「spin」を追記すると、コードは、
になります。このコードをテキストの画面に入力しますと、
回った回った!笑。またまた大成功です。お疲れさまでした。
まとめ
CocoonでFont Awesome5アイコンの「色」や「サイズ」そして「回転」を簡単に変更できる解説でした。「ソースコード」とか「プログラム言語」とか難しいことは考えずにやると、簡単です・・・よね!笑
CSSをいじるのが苦手な方でも、この方法なら気楽にアイコンフォントをカスタマイズして使えますので、ぜひチャレンジしてください。サンプルコードを見ながら、ご自分のお好みの色やサイズを入れ替えてお楽しみください!
アイコンフォントは画像では無いので、大きくしてもキレイに表示できるのはうれしいところです。しかも、Cocoonならあっという間にFont Awesome 5が簡単に使えるようになります。
あなた様のブログのデザインも楽しくなりますように!
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロ でした!回ってる、笑!
関連記事:Cocoon本文にWebアイコンフォントを表示する簡単カスタマイズ
関連記事:ボックスメニューを本文に表示するCocoonカスタマイズ方法
関連記事:ボックスメニューが簡単にできた!Cocoonカスタマイズ
関連記事:WordPressのショートコードを文字列のまま本文に表示させる方法