webアイコンフォントを色違い、サイズ違いで表示
1つのwebアイコンフォント(以下:アイコン)をWordPressの投稿記事の同じページ内で色違いやサイズ違いで使う方法です。
プログラミング1年生 21時限:WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_前編 と
22時限:WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_後編までの解説ですと同じページ内ではアイコンaを赤にしたらずっと赤、サイズ20ピクセルにしたらずっと20ピクセルのままでした。
色数、サイズが増えてもすぐに対応できます
「飯ごうa」は黒で80px(サイズ)と決めたらこのページ内では何個表示してもずっと黒、80pxです。なのでグレーの飯ごうも欲しいと思ったらもう1つグレー用の「飯ごうb」を用意する必要がありました。「飯ごうa」「飯ごうb」2つ用意しないと黒とグレーで同時に表示できなかったのです。
形状が違うなら分かるけど同じ形状なら色違いはこんなふうに1つのアイコンを使い回せる方が便利ですよね。サイズも同様に対応できます◎
青い商品:残り3つ
赤い商品:残り1つ
黄色い商品:在庫なし
1. webアイコンフォントを色違いで使う方法
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-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円で承ります。ご覧のサイトの「お問い合わせ」からもご相談ください◎