はてなブログ、写真を横に並べて配置

はてなブログに2枚の写真を続けて掲載すると、以下のように、それぞれの写真が縦に並べて配置されます。写真のサイズを小さくしても、写真は横に並んでくれません。

今回は、これらの写真を横に並べて配置する方法を紹介していきましょう。まずは、先ほどと同様に2枚の写真を続けて掲載し、写真のサイズを適当に調整します。続いて、2枚目の写真の前にカーソルを移動し、「Back space」キーを押します。

すると、以下の図のように写真を横に並べて配置できます。写真が横に並ばない場合は、写真の四隅をドラッグして写真のサイズをさらに小さくしてみてください。

写真と写真の間に間隔を設けたいときは、全角スペースの文字を挿入します。その後、写真のサイズを調整して、2枚の写真の高さが揃うように調整していきます。ただし、マウス操作でサイズを微調整するのは難しく、なかなか上手くいきません・・・。

このような場合は「HTML編集」に切り替えて作業を行うと、写真の高さを簡単に揃えることができます。HTMLを読み進めていくと、写真を掲載する位置にimg要素が2つ並んでいるのを確認できると思います。このimg要素内にあるwidth="xxx"の部分をheight="xxx"に変更すると、写真のサイズを高さで指定できるようになります。

※xxxの部分には数値（ピクセル数）を指定します。

プレビューを見ながらheight="xxx"の数値を調整していくと、以下のように2枚の写真の高さを揃えて配置できるようになります。今回の例では、写真の高さを250ピクセルに指定しました。

　

色々な場面で活用できると思うので、ぜひ覚えておいてください。ただし、この方法で写真の配置を調整できるのは、パソコンでブログを閲覧したときだけです。スマートフォンのように小さい画面でブログを閲覧すると、写真が横に並ばない場合があることに注意してください。