WordPress 投稿画面に複数の画像を横並びに表示したい時

こんにちは、フルタニです。放送局で番組作りをしてました。 WordPress 投稿画面に複数の画像を横並びに表示したい時 を書きます。※本ページにはPRが含まれます

はじめてWordPressを学ぶ人はWordPress公式の勉強会に参加することをお勧めします。独学もアリですが、勉強会にははじめての人から達人まで参加していて、気軽に質問したり悩みを共有したりすることができます。おまけに無料。ここで世界を知るか知らないかで達成感が大きく変わります。マジ実感。

さて、WordPressに画像を表示するとき、1枚画像ならば簡単に貼り付けることができます。

では複数の画像を表示する場合どうしたらいいのでしょうか。

WordPressにはあまり詳しくありません試したらうまくいきました。

figureを使う方法

参考になったのがWordPressが Gutenbergの広報用につくったサンプルページです。

「Gutenberg エディターにようこそ」という記事を見ると写真が横並びに並べられています。これですよ。これ。

「とりあえずこんな形に並べてみたかった」ので、このコードを使ってみることにしました。

上は2つの画像のみのギャラリーです。フロート調整を行うことなく、魅力的な見た目のレイアウトを簡単に作成することができます。またブロックを切り替えて、ギャラリーを個別の画像へ簡単に戻すこともできます。

このコードを使って別途用意した画像に置き換えてみます。

黄色いラインで括ったところは画像の置き場所です。

ここにサンプル画像（サイズは横200ピクセル）を置き換えてみます。

コード上黄色の部分のリンクを書き換えると、画像を置き換えることができました。

スマホ画面で確認すると、縦横両画面に対応して画面が伸び縮みするレスポンシブ表示されます。

試写をしてわかりますが、この方法では画像が表示媒体によって拡大されたり縮小されたりします。

wp:gallery {“align”:”wide”} で括るという仕組みに秘密がありそうです。

便利なようですが、画像の質が荒かったりすると拡大した際アラが見えるので映像にこだわりを持つ方は高画質のものを使った方がいいかもしれませんが、私的にはこれがベストな方法かと思います。

もう一つこんな表示方法もあります。

floatによる表示方法

WordPressの記事中で画像を横に並べる一番簡単な方法 | らいふーる

先達さんのブログによればhtmを書くことで簡単に表示ができるとあります。

新エディター「Gutenberg（グーテンベルク）」でチャレンジしてみました。

htmlのひな形です。floatという命令を使って書かれた方法です。

基本の書式

“image”の部分を表示する画像のurlに書き換えればできあがり。

プラグインなどを使わずにレイアウトできます。

手順

「Gutenberg（グーテンベルク）」の場合、コードの前後を“!– wp:paragraph –“の命令で囲まないと認識しないので注意しましょう。

投稿画面に書籍の表紙画像を二つ並べてみることにします。

表示したい画像のタテヨコのサイズを確認します。

画像が大きすぎると画面に収まらなくなるので注意します。

画像の間隔も調整できます。 margin: 20pxの数字の部分を適宜調整すれば

htmlを探すのが大変だという人は、貼り付けたい画像をいったん[ビジュアルモード]で投稿画面の任意の場所に貼り付けて、画像のhtmlを確認しやすくすると楽です。htmlを選択・コピーした後、コードエディターを開いて貼り付けるという手順です。

画像リンクをコピーして”image1″や”image2″にペーストすれば完成です。

表示できる画像は自分のWordPressが所有する画像（メディアに入っているもの）だけでなく、ストレージ上に置いてある画像も使えると便利なので確かめてみました。

この方法では二つの画像が閲覧する媒体によって見え方が異なります。スマホを縦にすると横並びだった二つの画像が自動的に縦に並んでしまいます。画像のサイズは変わらないため、大きな画面で見せたい場合はこちらも有効な方法です。

画像をピクセル指定やサイズ指定で調整しながら最適なデザインを探りましょう。

まとめ

私は記事を書く際GoogleCromeのphotoライブラリーに画像を整理し、そこから適宜引用しています。画像のurlを貼り付けたところこちらも上手くいきました。表示速度は体感的にも変わりません。自分のサーバーの負担を軽くすることができます。