この記事では「VK Blocks」のアラートブロックをアレンジしたものを掲載しています。各ブロックともコピーしてお使いいただけます。

こちらの記事に掲載しているものについて、制作にお役立ていただけますと幸いです。

プラグイン「VK Blocks」とは

以下の記事で説明しています。よろしければご覧いただけますと幸いです。

WordPressブロックエディター拡張プラグイン「VK Blocks」について、無料版とPro版の両方を紹介

WP Pilot

「アラート」ブロックとは

公式の解説・アレンジ集

• アラート | 事業案内 | 株式会社ベクトル
• カスタム CSS ( Pro版のみ ) | 事業案内 | 株式会社ベクトル
• アラートブロック_カスタムCSS | VK パターンライブラリ

アイコン変更の例

アイコンはFont Awesome 7（Free）の中からお選びいただけます（2026/06/28現在）。

アイコンを変更するだけでも、割と幅広い用途で使えることが分かるかと思います。

Success

使用アイコン：fa-regular fa-circle-check

Info

使用アイコン：fa-solid fa-square-check

Warning

使用アイコン：fa-solid fa-hand-point-right

Danger

使用アイコン：fa-solid fa-skull-crossbones

カスタムCSS適用例（VK Blocks Pro）

注意点

以下は「VK Blocks Pro」をご利用の方限定の「カスタムCSS」機能を使ったものになります。

無料版をご利用の方は使っても意図通りには反映されません。

カスタムCSS適用例①

使用アイコン：fa-solid fa-file-pen

selector {
  background-color: #eee;
  color: #060606;
  border: 1px #bbb solid !important;
}

selector .vk_alert_content {
  border-left: 2px #999 dashed !important;
}

カスタムCSS適用例②

使用アイコン：fa-solid fa-person-digging

selector {
  background-color: #eee;
  color: #060606;
  border: 1px #999 solid !important;
}

selector .vk_alert_icon {
  color: #0000BB;
}

selector .vk_alert_content {
  border-left: 1px #999 dotted !important;
}

カスタムCSS適用例③

使用アイコン：fa-solid fa-pen-to-square

selector {
  background-color: transparent;
  color: #060606;
  border: 3px #bbb dotted !important;
  border-radius: 6px !important;
}

selector .vk_alert_icon_icon {
  color: #AA0000;
}

selector .vk_alert_icon_text {
  color: #dd0000;
}

selector .vk_alert_content {
  border-left: 5px #933 solid !important;
  padding: 0.5em 0.8em;
}

カスタムCSS適用例④

使用アイコン：fa-solid fa-phone-flip

selector {
  background-color: #fff;
  color: #060606;
  border: 2px #333 solid !important;
  border-radius: 6px !important;
  padding: 0 !important;
}

selector .vk_alert_icon {
  background-color: #555 !important;
  padding: 0.5em 1em;
  color: #f0f0f0;
  width: 110px;
}

selector .vk_alert_content {
  border-left: 0px !important;
}

WordPressでブログやサイトを作るとき、「デザインをもっと簡単に整えたい」「コードを書かずに見た目を良くしたい」と感じる方は多いです。そんなときに役立つのが、ブロックエディター（Gutenberg）を強化するプラグインです。

その中でもよく使われているのが VK Blocks と VK Blocks Pro です。

この記事では、導入を検討している方向けに「何ができるのか」「無料版と有料版の違い」「どんな人に向いているのか」を、できるだけ分かりやすく整理します。

VK Blocksとは？

VK Blocks は、WordPressの標準ブロックエディターに「便利なパーツ」を追加するプラグインです。WordPressの公式ディレクトリに登録されており、管理画面の「プラグイン」検索画面から直接インストールできるようになっています。

WordPressの定番テーマ「Lightning」等を手がけている株式会社ベクトルにより開発されております。そのため、国産プラグインならではの安心感はありますし、とりわけ「Lightning」との相性は抜群です。

プラグインの特徴

通常のWordPressでは、文章や画像などの基本的なブロックは使えますが、デザイン性の高いレイアウトを作るには工夫が必要です。

VK Blocksを使うと、例えば以下のようなパーツが簡単に使えるようになります。

• ボタン（クリックを促すデザイン）
• ボックス（囲み枠）
• カード型レイアウト
• ステップ表示（手順説明）

