お問い合わせはコチラから

ブロックエディタのカラムブロックで複数行(2行x3列)を作る方法

サイト運営

WordPressのブロックエディタはだいぶ使いやすくなってきています。

最近はブロックエディタでサイトを作ることも多いです。

ブロックエディタの特徴は、グリッドレイアウトが簡単にできるということだと思います。

実はカラムブロックは1行しか対応していません。

例えば、2行x3列のグリッドを作成したいと思ったときに、素直に作ると3列のカラムブロックを2個使う方法になります。

■■■
■■■

この方法、編集している時には、一見良さそうに思えます。しかし、レスポンシブの時に2列の表示に切り替わると、2+1にわかれてしまい、連続したレイアウトにならなくなる問題があります。

■■

■■

では、ブロックエディタで奇数個のカラムをレスポンシブで連続させるにはどうしたらいいでしょうか?

この記事では、ブロックエディタのカラムブロックを1つだけ使って複数行のレイアウトを実現する方法についてご紹介します。

複数行カラムをブロックエディタで実現する方法

カラムブロックの1行にすべてのブロックを入れてしまえばよい

カラムブロックを複数使うとrowが複数あることになります。それが問題ですので、rowを一つにすれば問題は無くなります。

例えば、2行 x 3列の場合は、1行 x 6列のカラムにまとめます。

しかし、このままだと、PC画面では1行にすべてのブロックが表示されてしまうので、複数行のカラムを実現できません。

横長のカラムになってしまう問題をどう解決するか?

今回の方法の良いところは、PC画面サイズだけ問題が起きることです。

PC画面用のCSSを調整することで、複数行のカラムを実現します。

なので、大きな画面サイズの時だけCSSを書き換えてあげれば大丈夫です。

CSSの追加内容

追加CSSとかに書いておけば大丈夫です。

flex-grow:1が設定されていれば、flex-basisは正確じゃなくても自動的に調整されます。

/* 782px以上の場合 */
@media (min-width: 782px) {
/* nowrapを解除 */
    #hogehoge .wp-block-columns {
        flex-wrap: wrap;
    }
/* 折り返しブロックがくっつかないようにマージン追加 */
    #hogehoge .wp-block-column {
        margin-bottom: 16px;
    }
/* 折り返しブロックの行頭以外にマージン追加 */
    #hogehoge .wp-block-column:not(:nth-of-type(3n+1)) {
        margin-left: 16px;
    }
/* 一行のカラム数を3つに指定 */
    #hogehoge .wp-block-column {
        flex-basis: calc(33.333% - 16px);/*正確じゃなくてもOK*/
        flex-grow: 1;/*一番重要*/
    }
}

ギャラリーブロックを使う手もある

ブロックエディタのギャラリーブロックを使うことで、複数行のカラムと同じ構造が実現できる。

これですべて解決できそうですが、世の中そんなに甘くない。標準のままだと画像のリンク先を任意に指定できないので、本当のギャラリー以外では使えません。

しかし、画像バナーのリンク先を任意に指定するプラグインがありますので、そちらと組み合わせることで、数の制限なくほぼ同じことが実現できます。

ギャラリーブロック自体を以下の記事に従ってカスタマイズするとほぼ同じことが実現できます。

まとめ

ブロックエディタのカラムブロックは複数行に対応していませんが、CSSを追加することで複数行のカラムブロックを実現できます。

レイアウトによってmarginの挿入位置の調整が必要になりますが、意外と修正量は少ないことに驚かれたかもしれません。

この方法があれば、一行が奇数個のブロック分割になっている場合でも、いちいちHTMLを書かないでカラムブロックを使うことができるようになります。

タイトルとURLをコピーしました