Hobby Graphics

WordPressのブロックエディター編集でもウインドウ幅などで画像の並べ方を変えたい

要約WordPressのブロックエディターで複数の画像などを横並びにレイアウトし、ウィンドウ幅やデバイスに応じて並べる数を調整するという内容です。ワードプレスのみでレイアウトを切り替えたいと考えたのですが、カスタマイズCSSを少し使うことになりました。


画像の配置を条件によって切り替えるスタイルを書いたのですが…

以前の仕事を掲載するページで、8個の画像を横並びにレイアウトしたいと思い、投稿ページを作成しました。ですがその時に、ブロックエディターの「横並び」のボックスは折り返しをしないものだと思いこんでしまい、うまくレイアウトできなかったため、簡単なCSSを書きました。
内容は、スマホでは画像を2列の横並びに、タブレットくらいのウインドウ幅以上では3列にし、それを超えたものは下に折り返していくという配置です。最後に余る画像はセンター寄せにしたいと思いました。

スマホ・ウインドウ幅767px以下
タブレット・ウインドウ幅768px以上

index.html

<body>
    <div class="wp-block-group triple-columns">
        <div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
            <figure class="wp-block-image size-full">
                <img src="images/blog-003-image_02.jpg" alt="" width="448" height="640" />
            </figure>

            <!-- 省略 -->

            <figure class="wp-block-image size-full">
                <img src="images/blog-003-image_05.jpg" alt="" width="448" height="640" />
            </figure>
        </div>
    </div>
</body>

style.css

body,
div,
figure,
img {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: grid;
    grid-template-columns: minmax(5vw, 1fr) minmax(33vw, 640px) minmax(5vw, 1fr);
    background-color: #f7f7f7;
}
.wp-block-group {
    margin-block: 2rem;
    grid-column: 2;
}
.triple-columns {
    .wp-block-group__inner-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        figure {
            width: calc((100% - 0.5rem) / 2);
            @media screen and (min-width: 768px) {
                width: calc((100% - 1rem) / 3);
            }
            img {
                max-width: 100%;
                height: 100%;
            }
        }
    }
}

上のHTMLは不要なクラスを削除して画像ファイルも差し替えていますが、HTM構造はワードプレスが出力したものを流用して再現しました。CSSはごく普通のものだと思います。
WordPressの画像をグループ化すると、.wp-block-groupの下に.wp-block-group__innerという<div>要素ができるので、そちらにdisplay: flex;を指定しました。
flex-wrap: wrap; gap: 0.5em; を指定。最後の行をセンター寄せにしたいので、justify-contents: center; を指定しました。子要素のfigure.works-imageにwidth: calc(（100% – 0.5em) / 2); と指定し、デスクトップ用にwidth: calc((100% – 1em) / 3); を指定。ウインドウ幅によって画像のサイスを切り替え、配置が変更されるようにしました。親要素と等しい幅（100%）から0.5emまたは1emを引いてから等分しているのは、画像の間隔（gap）の分を差し引いています。

他のページで似たようなことをするならブロックエディターで作りたい

再現ではない実際のページは以前の仕事を紹介するページで、少しイレギュラーなものなので、サイト作成時にまとめてCSSを書いています。でも一般的なブログを書く時のことを考えると煩わしいので、もう一度ブロックエディターを見直してみました。

あらためてWordPressの編集画面を見直すと、画面右側のサイドメニューに「複数行に折り返す」という項目があって、その設定を有効にすると「横並び」のブロックが flex-wrap: nowrap; から flex-wrap: wrap; に切り替わるようです。また、その上の「配置」という項目で justify-content の値を切り替えることができました。

右サイドメニュー上側の設定を
「配置」を中央寄せにして、「複数行に折り返す」を有効にしました

