WordPressのブロックエディター(Gutenberg)で、もっと自由度の高いデザインを実現したい。そんな方におすすめなのが、国内開発の無料プラグイン「VK Blocks」です。

豊富なオリジナルブロックをノーコードで追加でき、初心者でも直感的に美しいページを作成できます。

本稿では、VK Blocksの概要・価格・使い方・トラブル時の対処法まで徹底解説します。

WordPressテーマ「GLUE」
WordPressテーマ「GLUE」
無料で高機能なWordPressテーマが手に入る。

VK Blocksとは?

VK Blocks

VK Blocksは、ブロックエディター(Gutenberg)を拡張する無料のブロックプラグインです。スライダー・ボタン・レイアウトブロックなど、ノーコードで多彩なデザインを追加できます。

WordPressテーマも開発している国内の開発会社が提供しており、公式ディレクトリから無料でダウンロードできます。

VK Blocks

メリット

  • 豊富な独自ブロック:スライダー、ボタン、スペーサー、カルーセルなど20種類以上を標準で利用可能。
  • ノーコード:ドラッグ&ドロップと設定だけで完結するため、初心者でも直感的に操作できます。
  • 日本語対応・国内開発:管理画面やドキュメントがすべて日本語で整備され、サポート情報も入手しやすく安心です。
  • 軽量かつ高速:余分なコードが少なく、サイトの表示速度に影響しにくい設計です。
  • 無料で利用可能:公式ディレクトリから完全無料でインストールでき、ライセンス料も不要です。
  • アップデート頻度が高め:新機能の追加や改善が頻繁にあるため、ユーザーとしても安心です。

デメリット

  • ブロックが多く選択に迷う:機能が豊富な分、初めて使うときはどのブロックを使えばよいか分かりづらい場合があります。
  • テーマによって微調整が必要:デフォルトのデザインがテーマと合わない場合、CSSで細かな調整が必要になることがあります。

VK Blocksの料金プラン

VK Blocks 無料版

  • 基本的なブロック群を無料で利用可能
  • 商用利用も制限なし
  • 公式ディレクトリからインストールでき、アップデートも無料
  • Pro版の追加ブロックやプレミアムパターンは利用不可

VK Blocks Pro(Vektor Passport)

ライセンス期間 価格(税込)
1年 ¥11,000
3年 ¥29,700
5年 ¥44,000
  • 無料版にはない追加ブロック・プレミアムパターン・拡張機能を利用可能
  • ライセンス期間中はサポートとアップデートを受けられます
  • ライセンス期間終了後も機能は利用できますが、アップデートとサポートは停止します(ブロックの正常な表示の保証もありません)
  • 自動更新はなく、更新は手動での購入が必要です
  • Pro機能のみの単体購入プランはなく、Vektor Passportの購入が必要です

VK Blocksのブロック一覧

VK Blocksで利用できるブロックを一覧でご紹介します。

また、WordPress自体のアップデートなどで、ブロック名の変更や特定のブロックが非推奨になる場合があります。

最新情報は公式サイト等でご確認ください。

レイアウト & セクション

  • セクション / 外枠装飾(Outer):セクション全体に背景色・画像、区切り装飾など(Pro)
  • グリッドカラム:任意ブロックを格子状に配置。画面サイズごとの列数指定(Pro)
  • グリッドカラムカード:最小幅を維持しつつカード状レイアウト(Pro)
  • レスポンシブ・スペーサー:デバイス別の余白を調整

VK Blocksのレスポンシブスペーサー

コンテンツ(テキスト・装飾)

  • ボタン / 横並びボタン:CTAボタン。横並びはPro
  • 枠線ボックス:上部に見出し付きのボックス
  • アラート:注意・補足を色枠で強調
  • フキダシ(吹き出し):人物写真×吹き出しの会話表現
  • フロー / ステップ:手順・流れの可視化(タイムラインを含む強化版はPro)
  • FAQ:Q&Aレイアウト(アコーディオン展開はPro)
  • アコーディオン:可変コンテンツの折りたたみ(Pro)
  • ダイナミックテキスト:ページ名・カスタムフィールド値を動的表示(Pro)

VK Blocksのボタン

