THETHORのアイコンをカスタマイズする方法!!【サイズ・色】

 
マーシー
この記事ではTHETHORの「アイコンのカスタマイズ方法」について紹介しているよ!!

カスタマイズ方法について

 
マーシー
まずはアイコンをカスタマイズする方法について紹介するね!!

アイコンのカスタマイズ方法としては、CSSコードを使って全体を変更するか、HTMLコードを使って部分的に変更するかの2種類になります。

カスタマイズ方法
・CSSコードで全体を変更する。
・HTMLコードで部分的に変更する。

値に関しては参考で「#000000」「10px」としていますが、カスタマイズしたい内容に合わせて変更して下さい!!

アイコン色の変更

全体のカスタマイズ

CSS

.アイコンクラス名 {
color: #000000;
}


STEP①

上記追加CSSのセレクタ部分「.アイコンクラス名」にカスタマイズしたいアイコンのクラス名を入力します。

※CSSコードの場合はクラス名の前に「.」ドットを付ける必要があるよ!!

STEP②

「{}」の中にカスタマイズしたい内容のプロパティと値を入力します。ここでは色をカスタマイズするので「color: #000000;」になります。


STEP③

色に関するプロパティ値は基本的には「#RRGGBB形式」もしくは「色の名前」で指定します。


部分的なカスタマイズ

HTML

<span class=”クラス名” style=”color: #000000;”></span>

HTML要素は「p」「div」「span」の3種類がありますが、カスタマイズで使用するのは改行無の「span」を使用するのがオススメです。


STEP①

上記HTMLの「クラス名」部分にカスタマイズしたいアイコンのクラス名を入力します。


STEP②

カスタマイズしたい内容を「style」要素を使用して入力します。ここでは色をカスタマイズするので「style=”color: #000000;”」になります。


STEP③

色に関する値はCSSコードと同様に「#RRGGBB形式」もしくは「色の名前」で指定します。


アイコンサイズの変更

全体のカスタマイズ

CSS

.アイコンクラス名 {
font-size: 10px;
}


STEP①

上記追加CSSのセレクタ部分「.アイコンクラス名」にカスタマイズしたいアイコンのクラス名を入力します。

※CSSコードの場合はクラス名の前に「.」ドットを付ける必要があるよ!!

STEP②

「{}」の中にカスタマイズしたい内容のプロパティと値を入力します。ここではサイズをカスタマイズするので「font-size: 10px;」になります。


STEP③

サイズに関するプロパティ値は基本的には絶対値で指定する「px」、相対値で指定する「em」を使用します。ちなみに「em」は「%」と同じで「1em=100%」です。

部分的なカスタマイズ

HTML

<span class=”クラス名” style=”font-size: 10px;”></span>


STEP①

上記HTMLの「クラス名」部分にカスタマイズしたいアイコンのクラス名を入力します。


STEP②

カスタマイズしたい内容を「style」要素を使用して入力します。ここではサイズをカスタマイズするので「style=”font-size: 10px;”」になります。


STEP③

サイズに関する値はCSSコードと同様に「px」もしくは「em」で指定します。


一括でカスタマイズ

 
マーシー
アイコンに関する色・サイズのカスタマイズ方法をそれぞれ分けて紹介しましたが、コードは一括で指定してもOKだよ!!

全体のカスタマイズ

CSS

.アイコンクラス名 {
color: #000000;
font-size: 10px;
}

「{}」の中にカスタマイズしたい内容のプロパティと値をまとめて入力します。

色とサイズを一括して指定する場合は「color: #000000;」「font-size: 10px;」になります。

部分的なカスタマイズ

HTML

<span class=”クラス名” style=”color: #000000;font-size: 10px;”></span>

カスタマイズしたい内容を「style」要素を使用してまとめて入力します。

色とサイズを一括して指定する場合は「style=”color: #000000;font-size: 10px;”」になります。

参考

 
マーシー
上手くカスタマイズできたかな?最後に参考を一つ載せておくね!!

参考・・・アイコンクラス名「icon-notification」文字の色は「#ff6347」「#008080」「#1e90ff」の3色、文字サイズ「30px」でカスタマイズしてみたらこんな感じになったよ!!

  
\ 合わせて読みたい!!  /