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

手彫り工房のオフィシャルブログです。金属彫ってます。彫ってます。

【CTC】無料テンプレートから部品をいただくその3(カラーミーショップ)

2016
21
こんにちは。

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

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


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


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

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

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

↓cssはこちら。
CTC カラーミーショップテンプレートの部品(css)


↓見比べるために前回のhtmlも張っておきます。
CTC カラーミーショップテンプレートの部品


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

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


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


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


それでは。