VK Blocksの枠線ボックス

VK Blocksのアラート

VK Blocksの吹き出しとフロー

アイコン & メディア

  • アイコン / 横並びアイコン:Font Awesomeアイコンの単体・水平配置
  • ビジュアル埋め込み:iframeを視覚的プレビュー付きで埋め込み
  • スライダー:任意の画像・コンテンツをスライド表示
  • 投稿リストスライダー:投稿/固定/カスタム投稿をスライダー表示(Pro)
  • アニメーション:スクロール時に要素へ動きを追加(Pro)

VK Blocksのアイコンと埋め込み

VK Blocksのスライダー

投稿・一覧・ナビゲーション

  • 固定ページ本文:指定した固定ページの本文を差し込み
  • 先祖階層からのページリスト:階層ページの上位から自動的にリスト化
  • 子ページリスト:選んだ親ページ配下の子ページ一覧(Pro)
  • 投稿リスト / 選択投稿リスト:条件で投稿一覧、または任意選択で一覧(Pro)
  • アーカイブリスト:投稿タイプ別のアーカイブ一覧(Pro)
  • タクソノミー:任意のタクソノミー項目を一覧化(Pro)
  • パンくずリスト:階層ナビをブロックで設置(Pro)
  • ブログカード:URLからタイトル・概要・アイキャッチを自動埋め込み(Pro)
  • カテゴリーバッジ / 新着バッジ:カテゴリーのバッジ表示、NEW表示期間の設定(Pro)

VK Blocksの固定ページ

VK Blocksの先祖階層からのページリスト

固定表示・ユーティリティ

  • 固定表示:画面の上下左右いずれかに要素を固定配置(Pro)
  • Icon Outer / Button Outer:外側ラッパー付きの装飾(Proの外枠系)

VK Blocksの使い方

インストール方法

  1. WordPress管理画面の左側から「プラグイン」→「プラグインを追加」の順にクリック
  2. 検索欄に「VK Blocks」と入力
  3. 表示された「今すぐインストール」→「有効化」の順にクリック

以下の公式ページからプラグインをダウンロードして、アップロードすることもできます。

VK Blocks

設定方法

管理画面の「設定」>「VK Blocks」から、不要なブロックを無効化したり、カラーや余白などの基本スタイルを変更できます。

VK Blocksの設定方法

  • ブロックカテゴリー位置設定:ブロック挿入メニューで「VK Blocks」カテゴリーの表示順を変更
  • 吹き出しブロック設定:吹き出しブロックのアイコン・色・スタイルをデフォルト登録
  • 共通余白設定:デバイス別に、レスポンシブ・スペーサーなどで使用する余白サイズを設定
  • 分割読み込み設定:使用ブロックだけのCSS/JavaScriptを読み込んで軽量化
  • ブロックマネージャー設定:不要なブロックを一覧から非表示
  • ブロックスタイルマネージャー設定:各ブロックの不要なスタイルを非表示
  • インポート・エクスポートツール:設定内容をエクスポート/インポートして他サイトへ反映

操作方法

こちらの項目では、VK Blocksの主なブロックの使い方を解説します。

どのブロックでも共通の操作手順は以下のとおりです。

  1. 左上、またはページ一行目の右側にある「+」をクリック
  2. 「vk」などで検索してブロックを選択
  3. 挿入したブロック内にコンテンツを追加
  4. 挿入したブロックのサイズや色などを設定

VK Blocksの使い方

その後、プレビューでブロックが正しく反映されているかを確認します。

スライダーブロック

VK Blocksのスライダーブロックを使用するには、まず該当ブロックを選択します。

VK Blocks スライダーの使い方1

複数のコンテンツを追加する手順は以下のとおりです。

  1. ブロックの枠の付近をクリック
  2. スライダーのアイコンをクリック
  3. 「+」をクリックすると次の子ブロックが追加されます

これで、親ブロック(スライダーブロック)の中に子ブロックが設置され、その中に画像や文章を入力できます。

VK Blocks スライダーの使い方2

複数のブロックが表示されたら、子ブロックの中に「画像」や「段落」などのブロックを追加します。

VK Blocks スライダーの使い方3

