コピペで使えるブロックパターン集
VK Patterns Library では、WordPressのブロックエディタで使えるブロックパターン集を公開しています。
あらかじめデザインされたパターンをコピー＆ペーストすることで、見た目そのままご自分のサイトで使っていただくことができます。
デザインテンプレートのような感覚でお好きなパターンを選んで組み合わせていくだけで、サイトができあがります。
こんな方にご活用いただけるパターンをご用意しています
- 原稿はまだ用意していないけれど、ダミーの内容でサイトを構築して雰囲気をつかみたい方に
- ブロックパターンでどんな組み合わせができるか知りたい方に
- サイトコンテンツのヒントを得たい方に
- サイトのパーツデザインの参考をお探しの方に
- モックアップサイトを素早く作成したい受託制作者の方に
ショート動画で使用イメージを掴んでいただけます（約２分）
無料でも使えて、ライセンスユーザーはさらに豊富に＆便利に！
無料版ユーザー
WordPressのデフォルトテーマ「TwentyTwentyThree」をはじめ、無料フルサイト編集対応テーマ「X-T9」や無料ブロックエディタ対応テーマ「Lightning」をご利用の方向けパターンをご用意しています。
お好みのパターンをコピーしてサイト構築にお役立てください。
下記の「パターンの使い方」「画像やテキストについてのご注意」などよく読んでご利用くださいませ。
ライセンス有効期間ユーザー
WordPress テーマ「Lightning」のPro機能「G3 Pro Unit」や「VK Blocks Pro」プラグインが利用できるライセンス製品「ベクトルパスポート」をご利用の方向けに、無料版パターンに加えて、さらに豊富で充実したプレミアムなパターンをご用意しており、このサイトに掲載の全てのパターンをご利用いただけます。フルサイト編集対応テーマ「X-T9」向けパターンも随時追加中です！
このほか、大変便利な「お気に入り機能」でお好きなパターンをご自身のWordPress編集画面に呼び出すことが可能です。ぜひご活用ください。
パターンの使い方
パターンをコピーする
パターンの詳細ページで、[このパターンをコピーする]ボタンをクリックします。
編集画面を開く
ご自分のサイトのダッシュボードにログインし、編集画面を開きます。
パターンをペーストする
パターンを貼り付けたい箇所にカーソルを合わせ[ペースト]します。
パターンは実際にはテキスト(HTML)からできています。テキストをコピー & ペーストするのと同じように、パターンもコピー & ペーストできます。
ペーストしたパターンにはキーカラーが反映されます
WordPress のテーマで Lightning をお使いの場合は、パターンをペーストした際にご自身が設定されているキーカラーが反映されます。
編集する
パターンをペーストしたあとは、内容やデザインを編集することができます。
テキストや画像は見本ですので、サイトに合った内容に差し替えてください。
パターンの種類（随時追加中です！）
対応テーマ
現在、下記３つのWordPressテーマに対応したパターンを公開しています。
（下記以外のテーマでの表示確認はしておりませんが、うまく表示できる場合もあります。必要となる使用プロダクトも合わせてご確認ください。）
パターンタイプ
- セクション
ひとつ、または2〜3個のブロックからなるコンテンツの一部です。
スタッフ紹介、会社概要、地図のようなパターンがあります。
複数のセクションを組み合わせることで、ページを作ることができます。 - ページ全体
セクションの集まりです。
例えば「会社案内」のようなページのコンテンツをワンクリックで作ることができます。
業種
これから作成したいサイトの業種ごとに活用できるさまざまなパターンをご用意しています。
使用デモサイト
業種によっては、デモサイトをご用意している場合があります。
ぜひ、参考になさってください。
使用条件
- WordPress バージョン 5.8以上のブロックエディタ
- パターンに記載の[使用プロダクト]に合わせたプラグインをインストール・有効化した上でお使いください。
使用プロダクト
WordPress から標準で提供されているブロックのほか、ベクトル提供の拡張ブロックやデザインスキンを使用しています。
[使用プロダクト]をご確認のうえ、同じプラグインをインストール・有効化した上でパターンをペーストしてください。
- VK Blocks (拡張ブロック)
この記載があるパターンではプラグイン「VK Blocks」を利用しています。
「管理画面」→「プラグイン」→「新規追加」から「VK Blocks」プラグインを検索してインストール、有効化してご利用ください。 - VK Blocks Pro (拡張ブロック有料版)
この記載があるパターンではプラグイン「VK Blocks Pro」を利用しています。
Lightning G3 Pro Unit / Katawara / Lightning Pro など弊社有料テーマ・プラグインのライセンス保有者の方は、「管理画面」に表示されるメッセージより VK Blocks Pro のインストールが可能です。 - カスタムCSS (拡張ブロック有料版「VK Blocks Pro」の機能)
この記載があるパターンではプラグイン「VK Blocks Pro」の「カスタムCSS」機能を利用しています。 - Evergreen (デザインスキン)
この記載があるパターンではデザイン拡張プラグイン、「Evergreen」を利用しています。
※この商品は Lightning G3 Pro Unit と VK Blocks Pro が必要です。
お持ちでない場合は別途 Vektor Passportをご購入ください。
※無料版の Lightning のみに適用させてもデザインスキン「Evergreen」は選択できません。 - ExUnit (機能拡張プラグイン)
この記載があるパターンでは機能拡張プラグイン「ExUnit（VK All in One Expansion Unit）」を利用しています。
「管理画面」→「プラグイン」→「新規追加」から「VK All in One Expansion Unit」プラグインを検索してインストール、有効化してご利用ください。
スマホやタブレットでの見え方を確認できます
パターンの詳細ページ にあるドロップダウンより画面サイズを選択することで、デバイスの幅によってどのように見え方が変化するか確認することができます。
画像やテキストについてのご注意
VK パターンでは、仮の画像、テキストを提供しています。
実際に公開されるサイトに合った画像、テキストに差し替えてください。
素材のご案内
パターンに利用している参考画像素材を案内しています。
同一の画像は公開が終了している場合がありますのであらかじめご了承ください。
画像の使用許諾等はリンク先のサイトにてよくご確認ください。
これからも増えていきます / リクエストがある場合
VK パターンライブラリ では、美しく使いやすいパターンを随時追加しています。
「こういう業種も欲しい」「こういうパターンもあると良いな」という場合は、どなたでもご参加いただける VWS コミュニティの Discord内にある「#改善要望」チャンネルにてお聞かせください。