2026年7月7日 / 最終更新日 : 2026年7月8日対馬俊彦 WordPress

VK Blocks Pro のカスタム CSS vs WordPress の追加 CSS

この2つは同じようなものだと思ったのですが、使い比べてみると違う点がいくつかあります。

この記事はアフィリエイト広告を利用しています。

WordPress 7.0 でブロックの設定画面に追加された 追加 CSS の入力欄に CSS を記述してブロックにスタイルを持たせることができるようになりました。この機能により、CSS でカスタマイズしたブロックをコピペして他のページ・他のサイトでかんたんに使い回せるようになりました。

ベクトル製プラグイン VK Blocks Pro にも カスタム CSS という入力欄があり、同じようにブロックにスタイルを設定できます。

この2つは同じようなものだと思ったのですが、使い比べてみると違う点がいくつかあります。

その違いをまとめてみました。

① 記述のルール

VK Blocks Pro のカスタム CSS は設定対象のブロックを selector で記述して、WordPress の追加 CSS は設定対象のブロックを & で記述します。

例えば、ブロックに含まれる段落ブロック内のリンクテキストを赤くしたい場合は以下のように記述します。

VK Blocks Pro のカスタム CSS

selector p a {
    color: red;
}

WordPress の追加 CSS

& p a {
    color: red;
}

② VK Blocks Pro は CSS が記述されている場所がわかりやすい

VK Blocks Pro はカスタム CSS が設定されているブロックの右上に「Custom CSS」と編集画面で表示されます。また、設定画面でも VK のロゴの背景が黒く表示されて、ここにコードが書かれているとすぐにわかります。

WordPress の追加 CSS は入力欄を表示しないと記述されていることを確認できませんので、どこに記述したのか確認しづらいです。

VK Blocks Pro のカスタム CSS

WordPress の追加 CSS

③ 詳細度

例えば、以下の CSS が設定されていて、サイト全体で本文内のリンクテキストの色が青に設定されているとします。

.entry-body a {
    color: blue;
}

この状態で特定の箇所だけリンクテキストを赤くしようとして、上記 ① の CSS を記述すると以下のような結果になります。

VK Blocks Pro のカスタム CSS

リンクテキストが赤くなります。

恒例のイベントを7月20日(月)に開催します。詳しくはこちら

WordPress の追加 CSS

リンクテキストが赤くなりません。

恒例のイベントを7月20日(月)に開催します。詳しくはこちら

上記の違いが起きる理由は出力されるコードにあります。

VK Blocks Pro のカスタム CSS

.vk_custom_css_1 p a {
    color: red;
}

.entry-body a よりも詳細度が高くなるので、リンクテキストが赤くなります。

WordPress の追加 CSS

:root :where(.wp-custom-css-d8dbb809 p a) {
    color: red;
}

.entry-body a よりも詳細度が低いので、リンクテキストが赤くなりません。赤くするためには !important を付ける必要があるのですが、ここで !important を使いたくないなぁ…って思います。

VK Blocks Pro の入手方法

VK Blocks Pro は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターンをはじめ、Lightning G3 Pro Unit、VK Blocks Pro などのベクトル主要製品・サービスを好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年から選べます。

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / X-T9 / VK Blocks / VK Filter Search などのベクトル製品のサポート、カスタマイズを最も得意としています。

打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのウェブサイト制作・運用のサポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら