画像と画像の隙間を埋めたい

Question

お世話になります。
PCの方なのですが、画像との間に隙間が出来ます。
そちらを解消したいのですが

https://forum.ec-masters.net/post_view.php?id=6627

こちらの指示を入れてみても解決しませんでした。

一度見て頂けますか？
ページ上部のクーポン画像です。

https://item.rakuten.co.jp/★/c/0000000161/

Accepted Answer

ECマスターズの伊藤です。

> ありがとうございます。入れてみましたが、、、特に変わらず、、

ご対応くださいましてありがとうございます。
ページですが、先日と同様の
https://item.rakuten.co.jp/★/c/0000000170/
でお間違いないでしょうか。

ページを確認させていただいたところ
＝＝＝＝＝＝＝＝＝＝＝＝
.category_uppertext table,
.category_uppertext table td{
margin:0;
padding:0;
border-collapse:collapse;
}
＝＝＝＝＝＝＝＝＝＝＝＝
の記載が見当たりませんでした。

お手数ですが、再度、修正くださいますよう、お願いいたします。

対応したページが異なる場合は、ページのURLをご連絡いただけますでしょうか。

どうぞよろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 一度見て頂けますか？
> ページ上部のクーポン画像です。

黄色い背景の、クーポン同士の隙間
【20%OFF】
ここ
【10%OFF】
ここ
【5%OFF】
を埋めたいということでよろしいでしょうか。

こちらですが、黄色い背景も含めて画像となっておりますので、
画像より、上下の黄色い部分を削除して頂く必要がございます。


修正希望の箇所が上記と異なるようでしたら
お手数ですが、削除したい箇所の詳細を
ご返信くださいますよう、お願いいたします。

Answer

ありがとうございます。
その部分です。黄色の背景も画像です。

黄色の部分を画像から削除するのであれば、隙間を埋めてピッタリさせることは不可能ということですか？

Answer

ECマスターズの伊藤です。

> その部分です。黄色の背景も画像です。
> 
> 黄色の部分を画像から削除するのであれば、隙間を埋めてピッタリさせることは不可能ということですか？

画像と画像の間に隙間が出きてしっまって、そちらを削除されたいようであれば、
ご覧頂いたフォーラムのように、スタイルシートでご対応いただけます。
今回は、背景を含めた画像同士はくっついていて、その画像に配置されているクーポン同士をつなげたい、
ということですので、画像加工にて背景の不要な部分を削除していただく必要がございます。

Answer

ありがとうございます。

背景の不要な部分というのは黄色の背景の事でしょうか？
隙間の空洞は画像ではないです。

黄色の背景も含めてひっつけたいのですが、、

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
全商品ページで同じ作業をするのが面倒な場合、
ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）の中に
下記タグを加えることで、
全商品ページ共通で隙間の設定を上書きして無くすことができます。


/* 商品説明文の画像の隙間を無くす */
body #item-cont-re .img-box { margin-bottom: 0; }

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

こちらを入れてみてますが、変化ありませんでした。

Answer

ECマスターズの伊藤です。

> 背景の不要な部分というのは黄色の背景の事でしょうか？
> 隙間の空洞は画像ではないです。

失礼致しました。空洞が存在しているのですね。
ーーーーーーーーーーー
【20%OFF】
黄色背景
ここに空洞
黄色背景
【10%OFF】
黄色背景
ここに空洞
黄色背景
【5%OFF】
黄色背景
ーーーーーーーーーーー
となっているということでよろしかったでしょうか。

お手数ですが、ご確認頂いている、ブラウザ（GoogleChromeなど）と
可能であれば、スクリーンショットをいただけますでしょうか。

お手数おかけ致しますが、よろしくお願いいたします。

Answer

そうですそうです！縦続きの画像は隙間がないのですが、
横3つ画像を並べたものは隙間が出来てしまいました。###HR######IMG0baa64f07a2b89598f05acd82f4eb8276.jpegIMG0######BR###

Answer

ECマスターズの伊藤です。

スクリーンショットのご連絡ありがとうございました。

> 横3つ画像を並べたものは隙間が出来てしまいました。

横に並べたときに隙間ができてしまうのですね。
実際のソースを拝見させていただきたいと思いますので
掲載したページのURLを頂戴できますでしょうか。

度々お手数おかけいたしますが、よろしくお願いいたします。

Answer

こちらこそ、失礼しました、問題のカテゴリに入る前のカテゴリ案内しておりました。

https://item.rakuten.co.jp/★/c/0000000170/

こちらです。

Answer

ECマスターズの伊藤です。

掲載ページのURLありがとうございました。

/* 商品説明文の画像の隙間を無くす */
とご入力頂いている箇所に
＝＝＝＝＝＝＝＝＝＝＝＝
.category_uppertext table,
.category_uppertext table td{
margin:0;
padding:0;
border-collapse:collapse;
}
＝＝＝＝＝＝＝＝＝＝＝＝
を追加していただけますでしょうか。

現在ご入力頂いている
＝＝＝＝＝＝＝＝＝＝＝＝
body #item-cont-re .img-box { margin-bottom: 0; }
＝＝＝＝＝＝＝＝＝＝＝＝
が、クーポン部分の空洞をなくすためにご入力頂いたものであれば、
不要となりますので、削除頂いて問題ありません。

Answer

ありがとうございます。入れてみましたが、、、特に変わらず、、