画像配列のタグが分かりません

質問

以前に質問して解決しなかった為、再投稿しました
現在ＦＣ２ブログを運営して、２ヶ月が経過したと思いますが

ブログの中で、画像と解説を上下に並べたく
そのタグの方法で質問です
それと、タグを入れた事で文章が長くなりました
申し訳ありません

尚、予め説明しておくと“--”の部分に関しては
内容の説明と、どう反映させたいかを
分かり易く…と思い、分けただけなんで
並べ方としては、この方法なんですが
-----------------------------
-----------------------------
画像　解説　画像　解説
画像　解説　画像　解説
画像　解説　画像　解説
画像　解説　画像　解説
-----------------------------
-----------------------------

要するに、画像の隣に解説を置き
更に、間を、ほとんど(？)開かせずに
改行して、同じ様に画像の隣に解説…
そう設置したいんです

それで、今迄、私が設定した方法では
この並びだったんですが

-----------------------------
-----------------------------
画像　解説　画像　解説
-----------------------------
-----------------------------

この設置方法で、タグとしては
ここで教えて貰った方法で

-----------------------------
<table border=0>
<tr>
<td>画像</td><td>解説</td>
<td>画像</td><td>解説</td>
</tr>
</table>
-----------------------------

でしたし、解説が２段以上の時には

-----------------------------
<table border=0>
<tr>
<td>画像</td><td>解説1<br>解説2</td>
<td>画像</td><td>解説3<br>解説4</td>
</tr>
</table>
-----------------------------

でした
要するに、今迄は、画像の隣に解説…で設置しても
改行は、した事が、ありません

そこで、ここでも質問した所
下記の種類のタグを教えて頂きました

----------------------------
<table border=0 cellpadding=0 cellspacing=0 width=600>
<tr>
<td colspan=4>タイトル</td>
</tr>
<tr>
<td width=200>画像</td><td width=100>解説1<br>解説2</td>
<td width=200>画像</td><td width=100>解説3<br>解説4</td>
</tr>
<tr>
<td width=200>画像</td><td width=100>解説1<br>解説2</td>
<td width=200>画像</td><td width=100>解説3<br>解説4</td>
</tr>
</table>

------------------------------
タイトル
<table border=0>
<tr>
<td>画像</td><td>解説1<br>解説2</td>
<td>画像</td><td>解説3<br>解説4</td>
</tr><tr>
<td>画像</td><td>解説1<br>解説2</td>
<td>画像</td><td>解説3<br>解説4</td>
</tr>
</table>
------------------------------
<table>
<caption>タイトル</caption>
<tr>
<td>画像</td><td>解説1<br>解説2</td>
<td>画像</td><td>解説3<br>解説4</td>
</tr><tr>
<td>画像</td><td>解説1<br>解説2</td>
<td>画像</td><td>解説3<br>解説4</td>
</tr>
</table>
-----------------------------------
しかし、いずれも
タイトルと画像や、タイトルと上に
大きくスペースが開いてしまいます

これは、どう設置したら良いんでしょうか？

回答No.2

naokita · ベストアンサー

NO.1です。
本来、昔から初心者でもHTMLが知らなくても
文章を簡単に投稿する為のブログ投稿画面なので、
改行もそのまま反映させる仕様なのです。
投稿画面では、それが単なる文章なのかHTMLなのかを判断しませんから
作者の記述した通りに（改行通りに）
全ての改行に<br />を命令通りに挿入しているだけです。
※　ここの質問・回答画面の改行も自動改行なので同じです。
（投稿画面で書いた段落をそのまま反映させる方がユーザーに優しい）

その投稿画面でHTMLをそのまま記述し反映させようとすると
投稿画面での改行が反映されてしまいHTMLテクストの改行まで
改行<br />が含められHTMLが不正になるのです。
今回のテーブルがその例です。

逆に改行なしの通常のHTMLテキストの中で
表面上改行しても改行は反映されませんので公開画面が１行になします。
理由は、改行タグや段落の br や p を書かなければ改行されないから
携帯の様に１行になるのは当然の結果です。

「改行なし」とは、「改行設定」ではない方、「HTMLタグのみ」って事。
つまり、「改行なし」なのだから通常の文章を投稿画面で改行しても
実際の表示画面では、改行にならないのが通常。
「HTMLタグのみ」で文章を改行したいのであれば、
---------------------------------------
例：
<p>回答有難う御座います<br />結論から言うと、解決しましたただ、<br />新たな疑問が出た為</p>
--------------------------------------
↑の様に１行にすれば、この様に↓表示される。
--------------------------------------
回答有難う御座います
結論から言うと、解決しましたただ、
新たな疑問が出た為
--------------------------------------

