クリニックのデモサイトから学ぶ、無料ブロックだけで作れる6つの小技

こんにちは、スタッフの久納です。
前回の、トリさんによる『時短に効く！WordPress ブロックエディターのコツまとめ』の記事は読まれましたか？知らないと損するブロックエディター時短Tips がぎゅっとまとまっています！まだ読んでない人はぜひチェックしてくださいね！

引き続き、『クリニックのデモサイトから学ぶ、無料ブロックだけで作れる6つの小技』を紹介していきたいと思います。

先日、VK FullSite Installer でインポート可能なデモサイト、「 クリニック｜内科 」を作りました。
その過程で、「無料ブロックだけでも、こんな表現できるんだ！」と感じたポイントがいくつかありましたので、この記事ではそれらの小技をまとめて紹介したいと思います。

無料ブロックの組み合わせや、VK Blocks のシンプルな拡張機能だけで実現できる内容ばかりですので、ぜひ制作に取り入れてみてください。

トップページ：ヒーローエリア内の重要なお知らせ

クリニックサイトでは、通常のお知らせとは別に「重要なお知らせ」を強調して見せたい場面があります。
このセクションでは、ヒーローエリア内に 「重要なお知らせ」カテゴリーの投稿だけを無料ブロックの組み合わせでスライダー表示 しています。

ざっくり解説

使用するブロックと機能

• [ VK Blocks ]スライダー
• [ コア ]投稿クエリーループ
• VK Dynamic If Block（NEWマーク部分）

ブロックの設定のコツ

1. 投稿 > カテゴリー には「重要なお知らせ」カテゴリーを作っておく
2. スライダーアイテムを2つ用意（投稿を2件表示したい場合）
3. 各スライダーアイテム内に 投稿クエリーループ を設置
   • 絞り込みの「カテゴリー」は「重要なお知らせ」にする
   • 2つ目のクエリーループの「表示」設定は オフセットは「1」 を設定し、2件目の投稿から表示されるように
4. 横並びブロックで「投稿タイトル」と「NEWマーク用テキスト」を配置
5. NEWマーク用テキストは VK Dynamic If Block を使って条件分岐　※ VK Dynamic If Block のチップスはこちら

トップページ：About US セクション

このセクションでは、コアブロックの背景グラデーション設定を使いながら、VK Blocks の 「非表示設定」 を組み合わせることで、必要なデバイスだけに構成を出し分ける工夫をしています。

ざっくり解説

使用するブロックと機能

• [ コア ]カラムブロックの背景グラデーション
• [ VK Blocks ]非表示設定

ブロックの設定のコツ

1. 3カラムのカラムブロックを設置し、親のカラムブロックの背景にグラデーションで、透明色・薄いベージュ・透明 のグラデーションを作る。
   背景グラデーションを使った小技紹介動画はこちらから
2. 左右のカラムにはカバーブロックで画像を設置（ここは画像でもOK、お好みで調整）
3. 左右のカラムブロックに VK Blocks の非表示設定で、非表示 ( 画面サイズ : xs ) ( 画面サイズ : sm )非表示 ( 画面サイズ : md )をオンにする。

トップページ：Greeting（院長挨拶）セクション

このセクションでは、コアブロックの背景グラデーション設定を使いながら、VK Blocks の カラム拡張機能「半分のコンテント幅」を組み合わせることで、ちょっと目を惹くバランスの良いセクションにしています。

ざっくり解説

使用するブロックと機能

• [ コア ]グループブロックの背景グラデーション
• [ VK Blocks ]カラム拡張機能「半分のコンテント幅」

ブロックの設定のコツ

1. 一番外側のグループブロックの背景にグラデーションで、薄いベージュ・透明 のグラデーションを作る。
   背景グラデーションを使った小技紹介動画はこちらから
2. カラムブロックは全幅で設置、左側のテキストの入ったカラムブロックに、レイアウト拡張 > 「半分のコンテント幅」をオンにする。

スタッフ紹介セクション

このセクションでは、カバーブロックの「コンテンツ位置を変更」機能と余白設定を組み合わせることで、名前部分が写真に少し重なるようなデザインを実現しています。白背景のグループブロックがカード風のアクセントになっています。

