こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

ブログでのアソシエイト画像表示について

FC2のブログを利用しています。
アマゾンのアソシエイトにも登録していて、画像をよく使っています。
使用する画像はamazyというサイトを利用してタグを作って使用しています。amazyではアマゾンで商品を検索するように検索して、トレイに保存するとタグを自動作成してくれるのでとても重宝しています。
レビューをつけたりもできますが、私はよく画像のみを使用しています。

今回も画像のみを3つ並べて表示させたいと思い、画像のタグを連続して3つ並べました。

<div class="amz-container"><div class="amz-image" style="padding:5px;"><a href="http://amazon.co.jp/o/ASIN/4757521758/アソシエイトID/ref=nosim" target="_blank"><img src="http://ecx.images-amazon.com/images/I/21OkN1g2hFL.jpg" alt="鋼の錬金術師18" border="0" /></a></div><div class="amz-content" style="padding:5px;"></div><div style="font-size:xx-small;text-align:right;"></div></div>▲<div class="amz-container"><div class="amz-image" style="padding:5px;"><a href="http://amazon.co.jp/o/ASIN/4757520646/アソシエイトID/ref=nosim" target="_blank"><img src="http://ecx.images-amazon.com/images/I/21ga7RVmgPL.jpg" alt="鋼の錬金術師17" border="0" /></a></div><div class="amz-content" style="padding:5px;"></div><div style="font-size:xx-small;text-align:right;"></div></div>▲<div class="amz-container"><div class="amz-image" style="padding:5px;"><a href="http://amazon.co.jp/o/ASIN/4757519656/アソシエイトID/ref=nosim" target="_blank"><img src="http://ecx.images-amazon.com/images/I/21rG3si20HL.jpg" alt="鋼の錬金術師16" border="0" /></a></div><div class="amz-content" style="padding:5px;"></div><div style="font-size:xx-small;text-align:right;"></div></div>
※▲は一つの画像の区切りです。分かりやすくする為に入れました。実際にはスペースも改行も入れていません。
※実際は最後の</div></div>の前にamazyのリンクURLが入ります。

そうしたら、ブログ上に表示された画像が
■■■
■■■■■■
■■■■■■■■■
     ■■■■■■
          ■■■
という具合に少しずつ右下にズレてしまいました。(■マス3×3で1枚の画像だと思ってください)

ここで他の質問を調べたところ、<p></p>で囲むといいと書いてあったので試してみましたが何も変化ありませんでした。
何となくですが、どこかのタグを消せば簡単に、キレイにいくような感じがするのですが…やはりテーブルを使わないと直らないでしょうか?


また、画像を文章の最後に持ってくると何も問題はないのですが、画像を先頭に持ってくると画像の脇から文章が始まってしまって見栄えが悪いです。
■■■
■■■あいうえお
■■■かきくけこ
さしすせそ
たちつてと

という感じになります。
画像最後に改行を入れたり、<br>や<p>を入れてみましたが変化はありませんでした。
■■■
■■■
■■■
あいうえお
かきくけこ
さしすせそ

と表示させるにはどうすればいいでしょうか?

よろしくお願いします!

投稿日時 - 2008-01-26 14:25:53

QNo.3715094

困ってます

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

>※▲は一つの画像の区切りです。分かりやすくする為に入れました。

十分に分かりにくいのでもう少し工夫をしてください。

>実際にはスペースも改行も入れていません。

HTML内で改行をしても表示には一切反映されません。
<div>と打とうが、
<d



















iv>と打とうが同じ表示になります。

どのブラウザでそう表示されるのかわからなかったので、
とりあえず上のHTMLを用いてサンプルページをつくり、
FireFox、IE7、IE6、Operaで表示を確認しました。
(DOCTYPE,html,head,bodyタグは省きました)

結果、どのブラウザでも次のように表示されました。

画像

画像

画像

以上より、示された条件で示された状況が確認できなかったので、
私の回答を終了したいと思います。

投稿日時 - 2008-01-27 03:00:09

お礼

回答ありがとうございました。
自動作成されたタグなのでそのまま貼り付けました。
解決できないようなのでテーブルで対応しました。

投稿日時 - 2008-02-03 09:46:49

あなたにオススメの質問