FC2のブログでHTML新規投稿時に画像とテーブルの間に空白ができる問題の解消方法

2023/08/10 17:04

このQ&Aのポイント

ＦＣ２のブログで新規投稿した際に、画像とテーブルの間に広い空白ができてしまう問題が発生しています。この問題を解消するためには、特定のCSSスタイルを適用する必要があります。
具体的には、テーブルと画像の間の余白をゼロに設定するために、CSSのmarginプロパティを使用します。marginプロパティには、テーブルと画像の間の上下左右の余白を指定します。
以下のようなCSSコードをブログのテーマやカスタマイズエリアに追加することで、問題が解消されるはずです。 ``` <style> img { margin: 0; } </style> ```

ベストアンサー

ＦＣ２のブログで　ＨＴＭＬ

2010/12/05 23:39

新規投稿した際に、画像のソース下にテーブルを配置したのですが、画像とテーブルの間に広い空白ができてしまいます。空白をなくすにはどのようにすればよいのでしょうか？ <a href="http://blog-imgs-37.fc2.com/h/i/r/xxx/xxx-img600x448-1291282057iczrmy28164.jpg" target="_blank"><img src="http://blog-imgs-37.fc2.com/h/i/r/xxx/xxxi-img600x448-1291282057iczrmy28164s.jpg" alt="" border="0" width="119" height="89" /></a> <table width="400" border="1"> <tr> <th scope="col">価格Ａ</th> <th scope="col">価格Ｂ</th> <th scope="col">価格Ｃ</th> </tr> <tr> <td>1,500</td> <td>2,000</td> <td>未</td> </tr> </table>

tarono0123
お礼率57% (357/618)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/12/06 13:50 回答No.2

HTMLを直接投稿するときは、高機能テキストエディターボタン「W」で、余分な改行やスペースを空けずにHTMLをそのまんま貼り付けて見て下さい。 ↓のように（若干文法訂正しましたが） <div><a href="http://blog-imgs-37.fc2.com/h/i/r/xxx/xxx-img600x448-1291282057iczrmy28164.jpg" target="_blank"><img src="http://blog-imgs-37.fc2.com/h/i/r/xxx/xxxi-img600x448-1291282057iczrmy28164s.jpg" alt="" border="0" width="119" height="89" /></a></div><table width="400" border="1"><tbody><tr><th scope="col">価格Ａ</th><th scope="col">価格Ｂ</th><th scope="col">価格Ｃ</th></tr><tr><td>1,500</td><td>2,000</td><td>未</td></tr></table> 醜いし、メンテしにくいので、別のエディターで作っておいて、改行やスペースを取り払った上でコピペします。

質問者

お礼 2010/12/06 23:37

ありがとうございます！

その他の回答 (1)

metametamu
ベストアンサー率51% (153/295)

2010/12/06 13:33 回答No.1

<img src="http://blog-imgs-37.fc2.com/h/i/r/xxx/xxxi-img600x448-1291282057iczrmy28164s.jpg" alt="" border="0" width="119" height="89" style="margin-bottom:0;" /> この部分だけ書き換えるとどうですか？

質問者

お礼 2010/12/06 23:38

ありがとうございます！

関連するQ&A

