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

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

 

 

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

 

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

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

 

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

 

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

 

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

 

 

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

22時限の復習になりますが、まずは普通にアイコンを表示させる所から。

IcoMoonのサイトへ行き使いたいアイコン「a」「b」を選択

 

右下の「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」をコピペして「{」と「}」の間に4つの項目を書きました。

 


1段目:フォントサイズ80ピクセルとはアイコンの大きさの指示です。
2段目:カラー#000000は色の指示でこれは黒です。
3段目:横の文字との間にスペースを空けました。アイコンから見て右側に10ピクセルという指示です。
4段目:アイコンの垂直方向の位置です。他にbottom、baseline、topなど文字との揃えが変わります。

 

ちなみに先程のHTMLを文字の前でなく後ろにコピペすると、、

 

こう表示されます。

 

では新色「グレーの飯ごう」も表示したい時の今までのやり方です。

ビジュアルの方で「黒の飯ごう」と同じように紹介文を書いて

 

テキストに切り替えてIcomoonのHTMLをコピペし

 

カスタムCSSにCSSも一部コピペ。内容を同じように書き色のみグレーを指示する#a8a7a7と書き換えました。

 

グレーの飯ごうbが表示されました。

 

ここから今回の本題です。

今黒で表示されている「飯ごうa」を赤、黄色など別の色でも同時に表示させます。

 

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

ここポイントです。
「赤い飯ごう」と「黄色い飯ごう」は「黒い飯ごう」の「icon-hango_a」の後ろに半角スペースを空けてそれぞれhango-redhango-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円で承ります。ご覧のサイトの「お問い合わせ」からもご相談ください◎

 

コメントを残す

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