VK Blocks Pro 1.63.0 でブログカードにブロックバリエーション機能を追加しました。ブログカードブロックでお好みの設定に調整し、以降も同じ設定で繰り返し利用したい場合、都度調整するのは面倒ですよね。ブロックバリエーション機能を利用すれば、調整したブログカードを通常のブロックのように呼び出せます。大変便利ですので、ぜひご活用ください。
ブロックバリエーション機能の使い方
たとえば以下のように、文字のサイズや枠の色、画像のアスペクト比などを調整したとします。この組み合わせをブロックバリエーションとして登録します。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-06-1024x586.png)
ブロックバリエーションを登録する
「バリエーション設定」をクリックします。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-07-1024x343.png)
以下のような画面が表示されます。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-08-1024x496.png)
- 名前:固有のIDを半角英数字で入力します。
例)my-variation ※後から変更はできません。 - タイトル:バリエーションのタイトルを入力します。
- 説明:バリエーションの説明を入力します。
登録したバリエーションをインサーターやバリエーションピッカーに表示させるかどうかを設定します。カテゴリーも設定できます。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-10-1024x857.png)
アイコンを設定します。「ダッシュアイコンリスト」のリンクからアイコンを選びます。
アイコンの名前は「dashicons-」を省いた英数字を入力してください。 例) embed-generic
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-11-1024x268.png)
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-13-1024x554.png)
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-14-1024x381.png)
アイコンの名前を入力後、必要に応じてキーワードを設定します。キーワードは、ブロックを検索するときに探しやすくするためのものです。
「追加」をクリックして登録完了です。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-15-1024x271.png)
登録したブロックバリエーションを利用する
登録したブロックバリエーションは、通常のブロックのように呼び出して利用できます。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-23-1024x253.png)
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-17-1024x344.png)
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-18-1024x373.png)
ブロックバリエーションを編集・削除する
登録したバリエーションは、あとから設定内容を編集できます。また、不要になったバリエーションは削除できます。
「バリエーション設定」をクリックします。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-07-1024x343.png)
「登録済み」に切り替えて「編集」と「削除」が可能です。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-19-1024x207.png)
「削除」の場合は、確認メッセージが表示されます。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-20.png)
編集または削除後は「変更を保存」をクリックしてください。
![](https://www.vektor-inc.co.jp/wp-content/uploads/2023/11/blogcard-block-21-1024x144.png)
![](https://demo.dev3.biz/architect/wp-content/uploads/2022/10/vk-pattern-library-logo.png)
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
![](https://www.vektor-inc.co.jp/wp-content/uploads/2024/02/vk-ab-testing-key-visual-list.png)
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。