webアイコンフォントを色違い、サイズ違いで表示
1つのwebアイコンフォント（以下：アイコン）をWordPressの投稿記事の同じページ内で色違いやサイズ違いで使う方法です。
プログラミング1年生 21時限：WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_前編 と
22時限：WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_後編までの解説ですと同じページ内ではアイコンaを赤にしたらずっと赤、サイズ20ピクセルにしたらずっと20ピクセルのままでした。
色数、サイズが増えてもすぐに対応できます
「飯ごうa」は黒で80px（サイズ）と決めたらこのページ内では何個表示してもずっと黒、80pxです。なのでグレーの飯ごうも欲しいと思ったらもう１つグレー用の「飯ごうb」を用意する必要がありました。「飯ごうa」「飯ごうb」2つ用意しないと黒とグレーで同時に表示できなかったのです。
形状が違うなら分かるけど同じ形状なら色違いはこんなふうに１つのアイコンを使い回せる方が便利ですよね。サイズも同様に対応できます◎
青い商品：残り3つ
赤い商品：残り1つ
黄色い商品：在庫なし
1. webアイコンフォントを色違いで使う方法
22時限の復習になりますが、まずは普通にアイコンを表示させる所から。
IcoMoonのサイトへ行き使いたいアイコン「a」「ｂ」を選択
右下の「Generate Font」をクリック
カーソルを持っていくと赤く「Get Code」と出るのでクリックします。
ここまで詳しくはプログラミング1年生の21時限、22時限をご参照ください。
HTMLとCSSのコードを使います
出てきた小窓の中の
HTMLとCSS（の一部）のコードをコピペして使います。
WordPressの管理画面から投稿記事を開きます。
まずはHTMLから。投稿画面のビジュアルにはこんなふうに書きました。
プレビューで表示させるとこんな感じです。まだアイコンはありません。
では投稿画面に戻ってテキストに切り替えます。IcomoonのHTMLのコードを「飯ごうa 定番の黒」の文字の前にまるっとコピペします。
今こうゆう状態です。更新（保存）してプレビューして見ると、、
飯ごうのアイコンaが表示されました。
CSSを書きます
こう表示するためにはCSSのコードも一部使います。
その前にCSSのコードを書くためのプラグインを入れる説明をご一読の上、CSSを書けるプラグインを何かしら入れてください◎
WP Add Custom CSSがインストール出来たら投稿のページの下に「カスタムCSS」というCSSを書くスペースが表示されます。
そこにIcomoonのCSSの「.icon-hango_a」をコピペして「{」と「}」の間に４つの項目を書きました。
１段目：フォントサイズ80ピクセルとはアイコンの大きさの指示です。
２段目：カラー＃000000は色の指示でこれは黒です。
３段目：横の文字との間にスペースを空けました。アイコンから見て右側に10ピクセルという指示です。
４段目：アイコンの垂直方向の位置です。他にbottom、baseline、topなど文字との揃えが変わります。
ちなみに先程のHTMLを文字の前でなく後ろにコピペすると、、
こう表示されます。
では新色「グレーの飯ごう」も表示したい時の今までのやり方です。
ビジュアルの方で「黒の飯ごう」と同じように紹介文を書いて
テキストに切り替えてIcomoonのHTMLをコピペし
カスタムCSSにCSSも一部コピペ。内容を同じように書き色のみグレーを指示する#a8a7a7と書き換えました。
グレーの飯ごうｂが表示されました。
ここから今回の本題です。
今黒で表示されている「飯ごうa」を赤、黄色など別の色でも同時に表示させます。
好きな名前のclassを追加します
ここポイントです。
「赤い飯ごう」と「黄色い飯ごう」は「黒い飯ごう」の「icon-hango_a」の後ろに半角スペースを空けてそれぞれhango-red、hango-yellowを追加しています。これをプログラミング用語で”classを追加する”と言います
名前（class）は半角英数なら何でもいいんだよね
そうよ。でも後々分かり易い名前の方が良いわよ（なので今回はredとyellowにしています）
「赤い飯ごう」と「黄色い飯ごう」のCSSの書き方です。先程”classを追加”した.hango-redと.hango-yellowで書き始めます。頭の「.」も忘れずに。
そして好きな色のコードcolor: #f44336;など書き変えます。
色のコードは調べればたくさん出てきます◎
原色大辞典など。
ちなみにclass名の追加はHTMLとCSSが同じで対応していれば良い訳で、先程のHTMLのhango-redを redと書き換えたらCSSの方も.redと書き換えれば良いのです。
webアイコンフォントをサイズ違いで使う方法
色違いが出来たらサイズ違いも簡単です。復習のつもりで◎
「黄色い飯ごう」のLサイズを作ります。
yellowの飯ごうにLサイズの「_l」と識別しやすいclass名（yellow_l）を付けました。CSSはこれを使います。
対応するCSSを書きます。
.yellow_lから書き始めfont-size: 100px; など好みの大きさにします。
保存してサイズ違いも完成です。
お疲れ様でした◎
webアイコンフォント制作します
無料・有料のアイコンやWebフォントは便利で私も使っています。 でも、デザインや見易さにこだわればこだわるほど御社独自の製品、サービスのアイコン が欲しいと感じませんか。
スキルのオンラインマーケットcoconala（ココナラ）にて4つで17,000円で承ります。ご覧のサイトの「お問い合わせ」からもご相談ください◎
