餡のいろ

日々の調べたこと色々メモ。

画像の横に記事を回りこみさせる

f:id:umetsubuan:20190330161101j:plain

右上に写真、その横(左)にテキストが回りこんで下に続いていくレイアウトにしたい!(こんなかんじ→)

 

「編集 見たまま」で写真を貼り付け&記事を書いて

「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の画面で満足して後でスマホで確認したら思ったレイアウトになっておらず。
画像サイズを決めうちにしていたのが敗因でした。%などの相対サイズにしておいたほうがいいようです。