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

ブロックエディタのカラムブロックで複数行(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(:first-child){
	margin-left:0;
	}
/* 折り返しブロックの行頭以外にマージン追加 */
    #hogehoge .wp-block-column:not(:nth-of-type(3n+1)) {
        margin-left: 16px;
    }
/* 一行のカラム数を3つに指定 */
    #hogehoge .wp-block-column {
        flex-basis: calc(33.333% - 16px)!important;/*正確じゃなくてもOK*/
        flex-grow: initial;/*一番重要*/
    }
}

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

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

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

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

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

まとめ

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

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

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

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました