グループブロック (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 を使っています。このプラグインはできることのわりにはお手頃な価格で購入できます。ウェブサイト制作業務をされている方に特におすすめです。

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

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

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

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

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

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

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

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