バナーにL字型の共通画像を挿入する

Question

お世話になっております。

以前にやり方をお聞きしたことがあったとは思いますが、Yahoo!ショッピング用に560×560サイズのバナー全部にL字型の共通画像を挿入したいと考えています。

例えば、560×560サイズのバナーの左と下に40サイズ幅のL字型の共通画像を一括で挿入したいです。

このやり方をご教授いただけますでしょうか？

よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 以前にやり方をお聞きしたことがあったとは思いますが、Yahoo!ショッピング用に560×560サイズのバナー全部にL字型の共通画像を挿入したいと考えています。
> 
> 例えば、560×560サイズのバナーの左と下に40サイズ幅のL字型の共通画像を一括で挿入したいです。

画像を編集されるのではなく
CSSにて、560×560サイズのバナーの上に40サイズの画像を
重ねたい、ということでお間違い無いでしょうか。

その場合、ページの構造を把握する必要がございますので
上記の対応をされたいページの
URLをご連絡いただきますよう
お願いいたします。

Answer

伊藤さん

お世話になっております。

リーダー店舗さんからアドバイスを受けたのは
CSSを使ってやるとは言っていました。

私がイメージしていたのは、560x560の左や下に
40幅の共通画像を入れるので、600x600になるのか
というものです。

前に村井さんが一括でする方法をご存知だったと
記憶しているのですが、定かではありません。

曖昧な部分もありますが、お力添えをお願いいたします。

Answer

ECマスターズの伊藤です。

> リーダー店舗さんからアドバイスを受けたのは
> CSSを使ってやるとは言っていました。

CSSを利用した方法ですね、承知いたしました。

対象のページを拝見する必要がございますので
URLをご連絡いただけますでしょうか。

> 私がイメージしていたのは、560x560の左や下に
> 40幅の共通画像を入れるので、600x600になるのか
> というものです。

背景が透過された画像をご用意いただければ、
画像を重ねることができると思いますが、
ずらして、600x600にされるのをご希望でしょうか。


なお、HTMLの記述が許可されていないなど
CSSを適用できないページの場合は
適用する事ができないため

ページによっては、対応できない場合がございますので
予めご了承くださいませ。

Answer

伊藤さん

例えば、
https://store.shopping.yahoo.co.jp/xxxx/5301001.html
の第一画像などです。

のxxxxを店舗名に替えて下さい。

よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> https://store.shopping.yahoo.co.jp/xxxx/5301001.html
> の第一画像などです。

URLのご連絡ありがとうございました。

第一画像など、とのことですが
構造によって、重ねる画像を設定しますので
ひとまず、第一画像のみ、設定するコードを
記述いたしました。

ご希望通りとなるか、ご確認くださいませ。

画像の幅、高さ、URLは
ご用意頂いた画像にあわせて
修正をお願いいたします。

li.elNew{position:relative;}
li.elNew a[data-imagegallery-show="imageGallery:1"]:after{
  width:40px; /* 画像幅 */
  height:40px; /* 画像高さ */
  background-image:url(画像URL);
  background-size:100%;
  background-repeat: no-repeat;
  content:"";
  bottom:0;
  left:0;
}

Answer

伊藤さん、コードをありがとうございます。

前にもお願いしましたが、CSSのことはさっぱりなので、
具体的に商品ページ？のどの部分に、どのように入れれば
いいか、ど素人でも分かるようにご案内頂けますか？

私だけでなく他の方々も楽しみに待っていますので、
サルでも分かるCSS設定、というイメージでお願いします＾＾

Answer

ECマスターズの伊藤です。

> 具体的に商品ページ？のどの部分に、どのように入れれば
> いいか、ど素人でも分かるようにご案内頂けますか？

下記手順にて、ご登録いただけますので
お試しくださいませ。

１）
li.elNew{position:relative;}
li.elNew a[data-imagegallery-show="imageGallery:1"]:after{
width:40px; /* 画像幅 */
height:40px; /* 画像高さ */
background-image:url(画像URL);
background-size:100%;
background-repeat: no-repeat;
content:"";
bottom:0;
left:0;
}

をメモ帳に貼り付けて
img_style.css
など、.cssファイルとして保存
※img_style.css.txt　のように、最後に.txtがつかないよう、ご注意ください。

２）
（１）で作成した.cssファイルをトリプルにアップロード

３）

を商品ページのフリースペース１等、HTMLが許可されている箇所に追加

Answer

伊藤さん

ご丁寧にありがとうございます。

再度確認ですが、添付のようなL字型部分の画像を
全商品に差し込みたいのです。
（半額のはみだしはないと想定して下さい）

この場合、幅は縦40、横40になりますが、
サイズ的には600ｘ600ということになると
思いますが、上記のCSSで差し込めるもの
なのでしょうか？

引き続きよろしくお願いします。###HR######IMG0f85cbe4e2e16382fdbff75be76e227b9.jpegIMG0######BR###

Answer

ECマスターズの伊藤です。

> 再度確認ですが、添付のようなL字型部分の画像を
> 全商品に差し込みたいのです。
> （半額のはみだしはないと想定して下さい）

こちらの部分ですが、
第一画像ににL字画像は重ねるのではなく
第一画像からはみ出してL字を追加されたい
ということでしょうか。

その場合、レイアウト上、第一画像を
縮小して 520x520にし、
L字画像を乗せるような形になると思います。

第一画像を縮小しても問題ございませんでしょうか。

Answer

伊藤さん

縮小するのがCSSで自動的にできるのであれば問題ありません。

その場合、520/560＝0.928571、、、なので、きれいに割れ切れる
28x28とか56x56の帯画像の方がやりやすいのでしょうか？

引き続きよろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 縮小するのがCSSで自動的にできるのであれば問題ありません。

承知いたしました。
それでは、先にご案内しておりましCSSを
下記に差し替えて、ご対応をお願いいたします。


body#shpBody .mdItemImage .elMain li.elNew a[data-imagegallery-show="imageGallery:1"] img{
  max-width: calc(100% - 40px);
  width:calc(100% - 40px);
}
#shpBody .mdItemImage .elMain li.elNew a{
  text-align: right;
  position:relative;
}
li.elNew a[data-imagegallery-show="imageGallery:1"]:after{
  width:560px; /* 画像幅 */
  height:560px; /* 画像高さ */
  background-image:url(L字画像のURL);
  background-size:100%;
  background-repeat: no-repeat;
  content:"";
  top:0;
  left:0;
  position:absolute;
}


> その場合、520/560＝0.928571、、、なので、きれいに割れ切れる
> 28x28とか56x56の帯画像の方がやりやすいのでしょうか？

L字の画像は、560x560の正方形で
L字以外の部分は、透明にしたものを
ご用意くださいませ。