はてなブログの「Markdown記法」で画像の左右に文字を書く

ブログで縦に長い画像を張ると、横の空白が気になるので、その空白に文字を書くための忘備録です。

Markdown記法

いままで「はてなブログ」の編集モードを「見たまま記法」で書いていましたが、ちょっと使いづらかったので「Markdown記法」に変更しました。

画像を貼って文字を書いてみる

そのまま書くとどうなるか

Markdown記法で書くと

まず画像を貼りつけて横幅を指定したいので、横幅100ピクセル「:w100」を書きます。

[f:id:shiro_kochi:2018××××××××:plain:w100]画像の横の文字だよ!!

そして画像に続けてこの様に文字を書くと

実際の表示は

f:id:shiro_kochi:20181126110904j:plain:w100画像の横の文字だよ!!

こんな感じで文字が真ん中にきてるし、画像にくっついちゃってます。

左寄せしてみる

Markdown記法で書くと

[f:id:shiro_kochi:2018××××××××:plain:w100:left]画像の横の文字だよ!!

画像の最後に、左寄せ「:left」を挿入してから文字を書くと。

実際の表示は

f:id:shiro_kochi:20181126110904j:plain:w100:left画像の横の文字だよ!!
いい感じで文字が上にきて、画像から少し離れました。

右寄せしてみる

Markdown記法で書くと

[f:id:shiro_kochi:2018××××××××:plain:w100:right]画像の横の文字だよ!!

画像を最後に、右寄せ「:right」を挿入してから文字を書くと。

実際の表示は

f:id:shiro_kochi:20181126110904j:plain:w100:right画像の横の文字だよ!!
画像が右によって左側に文字が書けます。

続けて次の文字を書くには

そのまま改行するとどうなるか

Markdown記法で書くと

[f:id:shiro_kochi:2018××××××××:plain:w100:left]画像の横の文字だよ!!
</br>
次の文字だよ??

たとえば画像の右側に文字を書いた後、改行をいれてから次の文字を書いても

実際の表示は

f:id:shiro_kochi:20181126110904j:plain:w100:left画像の横の文字だよ!!
次の文字だよ??
この様に画像右側に表示していまいます。

左寄せを解除するとどうなるか

Markdown記法で書くと

[f:id:shiro_kochi:2018××××××××:plain:w100:left]画像の横の文字だよ!!
<br clear="all">
</br>
次の文字だよ??

解除「<br clear="all">」を書いてから次の文字を書くと

実際の表示は

f:id:shiro_kochi:20181126110904j:plain:w100:left画像の横の文字だよ!!
次の文字だよ??
これで「画像の横に文字を書いて、次の文字は通常の位置に戻す」が出来ました。

最後に

スマホ表示は

画像を大きくすると文字が全て下にきてしまいます。PCだと横に表示されるんですが...

f:id:shiro_kochi:20181126110904j:plain:w360:left画像の横の文字だよ!!
次の文字だよ??
表示するハードの解像度によって変わってしまいますね。

前回の記事はこの方法で書いています。

www.kochiokun.com