バナーを横に並べて貼りたい!商品バナーを一定の間隔を保ちながら3つ

このQ&Aのポイント
  • バナーを横に並べて貼りたい!商品バナーを一定の間隔を保ちながら3つ
  • 商品バナーを一定の間隔を保ちながら3つ 横に並べて貼りたいのですが、3つのバナーがくっついて貼れてしまううえにページの上部に表示されずに下のほうに落ちて表示されてしまいます。
  • htmlが良く分かっていないので分かりやすくどなたか商品バナーを一定の間隔を保ちながら3つ 横に並べる方法を教えて下さい。使用しているのはjugemの無料ブログです。
回答を見る
  • ベストアンサー

バナーを並べて貼りたい

商品バナーを一定の間隔を保ちながら3つ 横に並べて貼りたいのですが、3つのバナーがくっついて貼れてしまううえにページの上部に表示されずに下のほうに落ちて表示されてしまいます。 検索して試した方法は <table cellspacing="0" cellpadding="0"> <tr> <td> ★ </td> <td> ★ </td> <td> ★ </td> </tr> </table> ★のところに貼りたいコピーしたバナーのコード?を貼り付けるという方法でした。 htmlが良く分かっていないので分かりやすくどなたか 商品バナーを一定の間隔を保ちながら3つ 横に並べる方法を教えて下さい。使用しているのはjugemの無料ブログです。 宜しくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • jumajuma
  • ベストアンサー率53% (33/62)
回答No.5

貼ってあるURLでファイルのチェックをしてみましたでしょうか? チェックして問題なかったとすれば後は CSSの中身がおかしい ぐらいしないかもしれません。 説明文とテーブルの間を空けたい場合だと ちょっと不恰好ですが <hr size="*"> とか <img src="★" hight="*"> ★は白の1ドットで試してみる とか <br></br> を連続させるとか テーブル内に空(空白)の升を組み込むとか (*は適当な数字を入れる) いろいろやり方はあるので 好みのものでどうぞ。

papimaru
質問者

お礼

こんばんわ。。 いろいろ試していましたのでお礼が遅くなりました。。どうにも勉強不足なもので いましばらく格闘が続きそうなので先にお礼を言わせて下さいね。何度も回答して頂き本当に有り難う御座いました。。

その他の回答 (4)

  • jumajuma
  • ベストアンサー率53% (33/62)
回答No.4