※　<br> か <br /> はバージョンによる。

※質問者さんが、どのように設定したのかはわかりませんし、
　現在の環境が、どうなっているのかはわかりません・・・
　そのブログを表示して、その部分のソースを見れば判明可能ですから
　一度表示して、何処に<br />が自動記述されているか判断し
　何故そうなったのか原因を追及すれば良いと思う。

＞“４）CSSが効いている…margin や padding …隙間が…”に関しては
可能性として先の原因の他に上下左右に隙間ができるという事は、
CSSで margin や padding が効いているという事もあるので示唆・・・

---------------------------------------
色々試行錯誤しているようですが、
「HTMLタグのみ」（CSSも交えて）を利用すれば、（FC2は可能です）
文章や表・画像を好きなように自由に反映させる事が可能です。
通常のウェブサイトと同じって事です。
HTML,CSSは命令通りに反映されます。
反映されないのは、バグやブラウザにもよりますが、
制作者の誤記・不正や知識がないだけなのです。
って事で、不具合などはHTML/CSSを検索や勉強すれば表現可能です。
頑張ってください。

お礼

どうも有り難う御座いました

回答No.1

naokita

（１）自動改行されるのが原因。
ブログでは投稿画面で段落改行すると自動で改行される。
（本来はHTMLで、<br> や <br />で改行するが自動で改行している）

つまり、改行しないでHTMLを１行で記述する事。
下記は改行しているように見えるかもしれませんが、これが１行です。
--------------------------------------
タイトル<table border=0><tr><td>画像</td><td>解説1<br>解説2</td><td>画像</td><td>解説3<br>解説4</td></tr><tr><td>画像</td><td>解説1<br>解説2</td><td>画像</td><td>解説3<br>解説4</td></tr></table>
--------------------------------------

（２）もしくは、他は１行にしても、
解説1<br>解説2
ここの↑　<br>を無しにして段落改行しても良いと思う。

（３）または、ブログ設定で自動改行を無効にする。

（４）CSSが効いている場合は、タイトルとtable の間に
margin や padding が効いていて隙間が開いているのでしょう。

※　どちらかに統一しましょう。

お礼

回答有難う御座います
まず結論から言うと、解決しました
ただ、前回の投稿時には文字数の関係で書けなかった為
少し説明させて頂きますが

“改行しないでHTMLを１行で記述する事”
に関しては、実は、その様にも設定してました
つまり、今回御指摘で作って頂いた
<table border=0><tr><td>画像<br>解説</td><td>
この様に、タグとタグの間も詰めました
それでもダメだったんです

“自動改行されるのが原因。”
ハイ…実は以前に質問した時
回答者の方に、ソースを見て頂いたんですが
その自動改行も入っていた様です

ただ“または、ブログ設定で自動改行を無効にする。”
この事に関しては、ＦＣ２ブログでは出来ないのかも知れません
と言うのが「改行の扱い」の所では
「自動改行」と「ＨＴＭＬタグのみ」の２項目なんですが
「ＨＴＭＬタグのみ」に設定すると
例えば、この文章が↓
---------------------------------------
回答有難う御座います
結論から言うと、解決しました
ただ、新たな疑問が出た為
--------------------------------------
この様に↓
--------------------------------------
回答有難う御座います結論から言うと、解
決しましたただ、新たな疑問が出た為
--------------------------------------
まるで携帯のメールみたいに
全ての文字が繋がってしまうんです

但し、今回のタグに関しては
タグの間に隙間が空いてる時には改行されてましたが
隙間無くタグを付けると、改行も無くなりました

それで不思議なのが
私自身、意識的な設定は変更して無いんですが
現在では正常に反映してる為、それが不思議で仕方が無いんです
これは原因として何だと思いますか？
それと
“４）CSSが効いている…margin や padding …隙間が…”
に関しては、どういう解釈を、すれば良いんでしょうか？

そして今回、たまたまなんですが
あるＨＰに載ってるタグを見つけたんですが
今回は、こういう希望でした

タイトル
画像　解説　画像　解説
画像　解説　画像　解説

ただ、進んで行くと

タイトル　　タイトル
画像　解説　画像　解説
画像　解説　画像　解説

こういう時も出て来たんですが
この場合
<table border=0><tr><td>タイトル</td><td></td><td>タイトル</td>
中略</td></tr></table>
で出来ました、従って
この応用でも出来たんですね(笑)