• 締切済み

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

FC2のブログを利用しています。 アマゾンのアソシエイトにも登録していて、画像をよく使っています。 使用する画像はamazyというサイトを利用してタグを作って使用しています。amazyではアマゾンで商品を検索するように検索して、トレイに保存するとタグを自動作成してくれるのでとても重宝しています。 レビューをつけたりもできますが、私はよく画像のみを使用しています。 今回も画像のみを３つ並べて表示させたいと思い、画像のタグを連続して３つ並べました。 <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="鋼の錬金術師１８" 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="鋼の錬金術師１７" 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="鋼の錬金術師１６" 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が入ります。 そうしたら、ブログ上に表示された画像が ■■■ ■■■■■■ ■■■■■■■■■ 　　　　　■■■■■■ 　　　　　　　　　 ■■■ という具合に少しずつ右下にズレてしまいました。(■マス３×３で１枚の画像だと思ってください) ここで他の質問を調べたところ、<p></p>で囲むといいと書いてあったので試してみましたが何も変化ありませんでした。 何となくですが、どこかのタグを消せば簡単に、キレイにいくような感じがするのですが…やはりテーブルを使わないと直らないでしょうか？ また、画像を文章の最後に持ってくると何も問題はないのですが、画像を先頭に持ってくると画像の脇から文章が始まってしまって見栄えが悪いです。 ■■■ ■■■あいうえお ■■■かきくけこ さしすせそ たちつてと という感じになります。 画像最後に改行を入れたり、<br>や<p>を入れてみましたが変化はありませんでした。 ■■■ ■■■ ■■■ あいうえお かきくけこ さしすせそ と表示させるにはどうすればいいでしょうか？ よろしくお願いします！

noname#147252
noname#147252

みんなの回答

回答No.1

>※▲は一つの画像の区切りです。分かりやすくする為に入れました。 十分に分かりにくいのでもう少し工夫をしてください。 >実際にはスペースも改行も入れていません。 HTML内で改行をしても表示には一切反映されません。 <div>と打とうが、 <d iv>と打とうが同じ表示になります。 どのブラウザでそう表示されるのかわからなかったので、 とりあえず上のHTMLを用いてサンプルページをつくり、 FireFox、IE7、IE6、Operaで表示を確認しました。 （DOCTYPE,html,head,bodyタグは省きました） 結果、どのブラウザでも次のように表示されました。 画像 ▲ 画像 ▲ 画像 以上より、示された条件で示された状況が確認できなかったので、 私の回答を終了したいと思います。

noname#147252
質問者

