画像の横に記事を回りこみさせる
右上に写真、その横(左)にテキストが回りこんで下に続いていくレイアウトにしたい!(こんなかんじ→)
「編集 見たまま」で写真を貼り付け&記事を書いて
「HTML編集」に切り替える
<img>タグに次の2つを追加する
- align="right"(左にしたいときはもちろん"left"。)
- hspace="15px"(写真と本文の間のスペース。数字はお好みで。)
テキストの回り込みを途中ではずしたい場合は
<br>タグに以下を追加する ※追記※ <p style="clear:right">も使える
- clear="all"
-----------------------------------------
サンプル
-----------------------------------------
<p><img class="hatena-fotolife" title="XXXXXX" src="XXXXXX.jpg" alt="XXXXXX" align="right" hspace="15px" /></p>
<p>これはレイアウトのイメージサンプルです。<br clear="all" />桃の季節は初夏~夏といわれていますが黄桃の季節は秋ということです。</p>
参考になった記事
- はてなブログの小さい画像の横に文字を入れる - 生涯、学習していきたい
- はてなブログの画像の貼り方(サイズ変更/リンク/左右回り込み文字) | 自分の力でお金を稼ぐ方法|ネットで簡単に儲ける副業時代が来た
- ホームページ作成 - テーブルに回り込ました文章を解除する
最初は調べもせずベタに<TABLE><TR><TD>とか堅苦しく書いてみたけど、ぱっとしないし、いちいちHTML編集するのが面倒くさくて。
グーグル先生と先人の知恵に助けていただきできました。ありがとうございました!
<補足>
PCの画面で満足して後でスマホで確認したら思ったレイアウトになっておらず。
画像サイズを決めうちにしていたのが敗因でした。%などの相対サイズにしておいたほうがいいようです。