画像を横に並べる2つの方法
ブログの記事を投稿するのも慣れてきた頃に、誰もが「あれっ」と思うことがある。それはパソコンの画面で見た時に「画像が横に並べられない」ということ。コチラで解説した通り、画像のアップは至って簡単。だが、知識ゼロの私は、画像を横に並べられない。何をどうやっても下記のように縦に並んでしまうのだ。
色々と調べた結果、画像を横に並べるには大きく分けて2つの方法があることが判明した。それが下記の方法だ。
・「テキスト」編集画面で専用のタグを直接書き込んで画像を横に並べる方法
・プラグインをインストールして画像を横に並べる方法
WEBやHTMLに詳しい人であれば、直接タグを打ち込んで画像を横並びにできるのだろうが初心者には難しい。あの英語と数字と記号が意味不明に並んだ文字列を見ただけで「間違って入力したら今まで作ってきたブログが全部消えちゃうのではないか？」という恐怖心を抱いてしまうのは私だけではないはずだ。
画像を横並びにするプラグイン
初心者の私はプラグインを使うことにした。肝心のプラグインだが、ズバリ「Shortcodes by Angie Makes」がオススメ。画像を横に並べるプラグインは数多く存在するが、この「Shortcodes by Angie Makes」が操作が簡単で、使っているブロガーも多い。
さっそく「Shortcodes by Angie Makes」のプラグインをインストールして有効化する。プラグインのインストール方法は「Step.08」の「投稿に目次を付けたい！」で説明しているので、忘れてしまった方はそちらをご覧頂きたい。
「Shortcodes by Angie Makes」をインストールして有効化すると、投稿の編集画面の上部にある書式設定に[ ]（カッコマーク）が現れていることに気が付く。プルダウンの一番上にある「Columns」を選択すると、下の画像のように「1/2+1/2」とか「1/3+1/3+1/3」とか色々な選択項目が現れる。
例えば……
「1/2+1/2」は、2枚の画像を均等に横に並べる。
「1/3+1/3+1/3」は、3枚の画像を均等に横に並べる。
「1/4+1/2+1/4」ならば、中央の画像のみ1/2スペースの大きさ、両サイドに1/4スペースの大きさで、合計3枚の画像を横並びにする。
……という意味だ。
「Shortcodes by Angie Makes」を使ってみる
それでは、この記事の最初に掲載し、縦に2枚並んでしまった画像を、横並びにしてみよう。投稿の編集画面で普通に記事を書いていき、画像を挿入したいと思った所で、[ ]（カッコマーク）をクリック。今回は2枚の画像を均等に横並びにしたいので
「Columns」→「1/2+1/2」をクリック。すると……編集画面に専用タグが自動的に現れる。「Sample Content」という文字が2箇所にあるが、ここに画像を挿入、つまり「メディアを追加」すればオーケーだ。まずは上の「Sample Content」をマウスで選択した状態のままで……
「メディアを追加」をクリックして挿入したい画像を選び、画像を追加する。
これで1枚目の画像が追加された。続いて、下の「Sample Content」をマウスで選択した状態で、再度「メディアを追加」をクリックして、2枚目の画像を挿入する。
見ての通り、この状態ではタグの文字と画像が縦に並んでいるが、「更新」もしくは「変更をプレビュー」で実際の表示を見てみると……。
見事に2枚の画像が横に並んでいる。このようにプラグインを使えば簡単に画像を横並びさせることが可能となる。ちなみに今、スマホの画面でご覧頂いている場合は、当然、縦に並んだままとなっているはずだ。
並べる場合の画像サイズは？
注意して頂きたいのは、あまり大きな画像サイズだと、スペース的に横に2枚の画像が入らず、プラグインを使っても縦に並んでしまう。何度やっても横並びにならない場合は画像サイズを再確認して頂きたい。
では、画像サイズはどれくらいに設定すればいいのか？ これはブロガー個人の好みによるところが大きいが、私は上記のように2枚に画像を横並びさせる場合には、画像の左右幅をそれぞれ360ミリピクセルにした。
これはブログを美しく見せるテクニックになるが、2枚の画像の左右幅（ピクセル数）はもちろん、高さも揃えておきたい。つまり、2枚の画像の縦横比を揃えるのだ。1:1の正方形でもいいし、2:3の長方形でもいい。とにかく、2枚の画像の縦横比を揃えておかないと、横並びにした時に段差が出来て美しくない。
生まれて初めて自分のWEBサイトを立ち上げて1か月ちょっと。見た目にまでこだわる余裕が出てきた自分を褒めてあげたい。
