Movable Typeで文章と画像のレイアウト

上の画像のような画面にしたいのですが、下の画像のようにしかなりません。
どうしたらいいでしょうか？

画像は挿入する時に、位置を「左」にしています。

No.2 ベストアンサー 回答者： noname#140925 回答日時： 2010/02/15 19:50

Windowsだとかmacだとか言う以前の問題な気がしますが・・・

HTMLやCSSの基礎は理解されているでしょうか？

提示されたソースだと、一行ずつdivタグで囲まれてるので、1行毎に別のブロック（別の段落）になって当然ですね。

[参考]<div> - ブロック要素
http://www.tohoho-web.com/html/div.htm

divタグの囲み全て消去して、かつ、絵がform内であるなら、文章もformタグのエリア内に入れてください。


<form mt:asset-id="246" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a href="?http://www.?？？？？？.jp/info/2010/02/13/0213-1.jpg">
<img alt="0213-1.jpg" src="?http://www.?？？？？？.jp/info/assets_c/2010/02/0213-1-thumb-300x180-246.jpg" width="300" height="180" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" />
</a>
吾輩は猫である。<br />
名前はまだ無い。<br />
どこでうまれたかとんと見当がつかぬ。<br />
何でも薄暗いじめじめしたところでニャーニャー泣いていた事だけは記憶している。<br />
吾輩はここではじめて人間というものを見た。
<br />
</form>

この回答へのお礼

>HTMLやCSSの基礎は理解されているでしょうか？

HTMLとは、WEBページを表示させる指示のための言葉みたいなもので、これをさわると、色やレイアウト、字体を変えられるということはなんとなく知っていますが、自分でさわったことはありません。
CSSについては、HTMLの進化版、というくらいしか理解していません。

職場でブログを書くことになったのですが、このお礼欄のように文字を普通に入力しています。
（また、それがHPの管理をお願いしている業者からの指導でした）
今回も自分なりにやり方を検索したのですが、例をだしてくださっているページごとにソースが違うので、こちらできいてしまうことにしました。

便利なページを教えてくださってありがとうございました。

お礼日時：2010/02/17 09:49

No.1 回答者： noname#140925 回答日時： 2010/02/13 17:53

改行ではなく、段落変更しているからでは？

エディタに何を使用しているのか知りませんが、ビジュアルエディタで改行のつもりでEnter押しちゃうと改行（<br>）ではなく段落変更(<p>)になっちゃいますが、その辺りは大丈夫でしょうか？
ちなみに、改行はShift＋Enterですので・・・

もっとも、WordPress使ってるのなら、WindowsLiveWriterで投稿するのが一番楽だと思いますけどね。

[参考]窓の杜 - 【NEWS】「Windows Live Writer」の開発チームが“WordPress”専用プラグインを公開
http://www.forest.impress.co.jp/docs/news/200910 …

この回答へのお礼

回答ありがとうございます。
使っているのはMovable Typeです。
エディタは特に使用しておらず、Movable Typeの「新しいブログ記事を作成」画面に文字入力しています。
また、書き忘れていましたが、OSはMacです。
HTMLモードに切り替えると、こんなかんじになっています。

<form mt:asset-id="246" class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://www.？？？？？.jp/info/2010/02/13/0213-1.jpg"><img alt="0213-1.jpg" src="http://www.？？？？？.jp/info/assets_c/2010/02/0213-1-thumb-300x180-246.jpg" width="300" height="180" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></a></form> <div>吾輩は猫である。</div><div>名前はまだ無い。</div><div>どこでうまれたかとんと見当がつかぬ。</div><div>何でも薄暗いじめじめしたところでニャーニャー泣いていた事だけは記憶している。</div><div>吾輩はここではじめて人間というものを見た。</div><div><br /></div>

お礼日時：2010/02/15 10:24