画像やアフィリエイトを横並びにして中央寄せにする……コレが簡単そうで意外とできない！
<div align="center">～</div>を使えば難しくないのですが、この方法は現在は非推奨の古いやり方となっています。
そこで今回は違う方法として、テーブルレイアウトとフレックスボックスを用います。
この方法なら画像だけでなくアフィリエイト（楽天アフィリエイトなど）でも使えるので使い勝手が良いです。
難しく聞こえるかもしれませんが、コピペすれば簡単にできますよ。
ということで、本記事では画像を横並びにして中央寄せにする方法を解説します！
画像横並びの方法
HTMLモードで記事を作成し、コードをコピペして画像①画像②のところを画像URLやアフィリエイトリンクに置き換えてください。
画像2個横並び
 |  |
<div style="display: flex; justify-content: center;"><table><tbody><tr><td>画像①</td><td>画像②</td></tr></tbody></table></div>
画像3個横並び
 |  |  |
<div style="display: flex; justify-content: center;"><table><tbody><tr><td>画像①</td><td>画像②</td><td>画像③</td></tr></tbody></table></div>
画像間の隙間調整方法
上述コードの<table>部分を変更することで、隙間をなくしたり間隔を広げたりすることが可能です。
以下を参考に数値を変更してみてください。
隙間なし
| | |
<div style="display: flex; justify-content: center;"><table border="0"cellpadding="0"><tbody><tr><td>画像①</td><td>画像②</td><td>画像③</td></tr></tbody></table></div>
隙間指定：10
| | |
<div style="display: flex; justify-content: center;"><table border="0"cellpadding="10"><tbody><tr><td>画像①</td><td>画像②</td><td>画像③</td></tr></tbody></table></div>
隙間指定：20
| | |
<div style="display: flex; justify-content: center;"><table border="0"cellpadding="20"><tbody><tr><td>画像①</td><td>画像②</td><td>画像③</td></tr></tbody></table></div>
Bloggerブログでの使用方法
記事の画面で、タイトル下のメニューアイコンの左端の【HTMLビュー】に切り替えます。
そこに前述のコードを貼り付け、画像①や画像②の部分をドラッグします。
ドラッグした状態で、タイトル下のメニューアイコンの画像を挿入を選択します。
普段記事を書く時と同様に画像を選択しましょう。
横並びにするので画像サイズは小～中がオススメです。
アフィリエイトの場合はドラッグした状態からリンクを貼り付けてください。
作業が終わったら【作成ビュー】に切り替えて頂いて問題ありません。
必要に応じて切り替えて作業を行いましょう。
これで中央寄せ横並びはバッチリ？
実を言うと自分も今まで方法が分からず、良くないと思いながら<div align="center">～</div>を使っていました。
ただテーブルタグをレイアウト目的で使用するのもあまり推奨されていないようで、今回紹介したコードも最適とはいかないと思います。
でも<div align="center">～</div>よりはマシということで……。
Bloggerブログで手軽に画像を中央寄せ横並びにする方法が他にもあるようなら申し訳ないです。
一つの例として参考にしてもらえればと思います！
