画像を横並びに並べる方法(プラグイン不要！、Flexbox利用)

WordPressを触っていると、画像を横並びに並べたいと思うときがあります。では、画像を横並びに並べるにはどうしたら良いのでしょうか。その方法とその応用例を記します。さらに、方法の限界も示します。

写真1. 画像を4枚横並びに並べた様子

このページの概要(目次、タップできます)

1. 完成形の提示
2. CSSのFlexboxという考えかた
3. 実際のコードの提示
4. 本方法の欠点(FlexBoxの限界)
5. 参考文献

完成形の提示

グダグダいう前に完成形をお見せします。

これはEUの2大国(ドイツとフランス)の首都のシンボルを並べたものです。左がベルリンのブランデンブルク門、右がパリのエトワール凱旋門(いわば凱旋門)です。この2枚の画像の隙間を若干とっていますが、その隙間を狭くすることもできます。

これに対して、写真に説明を入れたくなることもあるでしょう。

ドイツ

フランス

また、2行×2列の4枚の画像を並べたい場合もありましょう。

もう2枚の画像は左がオーストリアのシュテファン寺院、右がハンガリーのブダペストの市街地(王宮の丘から眺めたもの)です。なお、この画像からはリンクを貼っています。景色が気になった人はクリックしてみてください。

このような完成系に持っていくのに必要な考えかたを記しましょう。

CSSのFlexboxという考えかた

以上のような画像の横並びはCSSにFlexboxという概念を導入すると簡単に実現できます。

復習のために、基本からおさらいしましょう。WordPressは以下の要素から成り立っています。

・HTML：文字情報や画像情報など、サイトの「中身」
・CSS：レイアウトを整える機能
・PHP：ページの動き(最新記事から順に表示する、タグごとに記事を表示する)の機能

各自でCSSとPHPをいじって1つのサイトを作り上げるのは難しいので、これら3つをパッケージして操作を容易にしたのがWordPressです。ここで私はわかったような文章を書いていますが、WordPressでCSSとPHPでどのような動きをしているのかはそこまで理解してません(WordPressのサイトを構築して2年でようやくわかってきた段階です)。

ここで、画像を横並びに並べるのは、レイアウトを整えることですから、CSSが関係すると推定できます(そしてその推定は正しいです)。

CSSでは多くの装飾が可能です。やりようによっては、アニメーションも実現できます。アニメーションのような高度な表現はセンスが必要ですので、センスのない私が運営している弊サイトには導入しませんが、ここで述べたいのは、CSSではそこまで高度な表現が可能ということです。

さて、現在のCSSではページ全体のレイアウトを決めることも可能です。Flexboxでは、左から(あるいは右から、中央寄せ)要素を並べます。要素とはこのページの例でいうと、ブランデンブルク門の画像や凱旋門の画像のことです。横(場合によっては縦)という1方向に進みますので、1次元レイアウトと呼ばれます。

そのため、Flexboxでは画像を横並びに並べることができます。例えば、画像を横2行、縦2列の合計4枚並べる場合は、横並びを2回繰り返すだけです。

実際のコードの提示

以上の基本を頭に入れて、実際のコードを提示いたします。

基本：実際のコード

実際のコードを提示する前に重要なことを思い出しましょう！そう、レイアウトを整えるCSSと実際の要素(ここでは外国の写真)を記すHTMLは別ものであるということです。そのため、レイアウトをCSSで整えて、実際の要素をHTML(投稿ページや固定ページ)に記します。

画像を横並びにしたい箇所はごく一部です。そのため、一部のみに適用したいclassをCSSであらかじめ設定しておき、HTMLでそのclassを呼び出すということをします。言っている意味がわからない？こう言いかえましょう。CSSで「横並びにするためのおまじない」を書いておき、通常はそのおまじないは封印します。そして、投稿ページや固定ページの横並びにしたい箇所に「おまじないを封印する呪文」を書くということです。

CSSで以下のように記述します(WordPressでは追加CSSに記せば問題ありません)。.flex-containnerや.flex-itemというのはclassの名称です。別にほかの単語でも構いません。



.flex-container{
    display: flex;
    justify-content: space-around;
  }
.flex-item{
  flex-basis: 47%;
    }

2行目の記述で横並びにしていて、3行目で均等割りにしています。そして、5行目で子要素(本記事の例えでは4枚の風景写真)のサイズを規定しています。50%以下では横に2枚、33.3%以下では横に3枚、25%以下では横に4枚、…となります。ここで47%と書いていますが、余ったスペースは余白になります。例示では47%なので、余白が若干生まれます。50%とすると余白がなくなります。

そして、投稿ページ(なり固定ページ)にclassを呼び出します。



<dl class="flex-container">
<div class="flex-item">要素1</div>
<div class="flex-item">要素2</div>
</dl>

ここで要素1、要素2にご自身で希望する写真を挿入します。ここでは要素を写真としましたが、CSSでの装飾した文字列などもかまいません。

奇数枚の写真のレイアウトの場合は？

ここで、要素は空白でも構いません。例えば、写真を横2列に並べている場合、写真が奇数枚だったらどうでしょうか。最後の行は写真が1枚しかなく、レイアウトが維持できません。そのような場合は、要素2に空白を入れます。すると、左詰めになります。

リンクは？キャプションは？

リンクを挿入するのは難しいことではありません。画像にリンクを挿入することはいくらでもできます。つまり、横並びになったことを確認して、その要素にリンクを挿入するだけです。このように「困難を分割する」という考えは重要です。

キャプションは要素1を写真+文字にするだけです。ドイツの画像+ドイツという文字列の場合は、写真の下にドイツという文字列を入れるだけです。

場所によってレイアウトを微調整したい！

場所によってレイアウトを調整したいこともあるでしょう。ある箇所は余白あり、ある場所は余白なしという具合にです。そのように微妙にレイアウトが異なる場合は、作りたいレイアウトによって、classを複数個作成します。

本記事で示した余白ありバージョンと余白なしバージョンでは、子要素を47%と50%と作り分けています。本記事を見ていただければわかりますが、同じ記事に複数のレイアウトが混在することも可能です。

本方法の欠点(FlexBoxの限界)

本記事の方法の欠点は、Flexboxでは画面サイズに応じて2次元に変わるレイアウトには対応できないことです。例えば、パソコンでは3列表示、モバイルでは2列表示に写真を表示するとなると、1次元でのレイアウトではなく、2次元のレイアウトです。2次元でレイアウトを考える場合はCSS Gridという概念を導入します(※)。余り1の要素があっても問題ありませんし(モバイル2列、パソコン3列の場合、7つの要素があると余り1の要素があっても上手に処理される)、そこまで難しい作業ではありません。

※新たに記事を執筆いたしました。画像を横並びかつ画面サイズに応じて並べる方法(プラグインなし、CSS Grid利用)で触れています。

逆に、モバイルで1列、パソコンで2列というのは可能です。この場合、モバイルでもパソコンでも1次元で処理できるからです。