グループブロック (WordPress) のカスタマイズ例

WordPress 標準のグループブロックのカスタマイズ例です。今後随時カスタマイズ例を追加していきたいと思っています。

その① 斜線模様の枠をつけてみた

グループブロックに wp-block-group__inner-container というクラス名のインナーコンテナがあるので、CSS だけで楽にカスタマイズできそうだな～と思って、まずひとつ作ってみたのがこちらです。

カスタム HTML ブロックなどを使わずに既存のブロックをカスタマイズする大きなメリットは、

ということです。

弊社（魚沼情報サービス）ではカスタマイズしてお客様向けに作ったグループブロックを ブロックパターン として登録して、お客様がかんたんに呼び出して使っていただけるようにしています。これにより、下図に示すように、お客様はパターンの中から使いたいものをクリックしてエディター画面に追加して、ビジュアル編集により内容を書き換えていただけるようになっています。

その② 水玉模様の背景にしてみた

その③ 格子模様の背景にしてみた

その④ チェック柄の背景にしてみた

その⑤ 枠をずらしてダブらせてみた

その⑥ 角2つだけ枠線の色を変えてみた

ちなみに… 画像を使用していません

この記事に掲載している作成例は CSS でカスタマイズしています。画像は一切使っていません。

アイディア次第で用途はいろいろ…

グループブロックなので、中に入れるコンテンツはなんでもオッケー!!

ってことは、アイディア次第でいろいろなことができます。

例えば、ブログの新着情報をこんなふうに囲んでみたり…

お問い合わせフォームをちょっとおしゃれにしてみたりできますね。

カスタマイズしたグループブロックをプラグイン化しました

作成したグループブロックがいい出来なので😊、他の WordPress サイトでも使えるようにプラグイン化しました。

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2025年4月12日スターターパックのページヘッダーのデザインを追加しました
• WordPress2025年4月10日カバーブロックの背景画像を CSS で左右反転するやり方
• WordPress2025年4月4日スターターパックの前の記事・次の記事のデザインを追加しました
• WordPress2025年4月2日スターターパックの前の記事・次の記事のデザインを追加しました