これが完全なコピぺだとして いきなり間違ってます(^^; 「生薬(しょうやく)<span 」ここが間違い 「生薬(しょうやく)</span> 」ですね おそらくこれかな (手打ち派だと結構よくやるw(自分も手打ち派)) あとは <table cellspacing="1" cellpadding="1"> は元に戻して良いですよ P.S.あと自分が参考程度に使っているHTML診断サイトを貼っておきます。

参考URL:
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
papimaru
質問者

補足

こんにちは。。何度も回答を有り難う御座います。 いきなりすごいミスをしてました(^^; ただこちらは今回の質問とは関係がなかったようです・・ (でも おかげさまで <spanを </span>に直した箇所は訂正することが出来ました^^) 相変わらず説明文とバナーの間には空白があり説明文のすぐ下にバナーが表示されません。 昨日、少し調べてみたのですが、なんとなくイメージできたのは、均等にスペースを空けるためには それを指示するタグ?htlm?を加える必要があるような感じがしました。 何度も恐縮なのですが教えて頂けたら嬉しいです。宜しくお願いします。

  • jumajuma
  • ベストアンサー率53% (33/62)
回答No.3

タグを支障のない程度に書き出せないでしょうか? タグがどうなっているかちょっと解らないので できればおねがいします。

papimaru
質問者

補足

こんばんわ。。どこを参考にされるのか分からないもので取り敢えず 全部貼り付けてみます。 <span style="color:#000000">動植物や鉱物など、自然界に存在する天然の物をそのまま使う薬を「生薬(しょうやく)<span 」と呼びます。 そして最適な治療効果をあげるために数種類の「生薬」を組み合わせて処方したものが漢方薬です。</span> <span style="color:#ff0000">現代では大学病院や総合病院においても漢方薬の効能に着目し漢方外来を設ける施設が増えています。</span> <table cellspacing="1" cellpadding="1"> <tr> <td width="200"> <iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&nou=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=skhms53117-22&o=9&p=8&l=as1&m=amazon&f=ifr&asins=B001L8BRL6" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe> </td> <td width="200"> <iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&nou=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=skhms53117-22&o=9&p=8&l=as1&m=amazon&f=ifr&asins=B001L8GJDM" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe> </td> <td width="200"> <iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&nou=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=skhms53117-22&o=9&p=8&l=as1&m=amazon&f=ifr&asins=B001L89SJ4" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe> </td> </tr> </table> これですべてです。何度も申し訳ないです(恐縮・・) 宜しくお願いします。

  • jumajuma
  • ベストアンサー率53% (33/62)
回答No.2

下のほうに落ちるというのがどんな状態なのか解らないのですが <table>の上になにかタグがないか見て、あれば属性の確認orテーブルより下に (上部必須のはモチロン動かさないようにする) なければ<table cellspacing="0" cellpadding="0"> を<table cellspacing="1" cellpadding="1">にしてテーブル内部の状態を確認してみてください。 何かが邪魔をしている可能性があります

papimaru
質問者

補足

こんにちは。重ねての回答有り難う御座います。 教えて頂いたように<table cellspacing="1" cellpadding="1">に置き換えて試してみたところ並べたバナーは以前より気持ちページの上部に表示されますが、まだまだ下部表示になってしまいます。 希望するページの形ですが、最初に5行の説明文を書き、説明文の下に3つ並べたバナーを表示させたいと考えています。(説明文と3つ並べたバナーがくっいてしまわないように説明文とバナーとの間は 3cmすき間(間隔・かんかく)を空けて表示したいです。 今の状況ですが、5行の説明文はページの最初から正常に始まって表示されますが、並んだバナーは説明文のすぐ下になく、長い空白のあと 出現します(表示されます)  説明文からバナーまでの距離が長いです。説明が分かりにくくてすみません・・ ><table>の上になにかタグがないか見て  <table>の上は5行の説明文があります。 >属性の確認orテーブルより下に  属性とテーブルとを検索して回答して頂いたことを確認しようとしたのですが難しすぎて理解が・・・(汗) ページの中にあるのは5行の説明文と <table cellspacing="1" cellpadding="1"> <tr> <td> ★ </td> <td> ★ </td> <td> ★ </td> </tr> </table> だけです。 説明文から3cm、間隔をあけてバナーを表示させたいのですが あとどのようにしたらよいでしょうか・・ 重ねて 宜しくお願いします。

  • jumajuma
  • ベストアンサー率53% (33/62)
回答No.1

<td>の所に幅の属性を入れればよい 例えば <td width="200"> ★ </td> 見たいな風に 画像の属性は統一しないとデザインが崩れるから注意

papimaru
質問者

補足

回答有り難う御座います。 教えて頂いた通り<td width="200">に入れ換えたところ 理想どうりの間隔でバナーを貼れることが出来ました。 言葉に表せないくらい嬉しいです(嬉しい) ただ・・やはりバナーはページの上部に表示されずに下のほうに落ちて表示されてしまいます。どのように対処したらよいものでしょうか? 重ねての質問で恐縮ですが教えて頂けると嬉しいです。 宜しくお願いします。

関連するQ&A

  • tableにinclude fileを組み込んだら・・・

    <table cellspacing="0" cellpadding="0"> <tr> <td width="480"> <table width=470" cellspacing="0" cellpadding="0"> <tr> <td width="470">・・・・</td> </tr> </table> </td> </tr> </table> を <table cellspacing="0" cellpadding="0"> <tr> <td width="480"> <!--#include file="head.html"--> </td> </tr> </table> で head.html を <table width=470" cellspacing="0" cellpadding="0"> <tr> <td width="470">・・・・</td> </tr> </table> にした場合、中のtableの上下のスペースが異なってしまいます。 どなたか、解決方法を教えてください。

    • ベストアンサー
    • HTML
  • テーブルを横に二つ並べて表示する方法はありますか?

    テーブルを横に二つ並べて表示する方法はありますか? 4列のテーブルを作るのではなく、 2列のテーブルを2個並べたいです。 <html> <head> <title>test</title> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> </body> </html> これだと、縦に2個並んでしまいます。

  • ヤフオクのテンプレートでバックグラウンドを使いたい

    今、オークション用のテンプレートを作ってるのですが、テーブルの背景に、 <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> と言った感じで画像を背景に配置したいと考えていますが、どうやってもうまくいきません。 プレビュー表示の段階で、ソースコードを見てみたのですが、ちゃんと設定されているにもかかわらず、背景画像だけが表示されません。 別の方法で、 <div style="background-image:url(http://www.000.com/000.png);"> でも試して見ましたが、同じ結果でした。 背景画像の上に「商品説明」などの画像を重ねて配置したいので、どうにか上手くできる方法がありましたら是非教えて下さい。 ※上に重ねる画像だけが表示されます。 参考までに今編集中のソースを貼っておきます。 <center> <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> <tr> <td align="center" valign="top"><br /> <center> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/001.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 商品説明 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/002.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 発送方法 </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/003.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> お支払い方法 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/004.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 注意事項 </p></font></td> </tr> </table></td> </tr> </table> </center>

  • テーブル内いっぱいに

    comment: と txt box を配置したいのですが txt box が右側に小さく表示されます どうしたらいいでしょうか? <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr><td> <table width="100%" cellspacing="0" cellpadding="0"> <tr><td>comment:</td><td><input type="text" style="width:100%"/></td></tr> </table> </td></tr> </table>

    • ベストアンサー
    • HTML
  • テーブルの作り方をご教示ください

    図のようなテーブルを作りたいのですがどうすればいいのかわかりません。 図はエクセルで書きました。 ----------------------------------------------- <table border=0 cellspacing=0 cellpadding=0> <tr> <td> <table border=0 bgcolor="#000000" cellspacing=1 cellpadding=1 width="230"> <tr bgcolor="#FFFFFF"> <td> 1 </td> </tr> <tr bgcolor="#FFFFFF"> <td> 2 </td> <tr bgcolor="#FFFFFF"> <td> 3 </td> </table> </td> </tr> </table> ----------------------------------------------- まではわかったのですが、 3と4を区切る方法がわかりません。 ご回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブル内のテーブルの高さを揃えたい。

    CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

    • ベストアンサー
    • HTML
  • 楽天ブログ・日記の下に表示のおすすめアイテムって・・・。

    ブログ初心者です。 いつかはアフェリエイトまでできると良いな~と思っていますが、まだその前の段階ですでにつまづいております・・・(汗) メインの日記の下に、おすすめアイテムを載せられるように設定したのですが、こちらの画像は私自身で気にいった商品を載せられるのですよね・・・。 (もしかして、楽天の広告ページ??) 【Recommend Item】ってタイトルに出ています。 今まで、自動的にブログの内容に合うようなアイテムが表示されているような気がしますが、好きな雑貨などを載せたいのですが・・・。 もし自分で出来るならどのように画像を載せればいいのでしょうか?? たとえばですが、アフェリエイトのやり方のページで出ていたこの商品を載せたい場合、この部分をどこに載せるとブログのおすすめアイテムに載せられるのか教えてください。 すみません・・・。 パソコンが苦手で、↓これも間違っているのかな?と思っています。 <a href="http://***" target="_blank"> .:*:.*.:*:.2本ベルトのフォーマルシューズ .:*:.*.:*:. </a>        ************** さらに、画像の載せ方が分からないのですが、こちらのテンプレートを製作した方は全然ブログをされていないようなので、もし、分かる方でいらっしゃったら教えてください! コチラは、トップやアフェリエイト部分のテンプレートらしいのですが 。 <center><table cellspacing="3" cellpadding="0" width="560"><tr><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像1</td></tr></table></td></tr></table></td><td width="34%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像大2</td></tr></table></td></tr></table></td><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像3</td></tr></table></td></tr></table></td></tr><tr><td colspan="3" align="right"><font style="font-size:10px"> </a></font></td></tr></table></center> 画像1・2・3の部分に、何を入れるとショップの商品とリンクするのでしょうか?? どうぞ、よろしくお願いいたします。

  • colspan セルの結合について

    テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>

  • DreamWeaverのソースコードの整頓方法

    DreamWeaverを使ってWEBサイト制作をしています。 コーディングしていく上で、 ソフト側で(おそらくソースの見易さを考慮してか)左詰めでなく、適宜空白を自動的に作っていってくれているのですが、 それを一括して左詰めにできる方法はないのでしょうか? よろしくお願いします。 =========== <table border="0" cellspacing="0"cellpadding="0">  <tr>   <td>■■■</td>  </tr>   <tr>    <td>■■■</td>   </tr>  </table> ↑これを <table border="0" cellspacing="0"cellpadding="0"> <tr> <td>■■■</td> </tr> <tr> <td>■■■</td> </tr> </table> ↑こうしたいのです

    • ベストアンサー
    • HTML
  • バナーを横に並べたい

    バナーを横に並べたい 検索サイトのリンクバナーを横に並べたいのですが、そのまま貼り付けると 縦にばかり並んでしまいます。横に並べるにはどこを変更すればよいでしょうか。 <!-- e-shops 投票バナー ここから --> <TABLE border="0" cellpadding="0" cellspacing="0" style="border: 2px #ffcccc outset; word-break:normal;"><TR><TD style="background-color:#ff9933; text-align : center;"><IMG src="http://img.e-shops.jp/vt/img211.gif" width="95" height="15" border="0" alt="手芸"></TD></TR><TR><TD style="background-color:#ff9933; text-align : center;" nowrap><A href="http://www.e-shops.jp/sh/rk188/html/" style="font-size : 11px; text-decoration : none;font-weight: normal;background-color:#ff9933; color: #ffffff; line-height:110%;" target="_blank">手芸</A></TD></TR></TABLE> <!-- e-shops 投票バナー ここまで --> よろしくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう