ワードプレスで無限にカラムを増やす方法

今回は、WordPressのGutenbergで横に要素を追加する方法（カラムの追加）に関してのやり方や記述の仕方、無限に作る方法などを紹介していきます。

Gutenbergのブロックエディタでは基本的に縦一列にボロックが展開され一列に表示される仕様になっています。ただ横にも表示したいものもあるでしょう。そこで活躍するのがカラムの追加と言った考え方です。通常のサイト制作ではHTMLとCSSで自分で構築していかなくてはいけないが、ワードプレスの場合はあらかじめ独自のカラムをいくつか持っているのでそれに従って設置していくだけである程度完成します。

その方法は非常に簡単なので、是非覚えて綺麗なレイアウトなサイトを作ってみて下さい。

カラムの追加

カラムの追加は、ブロック選択→レイアウト要素→カラムで展開します。そのカラムを何カラムにしたいか？ブロック数とレイアウトを選択したらカラムが展開されます。

そうするとカラムの中にブロックの追加ボタンが出てくるので、そこに今まで通り要素を入れていきます。（下記の場合シンプルにpタグを2カラムに入れました。）

もちろんですが、カラムの中に画像やリストなどなんでも入れることができます。またカラムの中にカラムを入れることも可能です。

3カラム以上作りたい場合

またGutenbergのカラムブロックでは最大3カラムまでが限界です。それ以上のカラムを作りたい場合はカスタムHTMLで下記のコードをコピペして、「ここから〜ここまで」の部分を改行も含めて複製していけば無限にカラムを作成できます。（見た目上の問題で限界はあるが…）

<div class="wp-block-columns">
<div class="wp-block-column">
<p>カラム1</p>
</div>
<div class="wp-block-column">　ここから
<p>カラム2</p>
</div>　ここまでを複製
<div class="wp-block-column">
<p>カラム3</p>
</div>
</div>

実際の見た目は以下の様な感じです。

上記のカスタムHTMLでのカラムの複製を応用すれば下記の様なボタンも簡単に作成できます。

これはpタグをボタンの記述に差し替えただけです（面倒くさいのでレスポンシブには対応していません。）画面幅に合わせて作りたい場合は「wp-block-columns」と「wp-block-column」にメディアクエリ毎のwidthなどのCSSを追加すればOKです。

以上が「ワードプレスで無限にカラムを増やす方法」でした。

カラムの操作はレイアウトの綺麗さには欠かせない要素かと思います。美しいサイトを作りたいならば必ずマスターすべき部分でしょう。

下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。

WordPressの使い方や設定方法一覧：導入〜応用まで全て解説

このページはWordPressのダウンロード〜設定方法、Gutenbergの使い方、応用など、WordPressを使えるためにサポートするための記事です。（一覧まとめページ）

kt-life.net

2020.02.19