このページの画像は全てクリックすると画面いっぱいに広がるように設定しています。そのため画像が大きく、何も設定しないと「横並び」のボックス（flex container）の中に意図したように収まってくれません。なので、画像の幅を設定しました。このページはウインドウ幅が768px を超えると 640px のボックスが基準になるようにしています。間隔を0.5em（約8px）取りたいので、640px – (8px * 2) / 3 = 208pxを画像の幅にしました。

画像の幅を「208px」に設定しました


3列に並んでくれました。最後の画像が2個しかない行も中央寄せになっています。でも本来やりたいことはウインドウ幅が広くなった時には縦3列、狭くなった時は2列としたいのですが…

タブレット・ウインドウ幅768px以上
スマホ・ウインドウ幅767px以下　縦一列になっている

ウインドウ幅が狭くなったりスマートフォンで見る時には1列になってしまいます。画像の幅が208pxで固定されているので、約424px（208px * 2 + 8px）以下の幅の場合には1列になるようです。
例えば iPhone5 など幅320px のものまで考えるとして、左右の余白を考えない場合で154px、左右にそれぞれ5%の余白をつけるなら140pxに設定すればうまくいきそうなのですが、その場合はウインドウ幅が広くなった時には画像が小さいままで縦4列に並ぶことになります。残念…

少しだけスタイルを追加しました

flexの配置はflex item（今回はfigure）の設定で決まるので、ブロックエディターの画像ブロックに「double-to-triple」という追加CSSクラスをつけました。

追加CSSクラスに「double-to-triple」をつけ、画像の幅の設定を自動に戻しました

編集画面左サイドメニュー　外観 > カスタマイズ

.double-to-triple {
    width: calc((100% - 0.5em) / 2);
}
@media screen and (min-width: 768px) {
    .double-to-triple {
        width: calc((100% - 1em) / 3);
    }
}
スマホ・ウインドウ幅767px以下
タブレット・ウインドウ幅768px以上


で、double-to-tripleに上のスタイルを適用しました。その下は適用したスタイルの結果です。使用するテーマにもよるのかもしれませんが、初期設定のままだと「横並び」ボックスには0.5emのgapが設定されているようです。

間隔などをもう少し細かく調整したい場合

要素の縦横の間隔の調整などをもう少し細かく調整したい場合には、画像をまとめている「横並び」のボックスに追加CSSクラスを設定してgapなどの指定をし、その子要素のfigureに幅の設定をすれば同じようにレイアウトされます。

編集画面左サイドメニュー　外観 > カスタマイズ

.flex-single-to-double {
    column-gap: 1em;
}
.flex-single-to-double figure {
    width: 90%;
    margin-bottom: 1em;
}
.flex-single-to-double figure:last-child {
    margin-bottom: 0;
}
@media screen and (min-width: 768px) {
    .flex-single-to-double figure {
        width: calc((100% - 1em) / 2);
        margin-bottom: 0;
    }
}


上はこのページの画像の配置を指定したカスタマイズCSSです。ひとつ前の、figureに幅を指定したスタイルよりは少し手間がかかりますが、画像どうしの間隔を少し空けることができました。使い勝手が良ければ少し手を入れてテーマのstyle.cssに組み込む予定です。

可変幅のレイアウト、カスタマイズCSSでなんとかできました

カスタマイズCSSを使えばメディアクエリもcalc()関数も使えるのはわかっていましたが、ワードプレスのブロックエディターで画像の幅を指定しようとすると、ピクセルによる絶対単位指定しかできないことは実は今回初めて知りました。とはいえ、もしかすると選ぶテーマによっては相対単位も扱えるのかもしれません。今回ワードプレスの基本的な機能だけではウインドウ幅やデバイスによるレイアウトの切り替えはできませんでしたが、カスタマイズCSSを使えば対応可能なことがわかりました。
ページごとに必要なレイアウトが出てくれば一旦カスタマイズCSSで対応して様子を見ながら運用し、使用頻度が高いものはテーマ本来のstyle.cssに組み込むという使い方はありではないかと思います。

blog 一覧へ