WordPress標準ブロックのスタイル拡張

見出し、リスト、画像、グループなどWordPress標準のブロックに対して、VK Blocks 独自の装飾スタイルを追加しています。VK Blocks Pro 及び 無料版の VK Blocks でご利用いただけます。以下の動画で詳しく紹介しています。

画面サイズ毎の改行指定

見出しなどでテキストの改行位置を画面サイズ毎に設定できます。見出しや段落ブロックなどで編集画面から改行したい箇所に改行タグ用のコードを挿入できます。

xs～xxl各サイズの範囲は以下のように設定されています。

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

テキストの改行禁止指定

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

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

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

文字サイズ変更

選択した文字のすぐ下に表示されるポップアップから文字サイズの変更が可能です。

• 小
• 標準
• 大
• 特大

また、文字サイズを変更している部分にカーソルを移動すると、ツールバーに「インライン文字サイズ」アイコンが表示され、視覚的に分かりやすくなっています。

テキストの色変更

部分的にテキストの色を変更したい場合は、テキストを選択して「テキスト色」をクリックしてください。

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

蛍光マーカー

マーカーをつけたい箇所を選択してツールバーから「蛍光マーカー」を選択すると、ポップアップが表示されるので色を指定してください。カスタムカラーも利用できます。解除したい場合は、マーカーをつけた箇所を選択し「クリア」ボタンで解除できます。

蛍光マーカー　蛍光マーカー　蛍光マーカー　蛍光マーカー　蛍光マーカー　蛍光マーカー　蛍光マーカー　蛍光マーカー　蛍光マーカー　蛍光マーカー

各ブロック共通の余白設定

設置した各ブロックから共通の余白を設定できます。都度 レスポンシブスペーサー を配置しなくても、直接各ブロックから余白が設定できるため、大変便利です。

余白のサイズは lg / md / sm / 0 から選択可能です。上下に個別に余白の指定ができます。ブロック下部に自動で余白が付くブロックに対しては、余白を 0 にすることもできます。

一度設定した余白を解除するには、上記画像の場合、アクティブな「上 sm」「下 sm」を再度クリックすることで解除できます。

検索ブロック

検索

検索

見出しブロック

※見出しブロックの装飾については現状は色は指定できません。

装飾なし

背景塗り 灰色

二重線 上下線 黒

二重線 下線 黒

直線 上下線 黒

直線 下線 黒

点線 下線 黒

左右線

括弧 黒

リストブロック

グループブロック

線の色、背景色は変更可能です。
※線の色は指定色にしか変更できません。

画像ブロック

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

選択したブロックに対して画面サイズ毎に非表示にすることができます。PCでは表示しスマートフォンでは表示しないなどの制御が可能です。

ブロック組み合わせ例