見出し、リスト、画像、グループなど WordPress 標準のブロックに対して、VK Blocks 独自の装飾スタイルや機能を追加しています。無料版の VK Blocks および VK Blocks Pro で利用できます。
- 1. 検索ブロック
- 2. 見出しブロック
- 2.1.1. 装飾なし
- 2.1.2. 背景塗り 灰色
- 2.1.3. 二重線 上下線 黒
- 2.1.4. 二重線 下線 黒
- 2.1.5. 直線 上下線 黒
- 2.1.6. 直線 下線 黒
- 2.1.7. 点線 下線 黒
- 2.1.8. 左右線
- 2.1.9. 括弧 黒
- 3. リストブロック
- 4. グループブロック
- 4.1. ブロック全体にリンクの設定
- 5. カバーブロック
- 5.1. ブロック全体にリンクの設定
- 6. 画像ブロック
- 7. カラムブロック
- 7.1. カラムごとにリンク設定
- 7.2. カラムの表示順
- 7.2.1. カラムの方向：逆（オン）
- 7.2.2. カラムの方向：逆（オフ）
- 8. テーブルブロック
- 8.1. 水平方向のスクロール
- 8.2. セルの縦積み
検索ブロック
見出しブロック
※見出しブロックの装飾（線の色など）については、現状は色を指定できません。
装飾なし
背景塗り 灰色
二重線 上下線 黒
二重線 下線 黒
直線 上下線 黒
直線 下線 黒
点線 下線 黒
左右線
括弧 黒
簡単にコピペして使える見出しのブロックパターンもあります。VK Blocks 無料版の場合は、以下よりご確認ください。
コピペで簡単！現場で使える見出しパターン24選！(CSS解説つき)
見出しは、Webコンテンツにおいて重要な役割があります。見出しのデザインを工夫することで読者の興味を引いたり、情報を効率的に伝えることができます。しかし、どのような見出しデザインを使えばいいのかわからないという方も多いの […]
VK Blocks Pro の場合は以下よりご確認ください。
リストブロック
- リストアイコン 矢印
- アイコンの色は変更可能です。
- リストアイコン 三角
- アイコンの色は変更可能です。
- リストアイコン チェック
- アイコンの色は変更可能です。
- リストアイコン チェック 四角
- アイコンの色は変更可能です。
- リストアイコン チェック 丸
- アイコンの色は変更可能です。
- リストアイコン 指
- アイコンの色は変更可能です。
- リストアイコン 鉛筆
- アイコンの色は変更可能です。
- リストアイコン 笑顔
- アイコンの色は変更可能です。
- リストアイコン 不満顔
- アイコンの色は変更可能です。
- リストアイコン 数字 丸
- アイコンの色は変更可能です。
- リストアイコン 数字 四角
- アイコンの色は変更可能です。
グループブロック
VK Blocks 独自の装飾スタイルもありますが、ブロックテーマ X-T9 や、theme.json が有効な Lightning などの場合、WordPress の機能で線の色や背景色、余白などが設定可能です。
VK Blocks 独自の装飾スタイルは以下です。
直線
直線 角丸
点線
Dashed
二重線
スティッチ
直線 上下
シャドウ
Info
Success
Warning
Danger
ブロック全体にリンクの設定
ブロックツールバーの「リンクURL」にて、グループブロック全体にリンクの設定ができます。
カバーブロック
ブロック全体にリンクの設定
ブロックツールバーの「リンクURL」にて、カバーブロック全体にリンクの設定ができます。
画像ブロック
カラムブロック
カラムごとにリンク設定
カラムごとにリンクを設定できます。親のカラムブロックの中のカラムを選択し、ブロックツールバーの「リンクURL」にて設定が可能です。たとえば下記画像では、カラム01、02、03 それぞれにリンクを設定できます。
カラムの表示順
親のカラムブロックにて「カラムの方向」で「逆」をオンにすると、カラムの表示順が左右逆（HTML上とは逆）になります。
「逆」を適用すると、編集画面ではカラムブロックの右上に「Reverse」のラベルが表示され、「カラムの方向」のVKのアイコンが黒く反転します。設定していることが視覚的に分かるようにしてあります。
また、カラムブロックの設定項目である「モバイルでは縦に並べる」がオンの状態であれば、スマホで表示したときに上から表示されます。
下のカラムブロックは、カラムの方向を逆に設定しています。そのため、スマホで表示したときに1→2の順で表示されます。
カラムの方向：逆（オン）
スマホで表示すると、Lightning の画像が上に表示されます。
Layout Control
Lightning は カラム任意のカラム数を設定する機能があり「外観 > カスタマイズ > Lightning レイアウト設定」または各個別の記事編集画面の「Lightning デザイン設定」から指定する事ができます。
カラムの方向：逆（オフ）
スマホで表示すると、見出しとテキストが上に表示されます。
Layout Control
Lightning は カラム任意のカラム数を設定する機能があり「外観 > カスタマイズ > Lightning レイアウト設定」または各個別の記事編集画面の「Lightning デザイン設定」から指定する事ができます。
テーブルブロック
水平方向のスクロール
「テーブルの水平方向スクロール」で「スクロール」を有効にすると、ブレイクポイント（モバイル / タブレット / PC ）を選べます。テーブルのレイアウトをスマホとPCで変えたくないときなどにご活用ください。
また、「スクロールメッセージを表示」を有効にすると、テーブルの上部右側にメッセージが表示されます。メッセージの内容は編集可能です。
さらに、メッセージの前後に表示される Font Awesome のアイコンは、お好みのものに変更できます。
テーブルブロックには「表のセル幅を固定」の設定がありますが、水平スクロールのブレイクポイントに達すると、セルの幅は固定されなくなります。
セルの縦積み
「セルを縦方向にする」を有効にして、選んだブレイクポイント（モバイル / タブレット / PC）に応じて、テーブルを縦積みに表示できます。表の内容によってはモバイルでは縦積みにして見やすくしたいケースなどにご利用ください。水平方向スクロールの設定も併用できます。