追加したコンテンツのブロックをクリックし、各種設定を行います。

VK Blocks スライダーの使い方4

スタイル
  • デフォルト:標準表示。装飾なしのシンプルなスタイル
  • 角丸:画像の四隅をやや丸くする柔らかい印象
  • 角丸2:角丸より丸みを強調したスタイル
  • 正円:画像を完全な円形にトリミング
  • 枠線:画像の外周にシンプルなボーダーを追加
  • フォトフレーム:写真フレーム風の装飾で立体感を演出
  • フォトフレーム傾き右:フォトフレームを右に少し傾けたデザイン
  • フォトフレーム傾き左:フォトフレームを左に少し傾けたデザイン
  • シャドウ:画像の周囲にドロップシャドウを付加
  • 流体シェイプ1:ゆるやかな波形のマスクで流れる形状
  • 流体シェイプ2:別パターンの波形マスク。より滑らかな流れ
  • 流体シェイプ3:変化のある流体形状で動きを強調
  • 流体シェイプ4:複雑な波状の流体デザイン
設定
  • 代替テキスト:画像が表示できない場合や読み上げ用のテキスト
  • アスペクト比:縦横比を固定して表示
  • :画像の表示幅を指定
  • 高さ:画像の表示高さを指定
  • 解像度:表示品質(環境に応じた最適化)

「ブロックの余白」アイコンをクリックすると、コンテンツの上下の余白を設定できます。

VK Blocks スライダーの使い方5

その後、プレビューや公開を行うと、ページ上にスライダーが表示されます。

VK Blocks スライダーの使い方6

ボタンブロック

VK Blocksのボタンを追加します。ボタン内のテキストを入力したら、右側でボタンのサイズ・位置・スタイル・色など各種設定を行います。

VK Blocksのボタン1

お好みのボタンができたら、プレビューで確認し、問題がなければ公開します。

VK Blocksのボタン

※TCDテーマで使用するとデザインが崩れる場合があります。ボタンは、TCDクイックタグでも追加できます。

よくある質問(FAQ)

Q. 無料で使えますか?

A. はい、VK Blocks には無料版があります。公式WordPressディレクトリからインストール可能で、無料版だけでも多くのブロックを利用できます。

ただし、有料のPro機能も別にあり、無料版では使えないブロックやスタイルがあります。

Q. どのテーマでも使えますか?

A. はい、ほとんどのテーマで利用できますが、一部のテーマではデザイン調整が必要な場合があります。

TCDテーマで使用すると一部のブロックのデザインが崩れる場合があります。その場合、TCDクイックタグのボタンをご利用ください。

Q. ブロックが多すぎて管理が大変では?

A. 設定画面から不要なブロックを無効化すれば、編集画面をすっきり保てます。

Q. 有効化できない場合は?

A. WordPressのバージョンや他プラグインとの競合が原因の可能性があります。最新バージョンへのアップデート、不要なプラグインの一時停止、サーバーのPHPバージョン確認などを順に行い、再度有効化を試してください。

Q. 表示されない場合は?

A. 使用中のテーマやキャッシュ設定が影響している場合があります。ブラウザキャッシュの削除、キャッシュ系プラグインの無効化、テーマの切り替えなどを試し、ブロックエディターで再読み込みしてください。

まとめ

VK Blocksは、豊富なオリジナルブロックでWordPressサイトを手軽に美しくデザインできる強力なプラグインです。

初心者から中級者まで幅広く活用でき、コードに頼らず自由度の高いページを作りたい方におすすめです。

TCDテーマをご利用の方は、TCDテーマオプションクイックタグで同等の機能が利用できる場合があります。

売上が上がるネットショップが
WordPressで作成できる。
WordPressテーマ「RIKYU」
WordPressテーマ「RIKYU」
あらゆるジャンルのネットショップが作成可能。
WordPressテーマ「common」
WordPressテーマ「common」
デジタルコンテンツのECサイトがつくれる。
WordPressテーマ「Ankle」
WordPressテーマ「Ankle」
かわいいネットショップを簡単作成。
WordPressテーマ「EGO.」
WordPressテーマ「EGO.」
2大カートプラグイン対応のECサイトを構築。