Engrave with!!
手彫り工房ブログ

こんにちは。

カラーミーショップの無料テンプレートから部品をいただく、その３です。
今回は、部品のCSS部分をいじっていきましょう。

↓バックナンバー
【CTC】　無料テンプレから部品をいただくその１　カラーミーテンプレート
【CTC】無料テンプレートから部品をいただくその２（カラーミーショップ）

カラーミーcssのやっかいな記述

cssには独自タグなどがあるわけでもなく至って普通です。

ただ、記述してある部分がばらけています。
どれくらいばらけているかといえば、「トップ」の項目のhtmlが「共通」の項目のcssの影響を受けていたりします。
よくわからないフォントの乱れがあったら、まずはcssが変なところに記載されていないか探したほうが良いですね。

もしそうやって振り回されるのが嫌なら、カラーミーではクラスとID名を変えることをオススメします。
やり方は簡単。ワードなどでctrl+f押して置換を選べばすぐにできます。（メモ帳だとできません。）
私はしっくりくるクラス＆ID名に変えてしまいました。

↓cssはこちら。



↓見比べるために前回のhtmlも張っておきます。



画像が小さいので、クリックしてください。
それでも小さい場合は、さらに右クリック→新しいタブで開く、をしてもらえれば見やすくなります。

先ほども書きましたが、関わってくるcssは画像のものがすべてではありません。
例えば、値段表示の.regular_price_topなどは別のところに記載されています。
気を付けましょう。

カラーミーのcssは、すべて自分で書いた方が良い

わざわざcss貼っておいてなんですが、cssについてはすべて自分で書かれることをオススメします。
先ほど書いたこともありますが、cssをそのまま記載するとブラウザを縮小したときに大きく崩れることが多いのです。
画像の大きさもmin-やmax-などをほとんど使っていなかったりしますし、写真と写真の間の空白もpxやemで指定されています。
cssはぜひご自分で記載なさってください。


それでは。