画像をアップした際の文字のずれについて

画像を２枚アップしたりすると、改行して文章につなげたいのに、画像の真横、つまり行のはじから文が始まってしまって見ずらくなってしまうんです。ブログを投稿する時に画像のurlと文章を改行したりスペースをあけてもそうなってしまいます。

5月17日や5月11日の記事がそうなっっちゃっています。質問の意味がわかりにくかったら申し訳ないですが見てみて下さい(><)

みさとさん。ご質問ありがとうございます。

管理画面で、 カスタマイズ/管理　→　投稿フォームの形式 を御覧下さい。

まずは、「シンプルエディタ」になっている場合のご説明をいたします。


ブログを投稿する画面で、【IMG】ボタンを押して画像を選ぶと、下記のような文字列がでてきます。これは画像を表示させる命令文で、imgタグと言います。

<img src="http：//image.blog.livedoor.jp/xxx/imgs/x/x/xxx.gif" width="88" height="31" border="0" alt="画像です" hspace="5" class="pict" align="left" />

で、この命令文には余計なものも含まれています。

<img src="http：//image.blog.livedoor.jp/xxx/imgs/x/x/xxx.gif" width="88" height="31" border="0" alt="画像です">

上記のような形にして、あとは削除されて下さい。


画像の右側に文章を入れたい時はこんな感じ。
（改行は<br />を入れて下さい。）

<table witdh="90%" cellpadding=10 >
<tr>
<td valign="top" align="center">
画像のimgタグ
</td>
<td valign="top" align="left">
右の文章
</td>
</tr>
</table>

画像の横の字を変化させたい時は、こちらを参考にされて下さい。



画像だけを２つ横に並べる場合は、
<table><tr><td>１個目の画像のimgタグ</td><td>２個目の画像のimgタグ</td></tr></table>
とします。

３つ横に並べる場合は、
<table><tr><td>１個目の画像のimgタグ</td><td>２個目の画像のimgタグ</td><td>３個目の画像のimgタグ</td></tr></table>
とします。


一つの画像だけを中央寄せしたい場合は、寄せたいものを<div align="center">と</div>で囲います。
<div align="center">画像のimgタグ</div>

右寄せ <div align="right">と</div>で囲います。

んと画像ファイルは横に並べたまま、文字をその下から表示させたいということなのでしょうか。
ブログ拝見しましたがたしかに一部縦書きになっちゃってますね。

一応改行をいくつか入れることで改善できます。
プレビューで確認しながら改行を入れてみてください。

また写真を2枚入れて一つ一つメッセージを入れたい場合は、
まず1個目と2個目の<a>タグの間に改行を画像が上下になるまで入れる。<a>タグとは<a>から</a>までを言います。

例）
<a href ***><img *** /></a>5月18日はれ
(上下になるまで改行)
<a href ***><img *** /></a>5月19日雨

という感じで。
本当はCSSをいじるべき事かもしれません。
いまいち自信がないのでアドバイス程度でヽ(゜ー゜;)ノ

livedoor Blogでは、記事に入れた画像に自動的に、画像を左に寄せ、次に続く文字や画像をその右側に回り込ませるHTMLタグが付きます。

そのため、画僧の横ではなかなか改行できない状態になっています。

解消法の一つです。次のようにしてみてください。

投稿ページや、編集ページの、
記入欄の下の「HTMLを確認する」にチェックを入れて、HTMLタグを表示する状態にしてください。
画像の下に持っていきたい文章の前に、<br clear="all">と入れてください。
これで、完全に画像の下に行きます。

<br clear="all">

です。
後は、「HTMLを確認する」のチェックを外して、普通に記入してください。


うまく行かない場合は、コメントに書いてください。
解決できましたら、質問を、解決済みにしておいてください。
（参考）

次に、WYSIWYGエディタの場合、【IMG】ボタンを押して画像を選ぶと、直接画像が表示されます。

ここで、「HTMLを確認」にチェックを入れると、文字列が表示されます。

<IMG class=pict height=31 alt=画像です hspace=5 src="http：//image.blog.livedoor.jp/xxx/imgs/x/x/xxxx.gif" width=88 align=left border=0>

これも要らない部分を削除して下記のようにします。

<IMG height=31 alt=画像です src="http：//image.blog.livedoor.jp/xxx/imgs/x/x/xxxx.gif" width=88 border=0>

あとは、シンプルエディタの場合を参考に、並べたりする文字列を入れていって下さい。

「HTMLを確認」にチェックをはずします。
この内容で投稿する、を押してください。

サイトを確認し、リンクできていたら、OKです。
できていなかった場合は、投稿した記事の確認画面を開き「HTMLを確認」にチェックを入れて、<IMG>タグ、リンクのタグを確認して下さい。

決して内容を確認する、を押した後に「戻る」を押さないで下さい。変更した内容が消える場合があります。


以上です。良かったら、下記も参考にされて下さい。


また、並べた画像の横幅がブログ本文の枠より大きくなると、サイドバーが落ちたりして、表示が崩れます。あんまり大きい画像を使ったり、あんまり並べすぎるのはお気をつけられて下さい。


よくわからない場合が良くわからない場合は、この質問のコメント欄にコメントしてください。