ブロックエディターの使い方 2【カラムブロック】大きさの比率を変える方法

今日は、「ブロックエディター」の
カラムブロックの使い方をご紹介します。

 

 

 

カラムブロックってなんですか?

 

WordPressの新しいエディター
「ブロックエディター」のブロックのひとつで、
列を分割させることができる機能ですよ。

 

 

  

・・・・??

 

まずは、この「カラムブロック」のご説明をしますね

ブロックエディターの「カラム」ブロックとは?

 

まずブロックエディターについておさらいしますね。

今までのエディターが、文字や画像を、
Wordみたいに1枚の文書のように書いていくのに対し

新しいブロックエディターは
「ブロック」と呼ばれるパーツを積み上げていくようになっています。

こんな感じ。

「画像」ブロックを縦に2個、積んでいます。

積み木みたいですね。

今日お話ししたい、「カラムブロック」というのは
このイラストの紫色の積み木みたいに、

ブロックを2個、横に並べる方法についてのお話です。

 

ブロックエディターで、複数のブロックを横に並べたい時は
「カラム」というブロックを使って、列を分割していきます。

 

カラムブロックはどこにあるの?

ブロックを追加するボタンを押すと
以下の画像の様な「よく使うもの」が開くと思います。

ここには、あなたが最近使ったブロックが表示される様になっています。

 

実は「よく使うもの」以外にも、たくさんメニューがあります。

「よく使うもの」という文字をクリックすると
他のメニューが見えるようになりますよ。

 

 

この中の「レイアウト要素」に
「カラム」ブロックが入っています。

 

カラムブロックの基本の使い方

「カラム」ブロックをクリックすると、ブロックが2個並んで挿入されます。

「文章を入力、または/でブロックを選択」と2つ書いてありますね。

 

ぱっと見わかりにくいんですが、

カラムブロック、という土台になる箱(青枠)が一つあって、
その中に別のブロック(赤枠)が入れられる、入れ子構造になっています。

 

カラムブロックは扱いにくい?

カラムブロックはクリックしにくいので
操作のコツをお伝えしておきますね。

土台になってる青枠のブロックをクリックしたい時、

いくらクリックしても、中身の赤枠ブロックばかり選択されて、
いまいちどこをクリックしたらいいのか、境目がわからないことがあります。

 

そんな時は、ブロックの左のほうにマウスポインタを合わせると(赤い矢印の部分)
ブロックを上下に移動させるボタンが出てきます。

ここをクリックすると、土台の方のカラムブロックが簡単に選択できますよ。

 

カラムブロックの分割数を変えるには

さて、無事カラムブロックが選択されると、
右側のメニューでカラム数が変更できるようになります。

カラムは最大で6個まで分けられます。

 

1カラムに並んでいた画像の下に、
「2カラム」に分けた画像を並べてみました。

 

さらに細かくしてみました。

子沢山(笑)

 

さて、カラムブロックの使い方がわかりましたら、ちょっと上級編です。

 

お気づきの方もいらっしゃると思いますが、
このように、カラムブロックは「何個に分割するか」は選べるんですが、

分けたブロックの大きさ(比率)は全部同じになります。

等分されただけのレイアウトでは
正直あまりかっこよくないし、使いにくいですよね。

 

そこで、今日はこの大きさを調整する方法も
あわせてご紹介します。

 

カラムブロックの分割比率を変えてみた

CSSを使うので、ちょっと難しいですが
コピペとアレンジでできますので、
自分でカスタマイズしたい!という方は
ぜひチャレンジしてみてください。

 

カラムブロックのCSSを確認

ここからは分析と考え方なので、
結果だけ知りたい方は、
ここをクリックして、先に飛ばしてくださいね。
  ↓
特定のカラムにだけCSSを適用させる方法

■ CSSを調べてみた

分割したカラムの1つをみてみると
「wp-block-colomun」という名前がついており、

.wp-block-colomunにはこんなCSSがついていました。

「flex-bases」というのが「50%」に設定されていることがわかりました。

■ 割合を変えてみた

50%で2分割ということは、
この数字を変えてみたらいいのかな?とこんなCSSを書いてみましたが

・・・変わりません(笑)

なぜかというと、
全部のブロックに同じクラス名がついているからです(笑)

1つを90%に設定したつもりでも、
2つ目以降もぜーんぶ「90%」と
同じ設定になってしまうので、効果がありません。

 

■ CSSを変えてみた

そのため、CSSをちょっと工夫して、
目的のブロックだけを
指定する必要があることがわかりました。

ーー CSS例 ーーーー

.wp-block-column:first-child{
flex-basis:40%;
margin-top:-20px;
padding:10px 10px 10px 10px;}

.wp-block-column:not(first-child){
flex-basis:25%;
}

ーーーーーーーーー 

このCSSを入れると、カラムブロックの大きさはこんな風になります。

1つ目だけやや大きめ(ここでは40%に指定)
他は全部小さく(ここでは25%)なります。

できた!けれど・・・

1段目も、1つ目だけ大きくなり
2段目も、1つ目だけ大きくなっていますよね。

このように、さっきのCSSだと
すべてのカラムブロック全部が、同じ比率に変更されてしまうんですね。

今後他のページでもカラムブロックを使うと
これもまた全て同じ比率になってしまいます。

そりゃ困りますよね。

 

■ 結論

というわけで、CSSが適用されるのは
特定のカラムブロックだけにしなければならない、
ということがわかりました。

 

特定のカラムにだけCSSを適用させる方法

それでは、カラムの分割をカスタマイズしたい、
特定のカラムにだけ、固有の名前をつけましょう。

カラムブロックを選択して、右側のメニューを見てみると
「高度な設定」があります。

 

これをクリックすると「追加CSSクラス」という欄があります。
ここに特定するための、個別の名前をつけましょう。

ここではcolumn1stにしてみました。

 

 

そして、CSSに「column1st」も書き足します。

ー CSS例 ーーーー

.column1st .wp-block-column:first-child{
flex-basis:40%;}

.column1st .wp-block-column:not(first-child){
flex-basis:25%;}

ーーーーー

※お約束として、CSSに名前(クラス名)をつける時は
名前の前に小さい点(ドット.)を付けるのがルールになっています。

 

■ 結果

 

また、これからは同じ比率にしたいカラムブロックがあれば、
今使った名前を「追加CSSクラス」に入れるだけで
適用されるようになりますよ。

CSSの便利なところですね^^

 

以上、カラム分けのサイズの調整CSSをご紹介しました。

ちょっと面倒なのですが・・後々アップデートして
簡単にできる様になるといいなぁと思っています。

私はこうしているよ、などあったら
是非お聞かせくださいね^^

ブロックエディターの基本の使い方についてはこちらの記事をご覧ください。

WordPress 5.0 Gutenbergグーテンベルク ブロックエディターの使い方1「ブロックタイプ」とは

Follow me!