Banguardサイト

「ビジネスマンを応援するブログ」をテーマに、ビジネスに役立つ記事を書いています。

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

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

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


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

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

サンプル1

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

写真の位置を指定させる

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

  • 写真を左端に設置
[f:id:はてなID:20xxxxxxxxxxxxx:image:left]
  • 写真を右端に設置
[f:id:はてなID:20xxxxxxxxxxxxx:image:right]


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

サンプル2

f:id:banguard9383:20120114013519j:plain:left写真の右上に文章があります。

サンプル3

f:id:banguard9383:20120114013519j:plain:right写真は右端に、文章は写真の左横にあります。文章は写真の最下部ではなく、最上部からはじまります。


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