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