つまり、「ブログの見た目を整える部品セット」のような役割です。

VK Blocksでできること（イメージ）

VK Blocksの特徴は「コードなしでそれっぽいデザインが作れる」ことです。

例えば以下のような装飾が可能となっています。

• 記事を読みやすくする：重要なポイントを「ボックス」で囲むことで、視線を集めやすくなります。
• 商品紹介がしやすい：カード型レイアウトを使うと、比較記事やレビュー記事が見やすくなります。
• クリックを増やす：ボタンブロックを使うことで、自然にリンク誘導ができます。
• レイアウトの細かい制御： 余白・スペースの細かい調整やレスポンシブ対応（スマホ・タブレット表示）の最適化等が可能です。

VK Blocks Pro（有料版）の特徴

VK Blocks Pro は、VK Blocksの機能をさらに強化した上位版です。無料版でも十分使えますが、Proでは主に次のような強化があります。

Vektor Passport（ライセンス期間1年）

ベクトルパスポートは、コピペで使える豊富なプロ品質のプレミアムパターンや、WordPressテーマ・プラグイン等が使えるお得なオールインワンライセンスです。

商品を確認する

販売元公式サイト

ポチップ

デザインパーツ・カスタマイズ機能の追加

以下のような、より「サイトらしい見た目」を作るためのパーツや機能が増えます。ひいては、レイアウトの自由度アップにより、表現の幅が広くなります。

• タブ型ボックスやグリッド等の高度なカードデザイン
• セクション・ボックスデザインのバリエーション
• ブロック・書式の独自カスタマイズ

サイト制作向けの機能が充実

ブログだけにとどまらず、以下のような「しっかり作り込むサイト」にも向いています。

• 企業サイト
• サービス紹介サイト
• ランディングページ（LP）

VK BlocksとVK Blocks Proの違い

シンプルにまとめると次のような違いです。

どんな人におすすめ？

VK Blocks（無料版）がおすすめな人

• WordPress初心者
• ブログを読みやすくしたい
• まずは無料で試したい
• シンプルなデザインで十分

VK Blocks Proがおすすめな人

• 企業サイトやLPを作りたい
• デザインにこだわりたい
• 作業効率を上げたい
• クライアント案件で使いたい

導入前に知っておきたいポイント

VK Blocksは便利ですが、以下の点も理解しておくと安心です。

① 使いすぎると重くなる場合がある

ブロックを多用しすぎると、ページがやや複雑になります。

特に、Pro版限定のブロックには構造が複雑なものも少なくありません。使い過ぎると読み込み速度の低下を招きます。

② テーマとの相性がある

WordPressテーマによっては、デザインの見え方が少し変わることがあります。そのため、事前の確認は要必須です。

また、LightningやKatawara、X-T9等の株式会社ベクトル製のテーマ、もしくはTwenty Twenty-Five等のシンプル志向のテーマとの相性は良いです。

一方、SWELLやCocoonなど、あらかじめ相当する機能が盛り込まれたテーマとの組み合わせはおすすめしません。

③ 最初はシンプルに使うのがコツ

いきなり全部使うより、枠線ボックスやボタンなど、無料版の機能から慣れるのが安全です。

こういったところである程度操作に慣れていただいた後、もしPro版の機能が必要であれば購入を検討いただくのが良いでしょう。

公式デザインパターン集も充実

VK Blocks（無料版）・VK Blocks Pro でご利用いただけるデザインパターン集も用意されています。2026/06/14現在、500を超えるパターンが用意されており、無料でご利用いただけるパターンも多数ございます。

登録されているパターンをもとに、使用イメージを掴んでいただくのも良いかもしれません。

• VK パターンライブラリ | コピペで使えるWordPress のブロックパターンライブラリ

機能ごとの解説・アレンジ集

【メモ】VK Blocks の画面サイズ毎の改行指定について

WP Pilot

「VK Blocks」のアラートブロック：アレンジ例

WP Pilot

まとめ

VK Blocks（無料版） は、WordPressの編集を「簡単に見やすくするための道具箱」のような存在です。

そして VK Blocks Pro は、その道具箱をさらに強化し、本格的なサイト制作にも対応できるようにしたものです。

上記の考え方で選ぶと失敗しにくくなります。