PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見ていただくだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁

CocoonでFont Awesome 5アイコンの色やサイズを変更

スポンサーリンク

Font Awesome 5アイコンの色やサイズを変更のロゴ

こんにちは、解説ゾロです!

Cocoonの「Font Awesome(フォント オーサム)」は、CSSのスタイルシートをいじらなくても「色」や「サイズ」を簡単に変更することができます。

変更する方法は、Font Awesome 5のサイトでコピーしたアイコンフォントのコードにちょこっと追記するだけで好きな色にしたり、大きくしたり小さくしたりするカスタマイズがとっても簡単にできちゃいます。

まだ導入していない方はぜひ使ってみてください。CocoonならWebアイコンフォントの、 や  や  が簡単に使えて楽しいのです・・・が、今日はもっと楽しくなるような内容です!笑

今の、 や  や  のアイコンフォントが、  や  や   のように、インパクトのあるアイコンフォントにちゃちゃっと変身できるのです。でも、目が回る~!!笑

今日は、CocoonでFont Awesome 5のコードにちょこっと加えるだけでアイコンフォントの「」や「サイズ」を変更したり「回転」ができる、楽々カスタマイズ方法の解説です。CSSも使わずにとっても簡単ですので楽しみながら一緒にやりましょ!

前回の記事はこちら
Cocoon本文にWebアイコンフォントを表示する簡単カスタマイズ
WordPressのCocoon本文中に素敵なWebアイコンフォント(fonto awesome 5)を簡単に表示する方法です。Webアイコンフォントはボックスメニューだけでなく文章内にも表示して使うことができます。Webアイコンフォントを使うと楽しいので、一緒にやりましょ!
スポンサーリンク
スポンサーリンク
スポンサーリンク

Font Awesome 5アイコンの基本コード

はじめに、重要事項です。笑!
コードはテキストの画面にお書きください!
コードを書く場合は、WordPress「投稿を編集」の「ビジュアル」から「テキスト」に変更し、
テキストの画面に書くことで変更が反映されます。

本日の解説で使うWebアイコンフォントは、当サイト「解説ゾロ」のマスク「」を使って解説いたします。

Font Awesome 5のサイトで表示されている「マスク」の基本のコードは、
<i class=”fas fa-mask“></i>
です。”fas fa-mask”の部分が各Webアイコンフォントによって変わる部分です。

Font Awesome 5基本のコードをそのまま入力すると

<i class=”fas fa-mask”></i>
 
そのままのコードで「テキスト」の画面に書くと、このように色は黒いマスクで、このサイズで表示されます・・・が、このコードにちょっと追加するだけで、冒頭のように色やサイズを簡単に変更できます。オマケに回転もします。
スポンサーリンク

Font Awesome 5アイコンの色を変更する方法

今回の色の指定は「style」タグというものを使います。書き方は、 style=”color:〇〇〇;”で、〇〇〇の部分に色の名前を指定すれば簡単に変更することができます。

<i class=”fas fa-mask” style=”color:〇〇〇;”></i>

Font Awesome 5の色変更のサンプルコード

よく使いそうな4つの色でサンプルのコードを書いてみましたので「色の名前」や「style」の挿入個所など、よろしければ参考にしてください。
変更したい色の名前 変更後の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」などの「色の名前」は下記「原色大辞典」が探しやすいかと思います。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本
スポンサーリンク

Font Awesome 5アイコンのサイズを変更する方法

Font Awesome 5アイコンフォントの色の変更を実践してみると「コード」のこの辺にコレを指定すると変わる!というのが何となくわかってきます・・・よね!笑

今度は、Webアイコンフォントのサイズの変更ですが、色の変更をやられた方はすぐにできちゃいます。たぶん!笑。続けて、おなじみ?の「解説ゾロ」のマスク  で解説していきます。

今度のコードの書き方は、サイズを指定する「fa-〇〇」をWebアイコンフォントのコード内に追記するだけです。具体的な「〇〇」は「2x」や「3x」などを入れてサイズを指定すれば簡単にアイコンフォントのサイズを変更することができます。

 <i class=”fas fa-mask fa-〇〇“></i>

Font Awesome 5のサイズ変更のサンプルコード

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の微妙なサイズ変更は「ピクセル」指定

ピクセル(px)は数値で指定ができますので、微妙なサイズを表現することができます。書き方は、色の変更と同じ「style」タグを使います。style=”font-size:〇〇px;“ で、〇〇に数値を入れればOKです。
<i class=”fas fa-mask” style=”font-size:〇〇px;></i>

Font Awesome 5のピクセルでサイズ変更のサンプルコード

サンプルコードを2つ書いてみました。「7px」だと、まるで視力検査ですね!笑
変更したいピクセル数 変更後の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つのコードの中に「色」と「サイズ」の両方を変更してみます。基本のコードは変わらずにこちら、

<i class=”fas fa-mask”></i>

に、マスクを「red」の赤にして、サイズは3倍の「3x」にしてみます。完成したコードの、

<i class=”fas fa-mask fa-3xstyle=”color: red;“></i> 
をテキストの画面に入力しますと、

  

が、表示されました。成功です!笑

Font Awesome 5アイコンを回転させる方法

回転させるなんてムズ!って思わないでくださいませ。まったく簡単です!笑

アイコンフォントを回転させるには、回転の指定「fa-spin」をFont Awesome 5のアイコンフォントコードに追記するだけでOKです。

Font Awesome 5アイコンの回転、サイズ、色変更のサンプルコード

では「色」「サイズ「「回転」の3つを、1つのコードで変更してみます。基本のマスクの黒色から「green」(緑色)に変更して、サイズを4倍の「4x」にして、回転させるために「spin」を追記すると、コードは、

<i class=”fas fa-mask fa-4x fa-spinstyle=”color: green;“></i>

になります。このコードをテキストの画面に入力しますと、

 

回った回った!笑。またまた大成功です。お疲れさまでした。

まとめ

CocoonでFont Awesome5アイコンの「色」や「サイズ」そして「回転」を簡単に変更できる解説でした。「ソースコード」とか「プログラム言語」とか難しいことは考えずにやると、簡単です・・・よね!笑

CSSをいじるのが苦手な方でも、この方法なら気楽にアイコンフォントをカスタマイズして使えますので、ぜひチャレンジしてください。サンプルコードを見ながら、ご自分のお好みの色やサイズを入れ替えてお楽しみください!

アイコンフォントは画像では無いので、大きくしてもキレイに表示できるのはうれしいところです。しかも、Cocoonならあっという間にFont Awesome 5が簡単に使えるようになります。

あなた様のブログのデザインも楽しくなりますように!

最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロ でした!回ってる、笑!

関連記事:Cocoon本文にWebアイコンフォントを表示する簡単カスタマイズ
関連記事:ボックスメニューを本文に表示するCocoonカスタマイズ方法
関連記事:ボックスメニューが簡単にできた!Cocoonカスタマイズ
関連記事:WordPressのショートコードを文字列のまま本文に表示させる方法

タイトルとURLをコピーしました