売切れ時の”在庫なし

Question

お世話になります。商品が売切れた時、"在庫なし"の赤文字が画像近くに自動表示されますが、お客様がひと目で区別できるように、透ける"SOLD OUT"の帯を画像の真ん中に置きたいと思っています。そして、再入荷した時にはすぐにその帯をはずして元の画像に戻したいのです。Canonのデジカメ用ImageBrowserEXの編集モードでは文字挿入はできますが、帯を載せる機能は見当たりません。html等初心者です。どの様にすれば良いでしょうか？どうぞ、よろしくご教示ください。

Answer

ECマスターズの田中です。

「在庫なし」の赤文字を画像に変更して、
商品画像に重なるよう表示させる方法があります。

最初に、帯となる画像を
縦140ピクセル・横140ピクセル、白背景で
作成していただき、
R-Cabinet（または楽天GOLD）に保存し、
画像URLを取得してください。

次に、以下のHTMLタグを
ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）の中に
挿入していただくと、
在庫切れ商品の商品画像の上に、
作成していただいた帯画像が重なって表示されます。

===== この下の行から ================

/* カテゴリページ内在庫切れ商品に帯画像を載せる */
a.category_itemnamelink {
    font-size: 12.8px;
    line-height: 19px;
    overflow: hidden;
    height: 57px;
    display: block;
}
span.not {
    background: url(画像URL) center no-repeat white;
    font-size: 1px;
    display: block;
    width: 140px;
    height: 140px;
    margin-bottom: 100px;
    margin-left: 0px;
    text-indent: -9999px;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    margin-top: -258px;
    -ms-filter: "alpha(opacity=70)";
    -khtml-opacity: 0.7;
    -moz-opacity: 0.7;
    opacity: 0.7;
}

===== この上の行まで ================
※画像URLは、実際の帯画像のURLに置き換えてください。

Answer

ECマスターズの橋本です。

＞お客様がひと目で区別できるように、透ける"SOLD OUT"の帯を画像の真ん中に置きたいと思っています。

売切れは売切れですが、改めて画像で売切れをアピールして機会を損失させるよりは、
次回の案内時に購入していただけるように、以下の機能を活用することをおススメします。

再入荷のお知らせ機能
https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=rms/rb/order/43.html&s=&param2=0

Answer

田中様、橋本様
技術と戦略の両面から考えなければならないということですね。
在庫切れ時の透過画像表示も出来ましたし、"再入荷お知らせボタン"も幾つかの商品ページに付けてみました。
目から鱗が落ちました、有難うございます。

田中様への更なる質問です。
Q1: 帯画像のピクセルですが、サイズ変更で140 x 140と設定しても自動的に変わってしまいます。
見栄えに問題がなければ、HTMLの数字は変更しなくても大丈夫でしょうか？
Q2: PCへのHTMLタグは共通説明文に載せました。スマホへのHTMLタグはどの欄に載せればいいですか？

橋本様への更なる質問です。
Q1: 仕入先にも在庫がなく廃番となってしまえば、その商品ページは"削除"ですね？

初歩的な質問かもしれませんが、よろしくお願いいたします。

Answer

ECマスターズの橋本です。

＞Q1: 仕入先にも在庫がなく廃番となってしまえば、その商品ページは"削除"ですね？

廃盤となっていたとしても、商品はお店への入り口となるものです。
仮に似たような商品の取り扱いがあれば、その商品ページから誘導させるなどをすれば、
お客さんが検索して、その商品ページに訪れたとしても、機会を損失することはないですよね。

以下にても解説しておりますのでご参照いただければと思います。

https://ec-masters.club/forum/post_view.php?id=1374

Answer

ECマスターズの田中です。

＞Q1: 帯画像のピクセルですが、サイズ変更で140 x 140と設定しても自動的に変わってしまいます。
＞見栄えに問題がなければ、HTMLの数字は変更しなくても大丈夫でしょうか？
画像作成ソフトにて、自動で文字のサイズに保存されてしまうということでしょうか。
商品画像の140x140の領域の中央に配置される設定のため、
縦幅が小さくても、HTML数字を調整することなく中央に配置されられますので
ご安心ください。
なお、背景色に white を指定すると、画像全体に対して、透ける効果が適用されます。
1回目の返信にて、span.not { の1つ下の行を修正しましたので
再度、修正をお試しいただけますでしょうか。

＞Q2: PCへのHTMLタグは共通説明文に載せました。スマホへのHTMLタグはどの欄に載せればいいですか？
スマートフォン用ページにつきましては、
カテゴリページの商品一覧にて、各商品が売り切れているかどうか、
HTML内部でも見分けがつかないため、
売り切れ商品を狙って帯画像をつけることができません。