コピペで使えるブロックパターン

VK Patterns Library では、WordPressのブロックパターンを公開しています。
あらかじめデザインされたパターンをコピー&ペーストすることで、見た目そのままご自分のサイトで使っていただくことができます。

パターンを選んで組み合わせていくだけで、サイトができあがります。

コーディング不要

パターンの組み合わせでサイトが完成、
htmlやcssの知識は不要です。

ボタンをクリックするだけ

ボタンをクリックするだけで、
コンテンツをすぐに挿入できます。

豊富な種類

パターンは随時追加しますので、
豊富な種類から選べます。

パターンの使い方

パターンをコピーする

パターンの詳細ページで、[このパターンをコピーする]ボタンをクリックします。

STEP
1

編集画面を開

ご自分のサイトのダッシュボードにログインし、編集画面を開きます。

STEP
2

パターンをペーストする

パターンを貼り付けたい箇所にカーソルを合わせ[ペースト]します。
パターンは実際にはテキスト(HTML)からできています。テキストをコピー & ペーストするのと同じように、パターンもコピー & ペーストできます。

ペーストしたパターンにはキーカラーが反映されます

WordPress のテーマで Lightning をお使いの場合は、パターンをペーストした際にご自身が設定されているキーカラーが反映されます。

キーカラーにブルーを設定している場合
STEP
3

編集する

パターンをペーストしたあとは、内容やデザインを編集することができます。
テキストや画像は見本ですので、サイトに合った内容に差し替えてください。

編集でアイコンを差し替える
STEP
4

パターンの種類

パターンタイプ

  • セクション
    ひとつ、または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 のインストールが可能です。
  • VK Grid Columns Card (拡張ブロック β版)
    この記載があるパターンではプラグインVK Grid Columns Card」を利用しています。
  • Evergreen (デザインスキン)
    この記載があるパターンではデザイン拡張プラグイン、Evergreenを利用しています。
    ※この商品は Lightning G3 Pro Unit と VK Blocks Pro が必要です。
    お持ちでない場合は別途 Lightning G3 Pro Pack をご購入ください。
    ※無料版の Lightning のみに適用させてもデザインスキン「Evergreen」は選択できません。

スマホやタブレットでの見え方を確認

パターンの詳細ページ にあるドロップダウンより画面サイズを選択することで、デバイスの幅によってどのように見え方が変化するか確認することができます。

超特大幅 / Extra Extra Large( 1440px ) での表示
小幅 / Small ( 576px ) での表示

画像やテキストについて

VK パターンでは、仮の画像、テキストを提供しています。
実際に公開されるサイトに合った画像、テキストに差し替えてください。

画像は必ず差し替えてください

仮の画像をそのまま使用すると直リンクになりサーバーに負荷がかかるため、必ず差し替えるようにお願いします。

素材のご案内

パターンに利用している参考画像素材を案内しています。
同一の画像は公開が終了している場合がありますのであらかじめご了承ください。
画像の使用許諾等はリンク先のサイトにてよくご確認ください。

これからも増えていきます

VK パターンライブラリ では、美しく使いやすいパターンを随時追加しています。

リクエストがある場合

「こういう業種も欲しい」「こういうパターンもあると良いな」という場合は、どなたでもご参加いただける VWS の Slack内にある「#改善要望と検討」チャンネルにてお聞かせください。