ワードプレスで無限にカラムを増やす方法(横一列にブロックを追加)

WordPress

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

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

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

カラムの追加

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

カラムブロックの選択
レイアウトの選択

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

2カラムにpタグ
プレビュー

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

色々なブロック
カラムonカラム

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>

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

カラム1

カラム2

カラム3

カラム4

カラム5

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

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


以上が「ワードプレスで無限にカラムを増やす方法(横一列にブロックを追加)」でした。

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

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

2020年2月24日WordPressGutenberg,WEB,WP

Posted by KT