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

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

2022.9.13 その④~その⑥ を追加しました。

2022.9.13 ブロックパターンをプラグイン化しました。

2022.9.17 アイディア次第で用途はいろいろ…を追加しました。

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

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

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

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

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

HTML / CSS の知識がないお客様でも
かんたんにコンテンツの追加・更新ができる

ということです。

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

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

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

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

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

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

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

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

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

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

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

枠をずらしてダブらせてみた

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

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

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

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

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

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

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

グループブロックなので、中に入れるコンテンツはなんでもオッケー!!
ってことは、アイディア次第でいろいろなことができます。

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

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

魚沼情報サービス
へのお問い合わせ

    • お名前 (必須)
    • メールアドレス (必須)
    • 題名
    • メッセージ本文 (必須)
    • リンク元

    確認画面は表示されませんので、上記の入力内容をご確認の上、下記のチェックをつけて送信してください。

    このフォームは表示見本です。実際の送信はできません。

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

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

    UJS Group Blocks 0.1.0

    このようにある程度用途を想定したブロックの組み合わせをいろいろとプラグイン化しておくと便利です。

    WordPress サイトにインストールするだけでかんたんにブロックパターンを使えるようにできますので、お客様に喜んでいただける仕様を短納期・低コストで提供できることが期待できます。

    UJS Group Blocks 0.1.0

    ブロックパターンをプラグイン化するために、ベクトルが開発・販売しているプラグイン VK Block Pattern Plugin Generator を使っています。このプラグインはできることのわりにはお手頃な価格で購入できます。ウェブサイト制作業務をされている方に特におすすめです。

    更新情報を受け取る

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

    対馬 俊彦
    対馬 俊彦魚沼情報サービス 代表
    新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

    WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

    * ドメインやサーバーの契約・申込み
    * WordPress やテーマ、プラグインのインストール
    * ドメインの移管・移転
    * 日常の更新作業
    なども含めて、サイトの制作・運用全般をお手伝いできます。

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

    » ご相談・お問い合わせはこちらからどうぞ

    WordPress サイト制作・カスタマイズ・サポートを承ります

    WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

    * ドメインやサーバーの契約・申込み
    * WordPress やテーマ、プラグインのインストール
    * アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
    * ドメインの移管・移転
    * 日常の更新作業
    なども含めて、サイトの制作・運用全般をお手伝いできます。

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