
見出し、リスト、画像、グループなどWordPress標準のブロックに対して、VK Blocks 独自の装飾スタイルを追加しています。VK Blocks Pro 及び 無料版の VK Blocks でご利用いただけます。以下の動画で詳しく紹介しています。
画面サイズ毎の改行指定
画面サイズ毎の改行
xs サイズで改行されます。
画面サイズ毎の改行
sm サイズで改行されます。
画面サイズ毎の改行
md サイズで改行されます。
画面サイズ毎の改行
lg サイズで改行されます。
画面サイズ毎の改行
xl サイズで改行されます。
画面サイズ毎の改行
xxl サイズで改行されます。
見出しなどでテキストの改行位置を画面サイズ毎に設定できます。見出しや段落ブロックなどで編集画面から改行したい箇所に改行タグ用のコードを挿入できます。

xs~xxl各サイズの範囲は以下のように設定されています。
- xs:~576px
- sm:576px ~768px
- md:768px~992px
- lg:992px~1200px
- xl:1200px~1400px
- xxl:1400px~



なお、改行タグ用のコードは複数挿入することも可能です。例えばmdサイズ以下で改行したい場合は、md・sm・xsのコードを挿入することで992px以下は改行されます。

テキストの改行禁止指定
テーブルの項目などのテキストは、ブラウザの表示領域やデバイスの画面に応じてセル内で改行されますが、改行させたくない場合に改行禁止指定ができます。

改行させたくないテキストを選択した状態で、ブロックツールバーから「Nowrap」をクリックすることで改行禁止指定が簡単にできます。

設定を解除したい場合は、設定を適用したテキストを選択した状態で、ブロックツールバーからアクティブになっている「Nowrap」をクリックして解除してください。
改行禁止指定した場合

改行禁止指定していない場合

文字サイズ変更
選択した文字のすぐ下に表示されるポップアップから文字サイズの変更が可能です。
- 小
- 標準
- 大
- 特大
また、文字サイズを変更している部分にカーソルを移動すると、ツールバーに「インライン文字サイズ」アイコンが表示され、視覚的に分かりやすくなっています。
テキストの色変更
部分的にテキストの色を変更したい場合は、テキストを選択して「テキスト色」をクリックしてください。


カラーパレットが表示されますので、ここから指定することができます。
蛍光マーカー

マーカーをつけたい箇所を選択してツールバーから「蛍光マーカー」を選択すると、ポップアップが表示されるので色を指定してください。カスタムカラーも利用できます。解除したい場合は、マーカーをつけた箇所を選択し「クリア」ボタンで解除できます。
蛍光マーカー 蛍光マーカー 蛍光マーカー 蛍光マーカー 蛍光マーカー 蛍光マーカー 蛍光マーカー 蛍光マーカー 蛍光マーカー 蛍光マーカー
各ブロック共通の余白設定
設置した各ブロックから共通の余白を設定できます。都度 レスポンシブスペーサー を配置しなくても、直接各ブロックから余白が設定できるため、大変便利です。
余白のサイズは lg / md / sm / 0 から選択可能です。上下に個別に余白の指定ができます。ブロック下部に自動で余白が付くブロックに対しては、余白を 0 にすることもできます。
一度設定した余白を解除するには、上記画像の場合、アクティブな「上 sm」「下 sm」を再度クリックすることで解除できます。
lg / md / sm の各余白のサイズについて
lg / md / sm の各余白のサイズは、レスポンシブスペーサー のデフォルトの 大 / 中 / 小 の各余白のサイズと同一です。lg / md / sm を指定した際の余白のサイズを変更したい場合は、設定 > VK Blocks > 共通余白設定 にてそれぞれ任意のサイズを指定してください。
検索ブロック
見出しブロック
※見出しブロックの装飾については現状は色は指定できません。
装飾なし
背景塗り 灰色
二重線 上下線 黒
二重線 下線 黒
直線 上下線 黒
直線 下線 黒
点線 下線 黒
左右線
括弧 黒
リストブロック
- リストアイコン 矢印
- アイコンの色は変更可能です。
- リストアイコン 三角
- アイコンの色は変更可能です。
- リストアイコン チェック
- アイコンの色は変更可能です。
- リストアイコン チェック 四角
- アイコンの色は変更可能です。
- リストアイコン チェック 丸
- アイコンの色は変更可能です。
- リストアイコン 指
- アイコンの色は変更可能です。
- リストアイコン 鉛筆
- アイコンの色は変更可能です。
- リストアイコン 笑顔
- アイコンの色は変更可能です。
- リストアイコン 不満顔
- アイコンの色は変更可能です。
- リストアイコン 数字 丸
- アイコンの色は変更可能です。
- リストアイコン 数字 四角
- アイコンの色は変更可能です。
グループブロック
線の色、背景色は変更可能です。
※線の色は指定色にしか変更できません。
直線
直線 角丸
点線
Dashed
二重線
スティッチ
直線 上下
シャドウ
Info
Success
Warning
Danger
画像ブロック











画面サイズによる非表示設定

選択したブロックに対して画面サイズ毎に非表示にすることができます。PCでは表示しスマートフォンでは表示しないなどの制御が可能です。
この機能はあくまでHTMLに出力される要素を非表示にするだけです。本当に見せてはいけない要素には使わないでください。
非表示
非表示( 画面サイズ : Extra Small )
非表示( 画面サイズ : Small )
非表示( 画面サイズ : Medium )
非表示( 画面サイズ : Large )
非表示( 画面サイズ : Extra Large )
ブロック組み合わせ例

見出しブロック
- リストブロックの項目
- リストブロックの項目
- リストブロックの項目
- リストブロックの項目