vb2005でwebbrowserに表示したテーブルタグの値を取得したい。
<head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <body> <table width="450" border="1"> <tr> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <th scope="row"> </th> <td><table width="450" border="1"> <tr> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <th scope="row"> </th> <td>【xyz】</td> </tr> </table></td> </tr> </table> </body> </html> このようなhtml文書があったとして、【xyz】この値を取得したいのですが WebBrowser1.Navigate("上記のhtml文書のURL") Do While (WebBrowser1.IsBusy Or WebBrowser1.ReadyState <> WebBrowserReadyState.Complete) My.Application.DoEvents() System.Threading.Thread.Sleep(50) Loop からどのようにコーディングすれば取得できるんでしょうか？できるだけ文字列操作をするのではなくて、用意された2.0のクラス群を利用して取得したいんです。教えてください。お願いします。
- ベストアンサー
- Visual Basic
HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。
HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。下のソースで５０と１３０のとこをきちんとエクセルのように枠線揃えたいのですが、どのようにしたら良いのでしょうか？よろしくお願いします。 <HTML> <BODY> <TABLE border=1><TR> <TH width="50"></TH> <TH width="135"></TH> <TH width="65"></th> <TH width="65"></th> <TH width="65"></th> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50 rowSpan=2>50</TD> <TD width=135 rowSpan=2>135</TD> <TD width=65 rowSpan=2>65</TD> <TD width=130 colSpan=2>130</TD> </TR><TR> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=50>50</TD> <TD width=135>135</TD> <TD width=65>65</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=250 colSpan=3>250</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=250>250</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
エクセルでのHTMLの表の切替(行・列切替も)
こんにちは。お世話になります。ショッピングサイトで表示中のサイズ表を新たなデザインに変えることにしました。具体的には下記に記載の通りです。元は横に伸びる表記だったものをこのタイミングで縦に伸びる表記に変えます。また、デザインもよりシンプルなものになります。このアイテム１点であればこれにて作業完了なのですが、 1000点ともなると、仕組みを作った方がはるかに早いのですが、手法が頭に浮かびません。新レイアウトにするのは、エクセル上でひな形の表を作って、それをマクロでボタンを押せば一気にHTMLのTABLEタグ付きで出力すればイケるかも、と思いました。ではそのひな形の表を現在のHTMLタグから起こすには… 想像ができませんでした。それともそもそもまったく違う手法の方が簡易…？難しいです。よろしければご教示いただけないでしょうか。ちなみに袖丈があるものもあったり、アイテムによって形状・揃えているサイズ展開が違うため、テーブルの行や列はアイテムによって変わってきてしまい、○行○列のものです、ということはできません。 -------------------- ※現在のサイズ表である↓を <font color=#000000 size=3><b>サイズ表</b></font><br><table width=300 cellspacing=0 cellpadding=2 bgcolor=#FFFFFF><tr><td bgcolor=#66CC66><table width=100% cellspacing=1 cellpadding=1 bgcolor=#FFFFFF><tr><td bgcolor=#99CC99><table width=100% cellspacing=0 cellpadding=20 bgcolor=#FFFFFF><tr><td bgcolor=#FFFFFF align=left><font color=#000000 size=3><table border=1 width=420><tr><td width=60></td><td width=60>92cm</td><td width=60>98cm</td><td width=60>104cm</td><td width=60>110cm</td><td width=60>116cm</td><td width=60>122cm</td></tr> <tr><td width=60>総丈</td><td width=60>54cm</td><td width=60>57cm</td><td width=60>60cm</td><td width=60>63cm</td><td width=60>66cm</td><td width=60>69cm</td></tr> <tr><td width=60>身幅</td><td width=60>26cm</td><td width=60>27cm</td><td width=60>28cm</td><td width=60>29cm</td><td width=60>30cm</td><td width=60>31cm</td></tr></table><br>※平置きでの採寸になるので、若干の誤差はご了承ください。<br></font></td></tr></table></td></tr></table></td></tr></table> 新しい以下のサイズ表表記に切り替えたいです。【サイズ表】 <table> <tr> <th scope="row">年齢・身長</th> <th scope="row">総丈</th> <th scope="row">身幅</th> </tr> <tr> <th scope="row">92cm</th> <td>54cm</td> <td>26cm</td> </tr> <tr> <th scope="row">98cm</th> <td>57cm</td> <td>27cm</td> </tr> <tr> <th scope="row">104cm</th> <td>60cm</td> <td>28cm</td> </tr> <tr> <th scope="row">110cm</th> <td>63cm</td> <td>29cm</td> </tr> <tr> <th scope="row">116cm</th> <td>66cm</td> <td>30cm</td> </tr> <tr> <th scope="row">122cm</th> <td>69cm</td> <td>31cm</td> </tr> </table> ※平置きでの採寸になるので、若干の誤差はご了承ください。 <br> ちなみに、新しいサイズ表は、サイズ表以外の他の商品情報とともに以下のスタイルで定義されています。 <style> .sc-table-01{width: 320px;font-size: 0.9em;} .sc-table-01 table{ border-collapse:collapse; margin: 5px; width: 100%; } .sc-table-01 th{ font-style: normal; font-size: 0.9em; color: #000; background-color: #FFD6C1; border: 1px solid #999; padding: 6px; white-space: nowrap; line-height: 150%; } .sc-table-01 td{ border: 1px solid #999; font-size: 0.9em; padding: 10px; line-height: 150%; } </style> <div class="sc-table-01">
- 締切済み
- Excel（エクセル）
FC2ブログについて
FC2ブログについてＦＣ２ブログでＨＴＭＬのテーブルを使って表示させようとすると何故か下のほうに表示されて上部に結構な空白が出来てしまいます。これを改善する方法はないのでしょうか？因みに使ったＨＴＭＬを下に記しておきます。どうかよろしくお願いします。 <table border> <tr> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> <tr> <td>ここに文字</td> <td>ここに文字</td> <td>ここに文字</td> </tr> </table>
- ベストアンサー
- ブログ
表の作成
いつもお世話になっています。下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <TABLE border="1" cellspacing="0" width="940"> <TBODY> <TR> <TH height="17" width="790" colspan="5">A</TH> <TH height="17" width="75" rowspan="2">G</TH> <TH height="17" width="75" rowspan="2">H</TH> </TR> <TR> <TH height="17" width="150">B</TH> <TH height="17" width="80" >C</TH> <TH height="17" width="220">D</TH> <TH height="17" width="280">E</TH> <TH height="17" width="60" >F</TH> </TR> </TBODY> </TABLE> <TABLE border="1" cellspacing="0" width="940"> <COLGROUP> <col width="150"> <col width="80" > <col width="220"> <col width="280"> <col width="60" > <col width="75" > <col width="75" > </COLGROUP> <TBODY> <TR height="30"> <TD><FONT SIZE="-1">○</FONT></TD> <TD><FONT SIZE="-1">×</FONT></TD> <TD><FONT SIZE="-1">△</FONT></TD> <TD><FONT SIZE="-1">□</FONT></TD> <TD><FONT SIZE="-1">◆</FONT></TD> <TD align="center"> <INPUT type="button" value="◎" style="width:55px;height:27px" onClick="">  </TD> <TD align="center"> <INPUT type="button" value="Δ" style="width:55px;height:27px" onClick="">  </TD> </TR> </TBODY> </TABLE> どなたか解決方法を教えていただけないでしょうか？よろしくお願いいたします。
- ベストアンサー
- HTML
空のテーブルを表示させたい
DBから検索条件に当てはまるデータを全て読み込み、特定の内容だけ表のように表示させるプログラムを作成しています。ほとんど作成し終わったのですが、項目の中のデータが空だと表の枠(？)を表示してくれず、空白になってしまいます。それでは見た目が悪いので、なんとかExcelのような表にしたいのですが、やり方がわかりません。どなたか教えていただけないでしょうか？ ○開発環境・OS：WindowsXP Professional ・ツール：Microsoft InterDev6.0 ・DB：SQLServer2000 ○ソース（表示部分のみ）該当データ数 <%=objRS.RecordCount%><br> <% Response.Write"<input type=""submit"" id = ""Indication1"" value=""表示する"" name=""Indication"">" %> <br> <table border="1" width="100%"> <tr> <th scope="col" bgcolor="#ccffff"></th> <th scope="col" bgcolor="#ccffff"><font size="2">入力番号</font></th> <th scope="col" bgcolor="#ccffff"><font size="2">日付</font></th> <th scope="col" bgcolor="#ccffff"><font size="2">名前</font></th> </tr> <% '*****　検索されたデータの表示　***** Do Until ObjRS.EOF %> <tr> <td scope="col"> <% Response.Write"<input type=""radio"" value=""" & ObjRS("no")& """ name=""Check"">" %> </td> <td scope="col"><%=ObjRS("no")%></td> <td scope="col"><%=ObjRS("date")%></FONT></td> <td scope="col"><%=ObjRS("name")%></FONT></td> </tr> <% ObjRS.MoveNext LOOP %> </table>
- ベストアンサー
- Microsoft ASP
vbsでＩＥの操作
ｖｂｓでＩＥの自動操作を行おうとしているのですが，最後のボタンだけなぜか押せません．オブジェクトが存在しないとエラーになります．下記は操作しようとしているところのソースです． <div id="layerPanelSessions" style="display:"> <table cellpadding="1" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr bgcolor="#EEEEEE"> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr valign="top"> <td> <table cellpadding="4" cellspacing="0" border="0" width="100%"> <tr valign="top"> <td><img src="/dana-cached/imgs/icn18x18SessionNC.gif" alt="ネットワークコネクト" width="18" height="18" border="0"></td> <td width="100%">ネットワークコネクト <br><span class="cssSmall">システムトレイに [ネットワークコネクト] アイコンが表示されて「接続」となっていると、ネットワーク上でセキュアにアプリケーションにアクセスすることができます。<br> <br>そうでない場合はネットワークコネクトの [セッションの開始] アイコンをクリックして接続します。</span> </td> </tr> </table> </td> <td align="right"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="6"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> <tr> <td bgcolor="#EEEEEE" nowrap ><img src="/dana-cached/imgs/space.gif" width="10" height="10"> <input name="btnNCStart" type="button" value="開始" onclick="self.location='/dana/nc/ncrun.cgi?launch_nc=1'; return false;"></td> <td><img src="/dana-cached/imgs/space.gif" width="5" height="1"></td> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> <td bgcolor="#EEEEEE"><img src="/dana-cached/imgs/btnPanelItemBlank.gif" alt="" width="20" height="20" border="0"></td> <td><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> </td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> で，下記が操作用の私が作成したコードです． .Document.all("btnNCStart").Click 本当に困っています．どなたかよろしくお願いいたします．
- ベストアンサー
- Visual Basic
tableの外枠をCSSで表示させない方法
HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。線種はsolidを使いたいです。よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css">  </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
動的なtableの値を取得したい
いつもお世話になります。見よう見まねでやっている超初心者です。下記の様なテーブル（phpで読み込んでいますので実際は動的です。）の回答ボタンをクリックするとテーブル下の<INPUT type="text" name="kotae">にボタンをクリックされた行のｂ列の値を入れたいと思っています。 function　kaito()をどのように書いたら取得できるか悩んでいます。初心者なもので具体的な回答でしたら助かります。ご教授の程どうぞよろしくお願い致します。 <html> <head> <meta content="text/html; charset=utf-8" /> <script> </script> </head> <body> <table width="100" border="1"> <tr> <th width="30" scope="col">a</th> <th width="30" scope="col">b</th> <th width="40" scope="col">c</th> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td><td>3</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>4</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>5</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> </table> <INPUT type="text" name="kotae" size="12" > </body> </html>
- ベストアンサー
- JavaScript
HTMLのテーブルについて
HTMLのテーブルについて今、HTMLを勉強しています。下記のようにテーブルを作成し一部にセルの結合を行ったところ、(2)の結合したセル右端から外枠までが広がってしまいます。せっかく綺麗に見えるように上の表と下の表のセル幅を合わせても、上の表の右端が出っ張ってしまって意味がありません。これを解決するにはどのように改善すればいいのでしょうか？ <html> <head> <title>A</title> </head> <body> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>１</td> <td>Ａ君</td> <td>(1)</td> </tr> <tr> <td>１</td> <td>Ｂ君</td> <td rowspan="2">(2)</td> </tr> <tr> <td>１</td> <td>Ｃ君</td> <td></td> </tr> </table> <br> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>２</td> <td>Ｄ君</td> <td>(3)</td> </tr> <tr> <td>２</td> <td>Ｅ君</td> <td>(4)</td> </tr> <tr> <td>２</td> <td>Ｆ君</td> <td>(5)</td> </tr> </table> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）

FC2のブログでHTML新規投稿時に画像とテーブルの間に空白ができる問題の解消方法

ＦＣ２のブログで　ＨＴＭＬ