webアイコンフォントを色違い、サイズ違いで表示

1つのwebアイコンフォント(以下:アイコンフォント)を同じページ内で色違いやサイズ違いで使う方法です。

 

 

プログラミング1年生 21時限:WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_前編 
22時限:WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_後編までの解説ですと同じページ内ではaというアイコンは1つの決まった色、1つの決まったサイズしか使えませんでした。(他の条件も付けられます)

 

 

「飯ごうa」と「飯ごうb」を2つ用意しないと黒とグレーで同時に表示できなかったのです。

「飯ごうa」は黒で80px(サイズ)と決めたら、このページ内では何個表示してもずっと黒、80pxです。なのでグレーも欲しいと思ったらもう1つグレー用の「飯ごうb」を用意する必要がありました。

 

形状が違うならまだしも同じ形状なら色違い、サイズ違は1つのアイコンを使い回せる方が便利ですよね。色数が増えてもすぐに対応できます◎

 

色違いで使う
青い商品:残り3つ
赤い商品:残り1つ
黄色い商品:在庫なし

 

サイズ違いで使う
ギフトBOX:Sサイズ 100円
ギフトBOX:Mサイズ 150円
ギフトBOX:Lサイズ 180円

 

 

1. webアイコンフォントを色違いで使う方法

 

1つのアイコンを色違いで表示します。

 

IcoMoonのページへ行き、カーソルを合わせると出てくる Get Code をクリックします。

ここまではプログラミング1年生21時限22時限をご参照ください。

 

 

HTMLとCSSのコードを少し書き換えます

 

小窓が出てきます。HTMLとCSSのコードを使います。

 

 

まずはHTMLから。WPの投稿画面はテキストに切り替えます。

”ダークブルー”の左右に分けてコピペします。”新色ダークグリーン〜”も同じようにします。

 

 

好きな名前のclassを追加します

ここポイントです。
「icon-hango_a」と言う1つのアイコンフォントに別々の名前bluegreenを追加する事で
「icon-hango_a blue」と「icon-hango_a green」2つのアイコンフォントが出来ました。

 

これをプログラミング用語で”classを追加する”と言います

名前(class)は半角英数なら何でもいいんだよね

そうよ。でも後々分かり易い方が良いわよ

 

 

CSSを書きます

次はこれに対して”こんな色にして”と指示するためのCSSを書きます。

Get codeのCSSをWP投稿画面のカスタムCSSの欄にコピペします。(2つペーストしてください)

 

カスタムCSSの欄が無い場合はプラグインで入れます。→CSSコードが書けるプラグインを入れる

 

 

「.icon-hango_a」の部分を先程名前を付けた「.blue」と「.green」にそれぞれ書き換えます。

頭に付く「.」も忘れずに!

そして好きな色のコードcolor: #125180;など書き加えます。

色のコードは調べればたくさん出てきます◎

原色大辞典など。

WPを保存します。色違い完成です。

 

 

 

webアイコンフォントをサイズ違いで使う方法

 

色違いが出来たらサイズ違いもほぼ同じですが復習のつもりで◎

 

 

IcoMoonのGet codeを押してHTMLをコピペ。それぞれsmall、largeなど識別しやすい名前(class)を付けます。

 

それに対応するCSSを書きます。

コピペして.small  .largeにそれぞれ書き換えfont-size: 90px; など好みの大きさを書き加えます。
保存してサイズ違いも完成です。

 

 

応用:色違い、サイズ違いを同時に

 

CSSには複数の指示を書く事が出来るのでもちろん色、サイズも同時に書けます。

例えばこの2つのアイコンフォントのCSSは以下です。

 

名前は分かり易く.blue-small .green-large としました。(テキストにコピペしたHTMLの方も blue-small 、green-largeを追加しています)

 

ここまでで解説したサイズ、色の他に「アイコンフォントの右側を10px空ける」「アイコンフォントと文字の横ラインを中央で合わせる」の指示もしています。

 


 

webアイコンフォント制作します

無料・有料のアイコンやWebフォントは便利で私も使っています。 でも、デザインや見易さにこだわればこだわるほど御社独自の製品、サービスのアイコン が欲しいと感じませんか。

 

スキルのオンラインマーケットcoconala(ココナラ)にて4つで17,000円で承ります。ご覧のサイトの「お問い合わせ」からもご相談ください◎

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です