- ベストアンサー
リンク付き商品画像を並べて貼りたい
- ネットショップで商品画像をリンク付きで並べるための方法について教えてください。
- 初心者でも分かりやすく、要点を押さえた方法を教えていただけますか？
- また、商品画像同士の間にはスペースを空ける方法も知りたいです。
- papimaru
- お礼率71% (109/152)
- その他（インターネット・Webサービス）
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
torayoshiです。 画像間の間隔が空かないのと下にずれる症状なんですが、 残念ながら私の環境下では再現出来ませんでした。 動作確認ブラウザ：IE5～8 Firefox3.5.5 Windows 7RC なので、私としてはどうすることも出来ません。 もう一度精査して再確認してもらうか、それでも解決しない場合は 別の方法としてテーブル組にするしかないと思います。 例 <!--上段のソースここから--> <table border="0"> <tr> <td><div style="padding:5 5 5 5;border-style:solid;border-width:1;border-color:#c1c1c1;"> <a href="リンク先URL"> <img src="商品画像URL" width="150" height="150" border="0" alt="商品の説明"></a></div> </td> <td width="30"> </td> <td> <div style="padding:5 5 5 5;border-style:solid;border-width:1;border-color:#c1c1c1;"> <a href="リンク先URL"> <img src="商品画像URL" width="150" height="150" border="0" alt="商品の説明"></a></div> </td> </tr> </table> <!--上段のソースここまで--> <!--下段のソースここから--> <!--※注意→<p>は便宜上見やすくするためのインデントなので省略可--> <p> <table border="0" align="left" style="margin-right:30;"> <tr> <td><div style="padding:5 5 5 5;border-style:solid;border-width:1;border-color:#c1c1c1;"> <a href="リンク先URL"> <img src="商品画像URL" width="150" height="150" border="0" alt="商品の説明"></a></div> </td> </tr> </table> <table border="0"> <tr> <td><div style="padding:5 5 5 5;border-style:solid;border-width:1;border-color:#c1c1c1;"> <a href="リンク先URL"> <img src="商品画像URL" width="150" height="150" border="0" alt="商品の説明"></a></div> </td> </tr> </table> </p> <!--下段のソースここまで--> 上記のソースは二通りの表示方法です。 上段は30pxの間隔を空けるため30pxのダミーのセルを噛ましてあります。 (ただし、あまりスマートな方法ではない) 下段はテーブルを二組にしてマージンで30pxの間隔を空けています。 どうしてもうまく行かない場合は上記の方法を試してみてください。
その他の回答 (4)
- torayoshi
- ベストアンサー率62% (910/1449)
torayoshiです。 一部伏字になってるのは察しの通りです。 なので、それを回避するため、新たな編集ソースは背景ではなく、 イメージ貼り付けにしました。 一部伏字になっていても、大元のソースが質問者さんの手元にあれば大丈夫です(なければ無理) http://www.********.com/item_image/0058202000137/2/r.jpg 「電動除雪機スノーラピッド」の画像は↑この部分です。 この部分を下記の「商品画像URL(http://からの絶対パス)」に代入してください。 元のソースから「商品の名前と価格」「説明文」「カートに入れるボタン」「詳細を見る」を消して再編集したソース↓ <div style="padding:5 5 5 5;border-style:solid;border-width:1;border-color:#c1c1c1;float:left;margin-right:30;"> <a href="リンク先URL"> <img src="商品画像URL(http://からの絶対パス)" width="150" height="150" border="0" alt="商品の説明"></a></div> <div style="padding:5 5 5 5;border-style:solid;border-width:1;border-color:#c1c1c1;float:left;"> <a href="リンク先URL"> <img src="商品画像URL(http://からの絶対パス)" width="150" height="150" border="0" alt="商品の説明"></a></div> <div style="clear:left;"> ・・・・</div> 上記の例は画像同士の間隔が30px、画像とその周りの枠との隙間が5px、枠の色は#c1c1c1になってます。 必要に応じて便宜変更してください。 「float:left」←ブロック要素を横に並べるプロパティ。 「clear:left」←回り込みを解除するプロパティ。
お礼
おはようございます。。。 再編集してもらったソースの「商品画像URL(http://からの絶対パス)」 部分に大元の商品画像URLを代入しました。 おかげ様で、空白だった枠内に商品の写真がちゃんと表示されました。。 ただ、左の画像と右の画像の間にすき間が空かないのと （画像同士が重なるというわけでなく、くっついてしまいます） 2つの画像が横に並ぶのですが、右の画像が全角スペース2つ分か3つ分 下にずれて表示されてしまいます。 作業した方法は 再編集してもらったソースをコピー → サイトへペースト → 商品画像URL(http://からの絶対パス)」部分に大元の商品画像URLを代入の手順です。。 あと、torayoshiさんが再編集してくれたソースだけで upして確認してみたのですが、画像写真の部分は当然空白ですが やはり、右画像が下にずれて表示されてしまいます。。 それから、<a href="リンク先URL"> というのは画像をクリックした時にリンクしたページのURLを "リンク先URL"の部分に入力するということでいいでしょうか？ いろいろ自分なりに努力してみたのですが自力での 解決は無理そうで・・＞＜。 すみません。。 もう1度 面倒みてくれませんか・・（恐縮の礼）
補足
こんばんは。。 面倒なお願いを聞き入れてくれて お手本のソースを書いて頂き本当にありがとうございます。。 質問のソースを変えられてしまったので お手本を書いてもらえるのは難しいと考えてました。。 ソースに応用を利かせてくれたんですね・・ 本当に嬉しいです。。 大元のソースはありますので、後は私次第ですね。。 htmlのことがよく分からないうえに分からない用語を 調べながらなので少し時間がかかると思いますが 頑張ってみます。。 何もお礼が出来ないので、せめて 出来るようになったらご報告したいと思いますので 質問は締め切らずにおいて置きます。。 気長に待ってて下さいね。。 本当にありがとうございました（深く、深く 礼）
- torayoshi
- ベストアンサー率62% (910/1449)
torayoshiです。 その前に確認です。 (1)画像は背景でなくても良いのか(普通は背景にしない) (2)画像は質問者側で用意するのか、それともこの会社の商品画像を使うのか。 (3)この質問htmlはテーブル組になってるが、同じようにテーブルレイアウトにするのか(画像だけを単に横に並べるだけならテーブル組は必要ない) (4)この質問htmlを元に改造するとなると、まったく別の違うhtmlになってしまうが、それでもあくまでこの質問htmlにこだわるのか(新しく書き直した方が良い。と言ったのはそのため) (5)企業が作ったサイトはプロの手によるものが多い。 プロが手がけたサイトにはjava scriptなどオリジナルなものも存在し、著作権を主張するものもある。以上の理由から質問htmlを元に改造するのは避けた方が賢明である。 補足をお願いします。
お礼
度々すみません。。 前回の回答で補足してもらった商品画像で商品が写ってませんでしたよね。。 こちらの（教えて！goo）のシステムが写真は載せないのかと 思っていたのですが、教えて！gooからメールが届きました。 --教えて！gooからのメール-- 当サイトの利用規約上ご遠慮いただいている行為 に該当してしまう記述がございました。そのため、申し訳ございませんが、質 問の該当箇所を編集させていただきました。 画像が背景に編集されたから商品のところが空欄になったということ でしょうか？ だとするとお手本を書いてもらっても、もともとのソースが 編集されてしまっているので意味がなくなってしまうと 思うのですが・・ 初心者なのでそこのところが分かりません・・ 取り急ぎ連絡させてもらいました。。 面倒な質問にお付き合いさせてしまってすみません。。
補足
何度も回答して頂き、本当にありがとうございます。。 私はドロップシッピング初心者で、webショップを 作成している過程で行き詰まり質問させてもらいました。。 質問のhtmlは加盟登録しているドロップシッピング会社の 沢山ある商品の中の1つで、この商品のhtmlを例にして 画像だけを横に並べて表示させるhtmlの式？（並べ方）も 学べたらと思いました。。 全ての商品が「商品画像」「説明文」「商品名と価格」 「詳細ボタン」「カートに入れるボタン」という形でセットに なったhtmlでできているので 今回質問させてもらった 商品画像だけを並べる方法を理解して、他の商品をショップ に貼り付ける時にも応用したいと思いました。。 同じドロップシッピング会社に加盟している方々のショップでも 画像だけを引用して並べているので商品画像だけを引用することの 問題はありません。。 質問htmlを元に改造するのは避けた方が賢明なのですね。。 1つ勉強になりました。。 (1)画像は背景でなくてもいいです。。 (2)会社の商品画像を使おうと思います。。 (3)テーブル組はしなくていいです。。 (4)(5)質問のhtmlにこだわりません。。 面倒なお願いでほんとにすみません・・ よろしくお願いします（感謝の礼）
- torayoshi
- ベストアンサー率62% (910/1449)
#1です。 いや、私上級者ではないです(笑) その前に確認なんですが、この質問のhtmlは画像が背景になってるんですが、 背景じゃなくても良いんでしょ？ それとも背景じゃないといけない何か訳でもあるんでしょうか？ 普通に画像だけを横に並べるのは<img src="画像URL">で良いんです。 <img src="1.jpg> <img src="2.jpg> <img src="3.jpg> <img src="4.jpg> ・・・・・・・ みたいに。 で、間隔を空けるにはそれぞれにCSSのmargin-rightで数値を決めてやれば良いんです。 <img src="1.jpg" style="margin-right:50;"> <img src="2.jpg"> ・・・・・・・・ 上の例は1.jpgと2.jpgの間に50pxの間隔が出来ます。 全部の画像を等間隔にするなら2.jpg以下同じようにCSSで。 最後の画像にはいりません。 で、二段にするには、 <img src="1.jpg> <img src="2.jpg> ・・・・・・・・ <p><img src="5.jpg> <img src="6.jpg> ・・・・・・・・ </p> みたいなことやると、二段になります。 それと、「商品の名前と価格」「説明文」「カートに入れるボタン」 「詳細を見る」を消すには、 最初から書かなきゃ良いんです。 最後に。 今回の質問htmlはテーブル組、背景画像、java script、CSSなどで構成されていて、 複雑な構文になってますが、 回答のお礼文を読んだ限りでは、単に画像だけを横に並べたいだけのように読めました。 もしそうなら、質問のhtmlは忘れて新しく書き直した方が良いです。 全部直さないといけないですから。 その方が簡単です。
補足
回答ありがとうございます（深く、礼） ＞この質問のhtmlは画像が背景になってるんですが、 背景じゃなくても良いんでしょ？ それとも背景じゃないといけない何か訳でもあるんでしょうか？ 質問させてもらったhtmlは商品を取り扱っている会社が作成したもので コピーして自分のサイトにペーストするシステムになってます。。 なので「画像が背景になってる」ことの訳は ちょっと分かりません。。 あと、初心者なので「画像が背景になってる」ということ自体が どういうことか分かりませんです(^^;) 「画像だけを横に並べる方法」「間隔を空ける方法」 「二段になる方法」はとても良く分かりました＾＾ ありがとうございます。。 ＞質問のhtmlは忘れて新しく書き直した方が良いです。 質問のhtmlが既存のhtmlのうえ、初心者なので htmlの中のどの部分が商品画像を表していているのかも どう並び変えたらいいのかも皆目分かりません（大量の涙） それでなのですが・・ ものすごい面倒なお願いだと思うのですが・・ 質問のhtmlで商品の名前と価格」「説明文」「カートに入れるボタン」 「詳細を見る」部分を削除して、単に 画像だけを横に並べた状態に 編集したお手本のhtmlを見せてもらえないでしょうか？ （リンクは付けたままにしたいです。。） そのお手本のhtmlと既存のhtmlを見比べて 頑張って研究してみます。。 やっかいなことと思うのでお時間のある時でいいですです。。 よろしくお願いします（ひざがおでこに付くまで礼）
- torayoshi
- ベストアンサー率62% (910/1449)
良く分からないんですが… 横に並べる？だけで良いの？ テーブルなので、横に並べるだけならこんな感じで↓ <table align="left" cellpadding="0" cellspacing="0" border="0" style="width:240px;height:300px;font-family:'ＭＳ Ｐゴシック','Osaka－等幅';background-image:url(http://www.********.com/images/clbg_spacer.gif);background-repeat:no... style="vertical-align:top;"><div style="width:154px;height:154px;background-image:url(http://www.********.com/images/cl_frame2_0.gif);margin:10px 43px 3px;"><a href="http://www.********.com/article/426371/143023"><img src="http://www.********.com/item_image/0058202000137/2/r.jpg" width="150" height="150" alt="電動除雪機スノーラピッド" style="margin:2px;border:0;" /></a></div></td></tr><tr><td style="text-align:center;vertical-align:top;padding:0 10px;"><p style="font-size:16px;font-weight:900;color:#FF1A00;margin:2px 0;"><a href="http://www.********.com/article/426371/143023" style="color:#FF1A00;text-decoration:underline;">電動除雪機スノーラピッド</a></p><p style="margin:3px 0;font-size:12px;color:#222222;"><span style="font-size:13px;font-weight:900;color:#FF1A00;">￥26,040(税込)</span></p><p style="margin:0;text-align:left;color:#222222;">コンパクト設計で使いやすい除雪機「スノーラピッド」最大約９メートルも吹き飛ばしてくれるので、凄く楽です。冬にな…</p></td></tr><tr><td style="text-align:center;vertical-align:top;"><input type="button" value="詳細を見る" style="width:101px; height:17px; margin:3px 5px 8px 0; cursor:pointer; font-size:12px;" onClick="location.href='http://www.********.com/article/426371/143023'"><input type="button" value="カートに入れる" style="width:101px; height:17px; margin:3px 0 8px 0; cursor:pointer; font-size:12px;" onClick="location.href='http://www.********.com/cart/add?shop_id=426371&article_id=14302... src="http://www.********.com/analytics/tracking.gif?s=426371&a=143023... width="1" height="1" alt="" style="margin: 0; border: 0;" /></td></tr></table> <table cellpadding="0" cellspacing="0" border="0" style="width:240px;height:300px;font-family:'ＭＳ Ｐゴシック','Osaka－等幅';background-image:url(http://www.********.com/images/clbg_spacer.gif);background-repeat:no... style="vertical-align:top;"><div style="width:154px;height:154px;background-image:url(http://www.********.com/images/cl_frame2_0.gif);margin:10px 43px 3px;"><a href="http://www.********.com/article/426371/143023"><img src="http://www.********.com/item_image/0058202000137/2/r.jpg" width="150" height="150" alt="電動除雪機スノーラピッド" style="margin:2px;border:0;" /></a></div></td></tr><tr><td style="text-align:center;vertical-align:top;padding:0 10px;"><p style="font-size:16px;font-weight:900;color:#FF1A00;margin:2px 0;"><a href="http://www.********.com/article/426371/143023" style="color:#FF1A00;text-decoration:underline;">電動除雪機スノーラピッド</a></p><p style="margin:3px 0;font-size:12px;color:#222222;"><span style="font-size:13px;font-weight:900;color:#FF1A00;">￥26,040(税込)</span></p><p style="margin:0;text-align:left;color:#222222;">コンパクト設計で使いやすい除雪機「スノーラピッド」最大約９メートルも吹き飛ばしてくれるので、凄く楽です。冬にな…</p></td></tr><tr><td style="text-align:center;vertical-align:top;"><input type="button" value="詳細を見る" style="width:101px; height:17px; margin:3px 5px 8px 0; cursor:pointer; font-size:12px;" onClick="location.href='http://www.********.com/article/426371/143023'"><input type="button" value="カートに入れる" style="width:101px; height:17px; margin:3px 0 8px 0; cursor:pointer; font-size:12px;" onClick="location.href='http://www.********.com/cart/add?shop_id=426371&article_id=14302... src="http://www.********.com/analytics/tracking.gif?s=426371&a=143023... width="1" height="1" alt="" style="margin: 0; border: 0;" /></td></tr></table>
補足
torayoshiさま～！！ ありがとうございました～ ♪ 調べても、調べても横に並ばずっと苦労してました ><。 あと、上級者と御見受けしたのでもう1つ、教えてもらって いいですか？ 質問文にのせたhtmlの「商品の名前と価格」と「説明文」と「カートに入れるボタン」と 「詳細を見る」を無くして商品画像だけにしたい時のhtmlも教えてもらえますか？ こちらも同じようにすき間を空けて横に並べたいです。。 （商品画像だけが横に並ぶようにするパターンも勉強したいです。。） 宜しくお願いします（礼）
お礼
こんにちは。 おもうように時間が取れなくて長期化してしまいました。 もう少し時間がかかりそうなので いったん質問を締め切ろうと思います。。 何度もご親切に本当に有難うございました。
補足
こんばんは。。 お世話をおかけしてます。。 そうなんですか・・ パソコンの環境によって同じソースでも 違ったものになってしまうのですね。。 また1つ勉強になりました。。 （Firefox3.5.5とか初耳です＞＜） 今日から2日程留守にするので 戻ったら頑張ってみたいと思います。。 何度も本当に有難うございました。。 取り急ぎお礼まで・・