グループブロック (WordPress) のカスタマイズ例
WordPress 標準のグループブロックのカスタマイズ例です。今後随時カスタマイズ例を追加していきたいと思っています。
2022.9.13 その④～その⑥ を追加しました。
2022.9.13 ブロックパターンをプラグイン化しました。
2022.9.17 アイディア次第で用途はいろいろ…を追加しました。
その① 斜線模様の枠をつけてみた
グループブロックに wp-block-group__inner-container というクラス名のインナーコンテナがあるので、CSS だけで楽にカスタマイズできそうだな～と思って、まずひとつ作ってみたのがこちらです。
斜線模様の枠をつけてみた
WordPress 標準のグループブロックのカスタマイズ例を作ってみました。今後随時追加していく予定です。
グループブロックの 追加 CSS クラス：diagonal-line-frame-box-1 mw-640
カスタム HTML ブロックなどを使わずに既存のブロックをカスタマイズする大きなメリットは、
HTML / CSS の知識がないお客様でも
かんたんにコンテンツの追加・更新ができる
ということです。
弊社（魚沼情報サービス）ではカスタマイズしてお客様向けに作ったグループブロックを ブロックパターン として登録して、お客様がかんたんに呼び出して使っていただけるようにしています。これにより、下図に示すように、お客様はパターンの中から使いたいものをクリックしてエディター画面に追加して、ビジュアル編集により内容を書き換えていただけるようになっています。
その② 水玉模様の背景にしてみた
水玉模様の背景にしてみた
WordPress 標準のグループブロックのカスタマイズ例を作ってみました。今後随時追加していく予定です。
グループブロックの 追加 CSS クラス：polka-dots-1 mw-640
その③ 格子模様の背景にしてみた
格子模様の背景にしてみた
WordPress 標準のグループブロックのカスタマイズ例を作ってみました。今後随時追加していく予定です。
グループブロックの 追加 CSS クラス：lattice-1 mw-640
その④ チェック柄の背景にしてみた
チェック柄の背景にしてみた
WordPress 標準のグループブロックのカスタマイズ例を作ってみました。今後随時追加していく予定です。
グループブロックの 追加 CSS クラス：checked-1 mw-640
その⑤ 枠をずらしてダブらせてみた
枠をずらしてダブらせてみた
WordPress 標準のグループブロックのカスタマイズ例を作ってみました。今後随時追加していく予定です。
グループブロックの 追加 CSS クラス：shift-frame-1 mw-640
その⑥ 角2つだけ枠線の色を変えてみた
角2つだけ枠線の色を変えてみた
WordPress 標準のグループブロックのカスタマイズ例を作ってみました。今後随時追加していく予定です。
グループブロックの 追加 CSS クラス：corners-1 mw-640
ちなみに… 画像を使用していません
この記事に掲載している作成例は CSS でカスタマイズしています。画像は一切使っていません。
アイディア次第で用途はいろいろ…
グループブロックなので、中に入れるコンテンツはなんでもオッケー!!
ってことは、アイディア次第でいろいろなことができます。
例えば、ブログの新着情報をこんなふうに囲んでみたり…
ブログ新着情報
WordPress デモサイトの一覧ページを作成しました2024年3月6日
details / summary で作る排他的に開閉するアコーディオン2024年2月4日
Lightning のグローバルナビをカラフルにカスタマイズした4つの例2024年1月29日
対角のコーナーをカットした、CSS によるカスタマイズ例紹介2024年1月14日
お問い合わせフォームをちょっとおしゃれにしてみたりできますね。
魚沼情報サービス
へのお問い合わせ
このフォームは表示見本です。実際の送信はできません。
カスタマイズしたグループブロックをプラグイン化しました
作成したグループブロックがいい出来なので😊、他の WordPress サイトでも使えるようにプラグイン化しました。
このようにある程度用途を想定したブロックの組み合わせをいろいろとプラグイン化しておくと便利です。
WordPress サイトにインストールするだけでかんたんにブロックパターンを使えるようにできますので、お客様に喜んでいただける仕様を短納期・低コストで提供できることが期待できます。
ブロックパターンをプラグイン化するために、ベクトルが開発・販売しているプラグイン VK Block Pattern Plugin Generator を使っています。このプラグインはできることのわりにはお手頃な価格で購入できます。ウェブサイト制作業務をされている方に特におすすめです。
サイト運営者プロフィール
- 魚沼情報サービス (新潟県南魚沼市)
-
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
» ご相談・お問い合わせはこちらからどうぞ
WordPress サイト制作・カスタマイズ・サポートを承ります
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。
デザイナー様・制作業者様のお手伝いも数多く行っております。難しい部分のコーディングをやってほしい、いま人手が足りない、等々... お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきます。
