2017-05-03

Bloggerの記事投稿で画像を横並にする方法

どうも。
GWですね。　どこに行っても混んでるので家でのんびりプラモデルなど制作しています。
いい年したオッサンがガンプラを買って作ってますよ。
素組ですが。

Bloggerで画像を横並びに配置したい

さて、Bloggerで記事を投稿していると写真を貼る事があると思います。まぁそうでしょう。

PC内画像の場合、マウスでドラッグして好きな位置に貼付けることや投稿画面の上部ツールバーに設置されている「画像を挿入」ボタンで簡単に出来、貼付けた画像は自動でGoogleフォトに保存、そこから記事内にサムネイルとしてリンクを貼付けてくれるので非常に便利な機能です。

しかし、この機能は横並びでの貼付けはキレイに出来ないのでイライラします。

多分、リンク先（Googleフォト）画像取得のリンクタグと縮小し貼付けるimgタグの仕様なのかと思ってます。
imgタグのインライン要素だけなら横並びになる筈ですから。

ペイント系アプリで連結しても良いのですが、面倒くさい…

テーブルレイアウト内に画像を挿入

なかなか思い通りに横並びになってくれない画像ですが、HTML/CSS（ul,li等）で作り込めば出来ると思います。
しかし、記事投稿中にもっと簡単な方法で出来ないものかと考えた結果、テーブルレイアウトを利用して画像を埋め込めばBloggerの仕様も維持出来るなではないかと。
この方法なら投稿記事の作成中に簡単に出来ます。

画像横並びの方法

HTMLモードで記事を作成します。
以下のコードを記事内にペースト、<td></td>の間にクリックしてカーソルを合わせます。

<table cellpadding="0" cellspacing="0"><tbody>
<tr>
<td>
ここにカーソルを合わせます。
</td>
<td>
ここにカーソルを合わせます。
</td>
</tr>
</tbody></table>

カーソルを合わせたら投稿画面上部ツールバーの「画像の挿入」ボタンをクリックして手順に従い画像を挿入すれば完了。

こんな感じに画像を表示出来ます。
また、<table の後にborder=""を追加指定すると、枠線を入れる事も出来ます。

少しだけ説明

• cellpadding="" はセルと画像の余白を指定。0で余白無し。

解りやすい様にborder="5"で枠をつけてます。

• cellspacing=""はセルの間隔を指定しています。0でセル間隔無し。cellspacing="10"で以下の感じ。内罫線が太く見える感じになります。指定（追加）しない場合は、ブラウザの仕様でデフォルトの間隔が空きます。

解りやすい様にborder="5"で枠をつけてます。

• 更に、テーブルレイアウトなのでこんな事も可能です。

<table cellpadding="0" cellspacing="0"><tbody>
<tr>
<td>
ここにカーソルを合わせます。
</td>
<td>
ここにカーソルを合わせます。
</td>
</tr>
<tr>  *ここから2行目です。
<td>
ここにカーソルを合わせます。
</td>
<td>
ここにカーソルを合わせます。
</td>
</tr>
</tbody></table>

こんな感じに4画像が組み合わせ表示されます。

記事を作成中に簡単に出来る方法で、なかなか便利だと思います。

ちょっとしたBlogger備忘録