はてなブログで「写真の真横に文章を書く」方法

読みやすい記事は、文章力だけでなく全体のビジュアル構成力も高いと思います。
単純な文字の羅列より画像が添付されている方が、イメージが湧きやすいですね。そうすると、必然的にブログに画像を貼ることが多くなります。

はじめて写真を貼付けて困ったのが、「写真の説明を入れようとすると、写真の最下部から文書がはじまる」ことです。
ところがいろいろ調べてみたら、いとも簡単に解決できることがわかりました。

写真の説明を写真の真横最上部からはじめる

普通に写真を貼付して文章を書くと、写真の最下部からの文章スタートになります。

サンプル１

写真の右下に文章があります。
これだと、何だか不格好ですよね。
そんな時は、写真の文字列をちょいちょいといじるのです。

写真の位置を指定させる

まず、「はてな記法モード」で書き始めましょう。すべてはそれからです。
写真の位置を指定させるには、添付した写真の文字列「[f:id:はてなID:20xxxxxxxxxxxxx:image]」の最後に追記をします。

• 写真を左端に設置

[f:id:はてなID:20xxxxxxxxxxxxx:image:left]

• 写真を右端に設置

[f:id:はてなID:20xxxxxxxxxxxxx:image:right]

これだけで、以下サンプルのように良い感じに写真と文書が表示されます。

サンプル２

写真の右上に文章があります。

サンプル３

写真は右端に、文章は写真の左横にあります。文章は写真の最下部ではなく、最上部からはじまります。

たったこれだけで、全体のバランスが良くなりましたね。