WordPressのカラム設定はコードで書いてもとても簡単！

WordPressのエディター、Gutenbergを使ってブログ記事を作成している方が殆どだと思いますが、カラム操作もほんとに簡単で、さらに勝手にレスポンシブ対応で作成可能ですからほんと簡単に記事作成が出来ますが、文字色を白で作成したりする際にはちょっと困る場面もありますので、コード書いて貼り付けたり出来ないのかと調べてみたらとても簡単でした。

追記：実はWordPressの機能で普通に6カラムまで作れることがのちに判明しました。。。
記事の最後に作り方を追記します。

覚えるコードは一種類のみ

まさかとは思ったのですが、必要なコードは一種類のみでした。

大外は複数形のS付き
<div class="wp-block-columns">
<div>

中身は単数形で書く
<div class="wp-block-column">
<div>

たったこれだけでレスポンシブにしてくれるのですから、WordPress自体が非常に優秀である事がわかりますね。時々は使いにくいと思う場面もありますが。

テストで作ってみる

必要なのは「何重に囲うか」だけです。

2カラムの場合は２個入れる

コードはこんな感じになります。

<div class="wp-block-columns">
 <div class="wp-block-column">
  <h2>ひとつめ</h2>
  <p>ひとつめ段落</p>
 </div>
 <div class="wp-block-column">
  <h2>ふたつめ</h2>
  <p>ふたつめ段落</p>
 </div>
</div>

これをカスタムHTMLに記載すると

３つでテスト

ソースはこれです。

<div class="wp-block-columns">
 <div class="wp-block-column">
  <h2>ひとつめ</h2>
  <p>ひとつめ段落</p>
 </div>
 <div class="wp-block-column">
  <h2>ふたつめ</h2>
  <p>ふたつめ段落</p>
 </div>
　<div class="wp-block-column">
  <h2>みっつめ</h2>
  <p>みっつめ段落</p>
 </div>
</div>

同じようにカスタムHTMLに書くと

なんて簡単なんでしょうか。これで背景色やフォントカラーなども自由自在になりますね。

禁断の？４つは？

カラムの追加で４つはありませんね。でも作れるかも知れません。レイアウトがむちゃくちゃになりそうですけど。では実験。

<div class="wp-block-columns">
 <div class="wp-block-column">
  <h2>ひとつめ</h2>
  <p>ひとつめ段落</p>
 </div>
 <div class="wp-block-column">
  <h2>ふたつめ</h2>
  <p>ふたつめ段落</p>
 </div>
　<div class="wp-block-column">
  <h2>みっつめ</h2>
  <p>みっつめ段落</p>
 </div>
　<div class="wp-block-column">
  <h2>よっつめ</h2>
  <p>よっつめ段落</p>
 </div>
</div>

こちらをそのままカスタムHTMLへ。

なんと出来てしまいました。

スマホとタブレットの中間くらいの幅での表示がなんかおかしい感じですが、とりあえずは動く事が判明しました。

５個ではどう？

まさかの５個です。もうコードは不要ですね。

表示されますねw

でもレイアウトはめちゃくちゃです。

こんなの役に立つのか？

まぁ、なんでもやってみるブログですから、たまにはこんな実験も良いかと思ってやってみました。

後ろでどんな動きをしてるのかがわかると言えば大袈裟だと思いますが、こういった事をコード見ながら解析？するのも初心者にとってはトレーニングにもなるかと思ってコードを見るようにしています。

さいごに

役に立つ情報かどうかは不明ですが、ま、豆知識くらいになれば幸いです。

追記

3カラムまでしか作れないと勘違いしていましたが、最大６カラムまで作れることがのちに判明したため、こちらに記載したいと思います。

作り方

• カラムを選択
• とりあえず２カラムでもなんでも良いんで選択
• マウスで左上あたりを狙って「カラム」が表示されるところを探す
• 表示されたら「カラム」をクリック
• 右側のブロックのメニューにスライダーが表示されるので２〜６の中で希望するカラム数を選択する
• 出来上がり

上の「こんなかんじ」は6カラム、それぞれ特大文字で表示しています。

知らなかったのは自分だけのような気がしないでもないですが、、、、念のため。