カラーミーショップのカートの中のステップ画像を変更する方法

古い記事のため現在とは状況が異なる場合があります。ご注意ください。

カラーミーショップのカートの中の買い物のステップ画像（カートの中、お客様情報の入力、配送設定の入力、お支払い方法の設定、確認、完了）の画像を差し替える方法です。

該当部のHTMLコードは以下の通りです。

<div id="shopping_step">
<img src="https://secure.shop-pro.jp/img2/regi_step0.gif" alt="" />
</div>

ステップに応じてGIFファイルのファイル名が変わります。（regi_step0.gif、regi_step1.gif…というように）ステップが進むたびに親のdivのclass名を変えてくれていれば簡単にCSSで設定できるのですが、そうなっていないので今回は少し別のアプローチを取る必要があります。

カラーミーショップではhttps内のコンテンツのHTMLコードを変更することはできないので、CSSだけを変更してステップ用の画像を変える必要があります。カート内のCSSに以下のコードを変更・追加します。画像のURLは適宜設定してください。

#shopping_step {
text-indent:-999em;
}
#shopping_step img {
width:800px;height:0;
padding: 42px 0 0 0;
display:block;
}
#shopping_step img[src="https://secure.shop-pro.jp/img2/regi_step0.gif"] {
background: url('ステータスがカートの中になっている画像のURL')no-repeat;
}
#shopping_step img[src="https://secure.shop-pro.jp/img2/regi_step1.gif"] {
background: url('ステータスがお客様情報の入力になっている画像のURL')no-repeat;
}
#shopping_step img[src="https://secure.shop-pro.jp/img2/regi_step2.gif"] {
background: url('ステータスが配送設定の入力になっている画像のURL')no-repeat;
}
#shopping_step img[src="https://secure.shop-pro.jp/img2/regi_step3.gif"] {
background: url('ステータスがお支払い方法の設定になっている画像のURL')no-repeat;
}
#shopping_step img[src="https://secure.shop-pro.jp/img2/regi_step4.gif"] {
background: url('ステータスが確認になっている画像のURL')no-repeat;
}
#shopping_step img[src="https://secure.shop-pro.jp/img2/regi_step5.gif"] {
background: url('ステータスが完了になっている画像のURL')no-repeat;
}

画像のURLが変わったことでステータスを判別し表示する画像を切り替えるという仕掛けです。