お礼

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

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • <ul><li>で画像が均等配置せずレイアウト崩れ

    <ul><li>で画像が均等配置せずレイアウト崩れしてしまいます。 いつもお世話になります。 添付画像のように、#rightmenuのul#resultList内で<li>を使用して110pxの画像を5つ均等に配置させそれぞれの隙間には10pxの空間を空けて配置したいと考えています。 左から4つの画像は#resultList li {}でpadding-right:10px;で余白を作り、5番目の画像は逆に余白がないように#resultList li.mustright 指定でpadding-right:none;設定です。 ところがそんな設定していないのに、何故か間には20pxほどの空白ができ、そのため一番右端の画像がレイアウト崩れして下段に落ちてしまいます。CSSもしくはHTMLの記述のどこがいけないのでしょうか？どうか教えてください。ちなみに並べたい画像はクリックするとthickboxで大きな画像が表示できるようにしたいと考えています。 ●HTML <div id="rightmenu"> <div id="rightbox-inside">←背景にコンテンツの外枠となる画像の上部表示用 <div id="rightbox-inside-txt"> <p class="title">タイトル</p> <p class="standard-title">コンテンツ内容</p> <p class="standard"> <ul id="resultList"> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li class="mustright"><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> </ul> </p> </div> <div style="clear:both; "></div> <div id="rightbox-buttom"><img src="images/rightbox-buttom.jpg" alt="枠">←背景にコンテンツの外枠となる画像の下部表示用 </div> </div> </div> ●CSS #rightmenu { width:645px; float:right; padding-top:20px; background:url(../images/rightbox-top.png) no-repeat; } #rightbox-inside { background:url(../images/rightbox-inside.png) repeat-y; } #resultList { overflow:hidden; margin:0 25px 0 30px; padding:0; list-style-type:none; } #resultList li { display:inline; float:left; margin:0; padding-right:10px; } #resultList li.mustright { float:right; padding-right:none; } #resultList li a { display:block; } #resultList li a img { display:block; width:110px; height:100px; border:0; } #rightbox-buttom { clear:both; }

    • ベストアンサー
    • CSS
  • ページのトップへの画像

    ページのトップへの画像をcssにしようと思っています。 現在 ＝＝＝ html ＝＝＝ <html lang="ja"> <head> <meta charset="utf-8"> <style type="text/css"> <!-- div.box { width: 90%; height: 20px; color: #ffffff; background-color: #000000; padding: 3px 10px 3px 10px; } .gotop { float: right; padding-top: 3px; } --> </style> <title>Title Box</title> </head> <body> <div class="box"><a href="#top" class="gotop"><img alt="gotop" src="gotop.png"></a>Title Box</div> </body> </html> のようになっているソースを画像を指定してのcssに変えたいと思っていますがうまくできません。 上手にする方法を教えてください。

    • 締切済み
    • CSS
  • 画像に背景色と境界線を付けたい。

    いつもお世話になります。 画像の周りに背景色その外側に線を引きたく思っています。 (1) <div style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > <img src="**.jpg" alt="**"> </div> と、すれば可能ですが (2) <img src="**.jpg" alt="**" style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > とすると境界線は表示されても背景色が表示されません。 (1)のように<div>タグを用いなくて、(2)のように<img>タグのみで(1)のようなことはできないものでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 折り畳みメニューを使った場合の画像の空きについて

    使用ソフトはドリームウィーバーです。 折り畳みメニューを使いたく、以下のとおり書いたのですが、 なぜか、サブメニューの画像が開いたときに微妙に空きがでます。 マージン0にしてあるのですが、どうしても画像と画像の間があいてしまいます。 どうやったら詰められるのでしょうか？ 教えていただけますか？ <script language="JavaScript"> <!-- function msl(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='block' else if(document.all)document.all(idmn).style.display='block' } function kks(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='none' else if(document.all)document.all(idmn).style.display='none' } //--> </script> <style type="text/css"> <!-- .menu{ width : 110px; cursor : pointer; } .sub{ display : none; margin: 0px; padding: 0px; } ul{ margin:0px; padding: 0px; } ul li{ margin:0px; list-style-type: none; padding: 0px; height: 22px; width: 110px; } ul li img{ margin:0px; padding: 0px; } --> </style> </head> <body> <noscript>※JavaScriptを有効にしてご覧下さい。</noscript> <div class="menu" onclick="javascript:msl('sub_a')" ondblclick="javascript:kks('sub_a')"><img src="シモン/html/images/menu01.gif" /></div> <ul class="sub" id="sub_a"> <li><img src="シモン/html/images/menu01_01.gif" /></li> <li><img src="シモン/html/images/menu01_02.gif" /></li> <li><img src="シモン/html/images/menu01_03.gif" /></li> <li><img src="シモン/html/images/menu01_04.gif" /></li> <li><img src="シモン/html/images/menu01_05.gif" /></li> </ul>

  • CSSで表示が異なってしまう

    下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか？ よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>

    • ベストアンサー
    • HTML
  • HTMLでトップページの画像およびリンクのランダム表示について

    どなたかお力を貸して下さい。 現在ＨＰを作成中なのですがそのＨＰのトップページに表示される画像と、 それとセットで商品名、購入ページへのリンクを更新する度にランダム表示になるようにできればと思っています。 添付画像の販売ページへ飛ぶという所でリンクをつけたいと思っています。 HTMLは <h2>New!!新着製品</h2> <div class="itemlist"> <div class="img"><a href="#"><img src="images/sampleimg1.jpg" alt="item name" width="250" height="188" /></a></div> <h3>機種名</h3> <p>販売ページへ飛ぶ</p> </div> スタイルシートは #main .itemlist { border: 1px solid #CCCCCC; /*１個あたりのボックスのボーダー設定*/ padding: 5px; overflow: hidden; margin-bottom: 0.5em; width: 673px; /*段落タグ（p）の横幅とサイズを合わせる設定です。この下二つのmarginも。*/ margin-right: auto; margin-left: auto; } #main .itemlist h3 { color: #000000; border-bottom: 1px solid #cccccc; border-left: 4px solid #CCCCCC; padding: 0px 0px 0px 5px; margin-bottom: 0.5em; font-size: 100%; } #main .itemlist p { padding: 0px; } #main .itemlist p, #main .itemlist h3 { margin-left: 265px; /*画像の幅に合わせてここは変更する*/ } #main .itemlist a img { padding: 5px; /*写真と外線との余白*/ border: 1px solid #CCCCCC; } #main .itemlist a:hover img { border: 1px solid #999999; } #main .itemlist div.img { float: left; } なのですが相当難しいでしょうか？

    • ベストアンサー
    • HTML
  • IE6,7で画像の上に載せた文字がずれる

    HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>

    • ベストアンサー
    • CSS
  • htmlできれいな画像のような表を作りたいです。

    htmlで添付画像のようなものを作りたいです。 tabelを利用し作りましたが、 セルとセルの間に空白ができてしまい 思い通りのものができませんでした。 このようなものを作る場合何を利用するのが正しいでしょうか？ ↓↓↓tableで作った表↓↓↓ <html> <title>サンプル</title> <head> <body> <style type="text/css"> <!-- .a1 { width:500px; border-collapse:separate; border-spacing:0; } th.a2{ width: 200px; text-align: center; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #330; border-top: 1px solid #330; background-color: #330; color: #fff; } td.a3 { width: 300px; padding: 5px; border-bottom: 2px solid #330; border-top: 2px solid #330; } --> </style> </head> <div class="a1"> <table> <tr> <th class="a2">あああああ</th> <td class="a3">ああああああああああああああ</td> </tr> </table> </div> </body> </html>

  • リンクのHTMLについて

    いつもお世話になります。 ブログ内の本文の終わりににamazonのリンクを貼っているんですが、 複数の商品のHTMLを貼ると、商品画像が縦に並んでしまいます。 横に並べて表示する方法はないのでしょうか。 ブログ本文は30文字で折り返されるので、表示される画像を 横並びに出来る余裕は楽にあります。 初心者なので判りやすくお教えいただければ幸いです。 宜しくお願い致します。 尚、現在は以下のように貼っています。 <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000067JP6/asociatehelpe-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/B000067JP6.09.MZZZZZZZ.jpg" alt="商品名" border="0" width="160" height="158"></a><br><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000067JP6/asociatehelpe-22/ref=nosim" target="_blank" class="ausgangsoft">商品名</a> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000I6BLAE/asociatehelpe-22/ref=nosim" target="_blank" class="ausgangsoft"><img src="http://rcm-images.amazon.com/images/P/B000I6BLAE.09.MZZZZZZZ.jpg" alt="商品名" border="0" width="113" height="160"></a><br><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000I6BLAE/asociatehelpe-22/ref=nosim" target="_blank" class="ausgangsoft">商品名</a>

  • IE7で表示すると画像に隙間があきます。

    WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する