ブログで縦に長い画像を張ると、横の空白が気になるので、その空白に文字を書くための忘備録です。
Ｍarkdown記法
いままで「はてなブログ」の編集モードを「見たまま記法」で書いていましたが、ちょっと使いづらかったので「Ｍarkdown記法」に変更しました。
画像を貼って文字を書いてみる
そのまま書くとどうなるか
Markdown記法で書くと
まず画像を貼りつけて横幅を指定したいので、横幅100ピクセル「:w100」を書きます。
[f:id:shiro_kochi:2018××××××××:plain:w100]画像の横の文字だよ！！
そして画像に続けてこの様に文字を書くと
実際の表示は
画像の横の文字だよ！！
こんな感じで文字が真ん中にきてるし、画像にくっついちゃってます。
左寄せしてみる
Markdown記法で書くと
[f:id:shiro_kochi:2018××××××××:plain:w100:left]画像の横の文字だよ！！
画像の最後に、左寄せ「:left」を挿入してから文字を書くと。
実際の表示は
画像の横の文字だよ！！
いい感じで文字が上にきて、画像から少し離れました。
右寄せしてみる
Markdown記法で書くと
[f:id:shiro_kochi:2018××××××××:plain:w100:right]画像の横の文字だよ！！
画像を最後に、右寄せ「:right」を挿入してから文字を書くと。
実際の表示は
画像の横の文字だよ！！
画像が右によって左側に文字が書けます。
続けて次の文字を書くには
そのまま改行するとどうなるか
Markdown記法で書くと
[f:id:shiro_kochi:2018××××××××:plain:w100:left]画像の横の文字だよ！！ </br> 次の文字だよ？？
たとえば画像の右側に文字を書いた後、改行をいれてから次の文字を書いても
実際の表示は
画像の横の文字だよ！！
次の文字だよ？？
この様に画像右側に表示していまいます。
左寄せを解除するとどうなるか
Markdown記法で書くと
[f:id:shiro_kochi:2018××××××××:plain:w100:left]画像の横の文字だよ！！ <br clear="all"> </br> 次の文字だよ？？
解除「<br clear="all">」を書いてから次の文字を書くと
実際の表示は
画像の横の文字だよ！！
次の文字だよ？？
これで「画像の横に文字を書いて、次の文字は通常の位置に戻す」が出来ました。
最後に
スマホ表示は
画像を大きくすると文字が全て下にきてしまいます。PCだと横に表示されるんですが．．．
画像の横の文字だよ！！
次の文字だよ？？
表示するハードの解像度によって変わってしまいますね。