WordPressの新しいエディタGutenberg(グーテンベルク)には便利なブロックがたくさん装備されていますが、その中でも特に私が多用するものに「グループ」あります。

グループの使い方

複数の連続したブロックを選択してグループ化、もしくはブロックの一覧から「グループ」を選択し、その内部にブロックを挿入します。

グループ(ブロック)にすると、複数のブロックを一纏めに扱えます。また、スタイル(装飾)を加えることで色(テキスト、背景、枠線)や間隔、非表示設定などをブロック単位で設定することができます。(テーマによって異なります)

下の例は、見出し+段落+画像の同じブロック化したものを、スタイルや色の指定を変えてみた場合です。

クラッシックエディタの頃は枠線や背景色など設定が面倒でしたがブロックエディタになって非常に簡単になったと思います。

グループ ブロックのスタイル例

グループの使い方(例

このグループはテストです。

グループの使い方(例

このグループはテストです。

グループの使い方(例

このグループはテストです。

スタイルはテーマに左右される?

スタイルのデザインはテーマごとに決まっています。私の好きなテーマ「Lightning」ではブロックエディタに完全対応で、有料版(Pro)も無料版も同じデザインスタイルが豊富に入っています(これって、地味にすごいと思いました)

また、簡単に文字色・背景色・線の色が変えられるのは非常に便利です(一部、決め打ちのスタイルもあるみたいですが)

スタイルの修正を追加してみました

そんな、超便利グループブロックですが一部不満もあります、、それはスタイルの編集で

枠線の太さが変えられないこと

グループブロックのメニューの指定に 線の太さ はありません。

特に 直線  直線角丸  Dashed 二重線  の枠線が太い気がします?

好みの問題ですが、もっと細い線を使いたいときもあるかも??

ページにスタイルシートを当てればすむ話かもしれませんが面倒くさいし、、また、個別に修正したい場合もあるかもしれません?

個別の修正で「高度な設定」を使ってみました。

ブロックごとにスタイルシートを当てるなら「高度な設定→追加 CSS クラス」が有効です。

ブロックエディター「高度な設定」とは?

自分は、なんでも独学なものですから、基本的な事が解って無かったりします? ワードプレスの場合、デザインの修正にCSS(カスケーディングスタイルシート)の習得は必須…

事前にCSS(スタイルシート)を追加しておきます。

カスタマイズ → 追加 CSSに以下のコードを入力します

/*高度な設定クラス 枠線の太さ*/
/*スタイル(直線)*/
.sen01px.is-style-vk-group-solid {
border: solid 1px; 
}

/*スタイル(直線 角丸)*/
.sen01px.is-style-vk-group-solid-roundcorner {
border: solid 1px; 
}

/*スタイル(Dashed)*/
.sen01px.is-style-vk-group-dashed {
border: dashed 1px;
}

/*高度な設定クラス(二重線)*/
.sen01px.is-style-vk-group-double {
border: double 4px;
}

注意:テーマ「Lightning」用です

グループブロックの「高度な設定→追加 CSS クラス」にクラス名を追加します

それぞれのスタイルにはテーマのクラスが「高度な設定→追加 CSS クラス」に指定されていますので以下のクラス名(この場合 sen01px )を半角スペースを入れて追加します。

「テーマのクラス+ sen01px」

問題発生

しかし、この方法で枠線の太さを修正すると今度は「線の色」が修正できなくなるようです ^^;)

理由は「線の色」を指定すると色に応じた個別のクラス名が追加 CSS クラスに追加されるためで、枠の色の設定は無効になってしまいます?

▼ 追加される 「線の色」 のクラス名は(Lightningの場合)は以下のようですが、追加CSSに追加しても反映されませんでした。

vk-has-cyan-bluish-gray-color

vk-has-white-color

vk-has-pale-pink-color

vk-has-vivid-red-color

vk-has-luminous-vivid-orange-color

vk-has-luminous-vivid-amber-color

vk-has-light-green-cyan-color

vk-has-vivid-green-cyan-color

vk-has-vivid-green-cyan-color

vk-has-pale-cyan-blue-color

vk-has-vivid-cyan-blue-color

vk-has-vivid-purple-color

この辺が、素人の浅はかさというのかもしれません? ^^;)

結局のところ(ページ毎に)個別にCSS(スタイルシート)を加えてやれば良いのかもしれませんが、せっかく作ったので少し手を加えて再利用することにしました。

▼自分的に囲み線が 太い 目立つ のがイヤだっただけなので色を薄くする要素を加えました

/*高度な設定クラス 枠線の太さ*/
/*スタイル(直線)*/
.sen01px.is-style-vk-group-solid {
border: solid 1px; 
border-color: #dcdcdc;
}

/*スタイル(直線 角丸)*/
.sen01px.is-style-vk-group-solid-roundcorner {
border: solid 1px; 
border-color: #dcdcdc;
}

/*スタイル(Dashed)*/
.sen01px.is-style-vk-group-dashed {
border: dashed 1px;
border-color: #dcdcdc;
}

/*高度な設定クラス(二重線)*/
.sen01px.is-style-vk-group-double {
border: double 4px;
border-color: #dcdcdc;
}

左の線枠が太い方が修正前で、右の線が細くて薄い方が修正後のスタイルです。

スタイル(直線)

このグループはテストです。
<デフォルト>

スタイル(直線)

このグループはテストです。
<高度な設定に 追加 CSS クラスあり>

スタイル(直線 角丸)

このグループはテストです。
<デフォルト> です。

スタイル(直線 角丸)

このグループはテストです。
<高度な設定に 追加 CSS クラスあり>

スタイル(Dashed

このグループはテストです。
<デフォルト>

スタイル(Dashed

このグループはテストです。
<高度な設定に 追加 CSS クラスあり>

スタイル( 二重線

このグループはテストです。
<デフォルト> のグループはテストです。

スタイル( 二重線

このグループはテストです。
<高度な設定に 追加 CSS クラスあり>

ベクトルさんに「グループの枠線の太さを変えられるようにして~」と要望を出してみようとも思いましたが止めました ^^;)

たいして需要のある要望でも無さそうなので、、、^^;)

まとめ

グループのブロックは使い勝手も良くて重宝しています(^^)

テーマによってスタイルのデザインもまちまちだと思いますが、ちょっとした工夫でとても便利になりました。

以前はクラッシックエディタの方が使いやすかったんですが、最近はブロックに慣れてきて、、、

楽をさせていただいてます ^^;) 感謝・感謝♡