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

こんにちは。

ハンドメイドや手作り品を本格的に販売したい方にお勧めのカラーミーショップ。

今回はいよいよ無料テンプレートの部品をいじっていきましょう。
前回同様、最近チェックした商品の部品を見ていきます。


見ていくのはhtmlです。
cssはまた次回。

テンプレート部品を丸裸にしよう。

まずはどこに何が書いてあるかが大切です。
何がどうなっているかを考えて、カラーミーテンプレートを丸裸にしていきましょう。

↓小さいので、クリックしてください。


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

画像の大きさなどはcssで調整していきましょう。
青文字で書いてあるのはｃｓｓで対応するクラスやIDなので、そこをいじってやれば大きさや色などが変え放題です。

必要な所、いらない所

さぁまずは必要なところといらないところを考えていきましょう。
例えば、私の場合は値段表示はしなくていいかなと思ったので、値段表示の部分をバッサリ消してます。
このように、必要ないところはきっちりバッサリ削除しましょう。

削除するときには、divや/divなどセットになっているタグの数が合っているかを確認してください。

$historyにかかわる部分

$historyはカラーミーショップの独自タグというやつです。
最近チェックした商品画像を表示、なんて難しそうなことが数行だけで済んでいるのは、この独自タグのおかげです。

if部分を見出すとゴチャゴチャするので、大切な部分だけいきます。

図でもありますが、まずここで重要なのはmax=10という部分です。
この１０という数字は、チェックした画像や名前を最大10件まで表示するよ、ということです。

もし、あなたが商品画像を10表示したいのならこのままでOKです。
私は5画像までにしたかったので、max=5に変えました。

$historyを変えると・・。

この$historyのおかげで、最近チェックした画像になります。
じゃあ、$history以外には何かないのか？というと、あります。
このhistoryを全部他のものにすると表示するものを簡単に変えることができます。

$historyなど、カラーミー独自タグ一覧はこちら

例えば、売れ筋商品を表示したい場合。
htmlの$historyをすべて$sellerに変えるだけです。楽チン！

一つ一つ打ち直すのは面倒なので、wordなどの置換機能を使うと楽です。
ctrl+fで検索機能と一緒にでてくるので、試してみてはいかがでしょう。


次回はcssです。
それでは。