VK Blocksで装飾した見出しブロックを追加する方法(CSS書ける人向け)

VK Blocksにオリジナルの見出しブロックを追加作成する方法を紹介します。

基本的なCSSコードが書ける人向けの記事です。

VK Blocksは使いこなす事ができればコーディング時短になります。

私が使用してるのはVK Blocks Pro版です。

VK Blocks Pro版はVektor Passport(アップデート期間1年)を購入するとダウンロードできるプラグインです。

webサイト制作の受託案件をしてるwebデザイナーさんだとPro版の方が使えるブロックの種類が多いから便利かと思います。

自分でPHPやJSでコーディングしてWordPressに組み込むのが面倒で苦手な人(私もですが)はVK Blocksで自分独自のブロックパーツを作って登録した方がコーディングの時短になります。

無料版はWordPress公式ディレクトリ登録プラグインなのでWordPress管理画面から無料でインストールできます。

VK BlocksのおすすめポイントはLightning以外の他のテーマでも動作するという点です。

公式サイト

VK Blocks | 事業案内 | 株式会社ベクトル

「VK Blocks」は、WordPressのブロックエディタに対応したプラグインです。WordPress公式ディレクトリに登録してありますので、WordPressの管理画面より無料でインストー…

WordPress管理画面の設定から「VK Blocks」をクリックします。「カスタムブロックスタイル設定」から新規のオリジナルブロックを追加します

VK Blocksで装飾した見出しブロックを追加する方法(CSS書ける人向け)

「見出し」をクリックして好きなラベルの名前、CSSクラス名をつけます。

VK Blocksで装飾した見出しブロックを追加する方法(CSS書ける人向け)

CSSクラスの箇所に見出しのCSSコード書いて追加します。

VK Blocksで装飾した見出しブロックを追加する方法(CSS書ける人向け)

【完成!】ブロックの「見出し」をクリックして右側のメニューに追加した見出しブロックが表示されます。

VK Blocksで装飾した見出しブロックを追加する方法(CSS書ける人向け)

当サイトの宣伝

当サイトからご依頼いただけるとLightningテーマ、VK Blocks Proを使用したWordPress LPサイト制作ができます。

私がライセンスキー取得しているためお客様に新規でテーマ、プラグインを購入してもらう必要がありません。(お客様の方でライセンスキーを購入していただくことも可能です)

ブロックエディタでLPサイトを構築してみたい方はご相談ください。

WordPress参考書籍

Follow me!

投稿者プロフィール

Mika
MikaLP専門webデザイナー
LP制作代行サービスをしています。
ブログではweb/LPデザイン、フリーランス、ランサーズのことなど記事を書いています。
LP制作代行 フリーランス LPデザイナー ランディングページ 見積もり無料 料金価格

WordPressのランディングページ(LP)制作を依頼してみませんか?
もちろん通常のHTMLのLP制作の対応も可能です。

WordPressのランディングページ(LP)はワードやパワポ感覚で編集が簡単に行えるためお客様ご自身で修正や更新が行えます。

WordPressのLP制作実績