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

1つのアイコンフォントをWordPressの投稿記事の同じページ内で色違いやサイズ違いで使う方法です。

 

 

プログラミング1年生 21時限：WordPressにIcoMoonで作ったアイコンフォントを入れる方法_前編 と
22時限：WordPressにIcoMoonで作ったアイコンフォントを入れる方法_後編までの解説ですと同じページ内ではアイコンaを赤にしたらずっと赤、サイズ20ピクセルにしたらずっと20ピクセルのままでした。

 

色数、サイズが増えてもすぐに対応できます

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

 

形状が違うなら分かるけど同じ形状なら色違いはこんなふうに１つのアイコンを使い回せる方が便利ですよね。サイズも同様に対応できます◎

 

 

 

 

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

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と書き換えれば良いのです。

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

 

 

 

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

色違いが出来たらサイズ違いも簡単です。復習のつもりで◎

「黄色い飯ごう」のLサイズを作ります。

 

yellowの飯ごうにLサイズの「_l」と識別しやすいclass名（yellow_l）を付けました。CSSはこれを使います。

 

対応するCSSを書きます。

.yellow_lから書き始めfont-size: 100px; など好みの大きさにします。
保存してサイズ違いも完成です。

 

お疲れ様でした◎

 

 

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

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

 

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

 

 

---

CSSの擬似要素でアイコンを表示する方法