ざっくり解説

使用するブロックと機能

• [ コア ]レイアウトはグループブロックのグリッドレイアウト
  • [ コア ]各スタッフ部分はグループブロックでラップ
• [ コア ]スタッフの画像はカバーブロックで「コンテンツ位置を変更」で下部中央に

ブロックの設定のコツ

1. レイアウトは、グループブロックのグリッドを選択してグリッドレイアウトにします。各スタッフアイテムはグループでラップします。
2. 「1」で設置したグループブロック内にカバーブロックを配置（スタッフ画像）、さらに「コンテンツ位置を変更」で下部中央、ブロックの設定から「パディング」を「右」だけに「S」サイズを設定
3. 「2」のカバーブロック内に背景白のグループブロックを設置して、中にテキストで名前を入力
   • 名前の横の職種（看護師）は、横並びブロックにして設置

福利厚生制度セクション

福利厚生をひと目でわかりやすく伝えるため、アイコンがカードの外側に軽く飛び出すレイアウトを取り入れています。グループブロックの「マイナスオフセット」を利用することで、シンプルながら印象に残るデザインに仕上げています。

ざっくり解説

使用するブロックと機能

• [ コア ]レイアウトはグループブロックのグリッドレイアウト
  • [ コア ]各アイテム部分はグループブロックでラップ
• [ VK Blocks とコア ]アイコンブロックはグループブロックでラップしてマイナスオフセット

ブロックの設定のコツ

1. レイアウトは、グループブロックのグリッドを選択してグリッドレイアウトにします。各アイテムはグループでラップし、背景を白にします（ 以下 item-outer ）。
2. VK Blocks のアイコンを設置してグループブロックでラップし(マイナスオフセット用)、グループにマイナスマージンを設定
3. 「1」で背景白を入れた外側のグループ（item-outer）に、「2」で設定したマイナスマージンの数値（例 -4rem）の、マイナスを外した半分の数値（例 2rem から2.4rem）をマージンに設定する。（アイコンをマイナスオフセットしているため、グリッドが段落ちした時のブロックの間隔がなくなるためマージンを追加している）
4. タイトルや本文を設置して完成。

今回紹介した小技のブロックパターン紹介

今回紹介した小技のブロックパターンは VK Pattern Library にプレミアムパターンで登録してありますので、参考にしてみてください。

「クリニック｜内科」のトップページ

このトップページのブロックパターンは、クリニックのデモサイトとは少し異なり、VK Blocks Pro のアニメーションブロックを取り入れています。全体がより柔らかく、動きのある表現になるよう調整しています。

院長とスタッフ紹介

院長紹介の下に、今回紹介しているスタッフ紹介セクションがあります。パターンはプレミアムパターンですが、無料のブロックの構成になっています。

採用 福利厚生制度のセクション

パターンはプレミアムパターンですが、無料のブロックの構成になっています。

まとめ

クリニックのデモサイトづくりを通して、「無料ブロックでもここまでできる！」と感じたポイントをピックアップして紹介しました。
どれも特別なコードはいらず、ブロックの設定次第で再現できるものばかりです。
ぜひ、日々の制作の中で「これ使えそうかも？」と思った小技から試してみてくださいね。

ベクトルスタッフ以外の
ユーザーの皆様の参加大歓迎です！
参加特典もありますのでぜひご参加
お待ちしています！

この記事を書いた人

久納 美幸

デザインやCSSコーディング、フォーラム対応を担当しています。フォーラムでは「うなこ」という名前で投稿しています。

WordFes Nagoya（2013-2017）では、名古屋版わぷーを制作しました。

最近の投稿

• WordPress2025年12月8日クリニックのデモサイトから学ぶ、無料ブロックだけで作れる6つの小技
• WordPress2025年12月3日VK Dynamic If Block の痒い所に手が届く使い方紹介
• WordPress2025年9月24日「同期パターン（旧：再利用ブロック）」と「非同期パターン」の違いと使い分け
• WordPress2024年12月18日Lightning G3 Pro Unit の投稿一覧を LTG コンテンツエリア投稿ウィジェットのデザイン風にする方法