カテゴリを追加したい！カラーミーショップのBit（無料テンプレート）で第二回目！！
2016
15
こんにちは。
前回はカテゴリを追加するのに、検索を使えばよい、というとこまでいきました。
実は別解として、カテゴリ部分を他のテンプレから持ってきても多分イケます。
イケる気がする、多分、たぶん・・・。
そのうち挑戦してできたら、紹介したいですね。
このBit、実はレスポンシブルなテンプレートというやつです。
レスポンシブルとは、PCでもスマホでも両方使えるテンプレートという意味です。
一粒で2度おいしい。
私はまずPC用カテゴリを作ってからスマホ用を作ることにしました。
なぜかといえば、PC用は使うCSSがだいたいわかっていたためです。
カテゴリはドロップリストという形式で作りました。
↓Categoryにマウスオンでうにょ～んとでてきます。
このドロップリストを作るうえでCSSの疑似クラスというのが必要になってきます。
疑似クラスの詳しい説明はしませんが、今回使う「:hover」とニョロニョロ「~」については適宜説明・・・できたらいいなぁ。
（私は詳しい人ではないので、不安（笑））
htmlはそんなに難しくありません。
↓見にくかったらクリックして下さい。
赤字が追加したところです。
keyword=の後ろにRINGやNECKLACEが書かれているのはわかりますかね。
つまり、RINGやNECKLACEの検索結果へのリンクをカテゴリの代用にしています。
すなわち、各商品ページにRINGやNECKLACEという文字を追加しないとでてきません。
これが、相当めんどくさかった（涙）
内部検索用RING、という白文字を黙々と追加していく作業は、在りし日の受験勉強を思い出しましたね。
ちなみに、背景と同じ文字を入れるのは一応あまりよろしくはありません。
堂々と普通の文字で、コソコソと目立たないところに記入してもよかったかもしれませんね。
HTMLでやったことといえば、categoryを加えて、一番下にulでリストを加えただけです。
ポイントはcategoryのすぐ下にulのリストを入れないことです。
一番下に入れないと、そこで改行してエライことになります。
ところで、HTML画像の緑文字に気づかれましたか？
このクラス名にすると、スマートフォンでは表示されなくなります。
もし、PCだけで表示したいものがあったときに使えそうですね。
ただ、ウインドウを小さくするだけでもスマートフォン判定されるので、そこは注意が必要です。
今回はここまで。
次回はいよいよCSSを使います！
前回はカテゴリを追加するのに、検索を使えばよい、というとこまでいきました。
実は別解として、カテゴリ部分を他のテンプレから持ってきても多分イケます。
イケる気がする、多分、たぶん・・・。
そのうち挑戦してできたら、紹介したいですね。
まずはPC用のカテゴリから
このBit、実はレスポンシブルなテンプレートというやつです。
レスポンシブルとは、PCでもスマホでも両方使えるテンプレートという意味です。
一粒で2度おいしい。
私はまずPC用カテゴリを作ってからスマホ用を作ることにしました。
なぜかといえば、PC用は使うCSSがだいたいわかっていたためです。
疑似クラスでいこう。「:hover」と「~」間接セレクタ
カテゴリはドロップリストという形式で作りました。
↓Categoryにマウスオンでうにょ～んとでてきます。
このドロップリストを作るうえでCSSの疑似クラスというのが必要になってきます。
疑似クラスの詳しい説明はしませんが、今回使う「:hover」とニョロニョロ「~」については適宜説明・・・できたらいいなぁ。
（私は詳しい人ではないので、不安（笑））
これがhtml、クラス名は突っ込まないで（笑）
htmlはそんなに難しくありません。
↓見にくかったらクリックして下さい。
赤字が追加したところです。
keyword=の後ろにRINGやNECKLACEが書かれているのはわかりますかね。
つまり、RINGやNECKLACEの検索結果へのリンクをカテゴリの代用にしています。
すなわち、各商品ページにRINGやNECKLACEという文字を追加しないとでてきません。
これが、相当めんどくさかった（涙）
内部検索用RING、という白文字を黙々と追加していく作業は、在りし日の受験勉強を思い出しましたね。
ちなみに、背景と同じ文字を入れるのは一応あまりよろしくはありません。
堂々と普通の文字で、コソコソと目立たないところに記入してもよかったかもしれませんね。
HTMLでやったことといえば、categoryを加えて、一番下にulでリストを加えただけです。
ポイントはcategoryのすぐ下にulのリストを入れないことです。
一番下に入れないと、そこで改行してエライことになります。
ところで、HTML画像の緑文字に気づかれましたか？
このクラス名にすると、スマートフォンでは表示されなくなります。
もし、PCだけで表示したいものがあったときに使えそうですね。
ただ、ウインドウを小さくするだけでもスマートフォン判定されるので、そこは注意が必要です。
今回はここまで。
次回はいよいよCSSを使います！