WordPressブロックエディタで難しいコードは使わずに「記事を見やすくする方法」STEP３です。今回は可愛い囲み枠を作る「ボックス装飾」編です。
無料プラグインVK Blocksの拡張機能と追加ブロックを使うとボックスが簡単に作れます。設定方法を図解を使って解説していきます！
💡 VK Blocksでできること一覧と導入方法はコチラ！ブロックエディタを使いやすく便利にしてくれる無料プラグインです✨
それではいきましょう！
枠線ボックスを使ってみる
文字や画像を囲む「ボックス」ブロックが使えると視覚的にとても見やすくなります！まずはVK Blocksの追加ブロック”枠線ボックス”を使ってみましょう！
＼枠や背景の色も変更できる！／
枠線ブロックはテンプレ型なので簡単で使いやすいです♪
枠線ボックスブロックを追加
- プラスボタンをクリック
- ブロック検索で「ボックス」と入力
- 「枠線ボックス」をクリック
枠線ボックスブロックのカスタマイズメニュー
- ブロックの役割を変更できる
- 【スタイル】ボックスのデザインを選択できる
- 【色】ボックスの線の色、背景色を白か透明かを選べる
- 【アイコン】ボックスタイトルの前にアイコンを追加できる
- 【蛍光マーカー】ボックスタイトルに蛍光マーカーを引ける
＼全６種類デザインを選べる／
デザインは６種類、その他枠の色や文字の色の変更、アイコンの追加もできるからシーンに合わせてカスタマイズの幅が広がります！
WordPressのテーマによっては、テーマのボックスも用意されていると思うのでVK Blocksとうまく活用してみてください＾＾
アラートブロックを活用する
ボックスタイトルが必要ない、背景色だけつけたシンプルなボックスなら「アラート」ブロック！
＼注意書きやお知らせに便利！／
アラートボックスを追加
- プラスボタンをクリック
- ブロック検索で「アラート」と入力
- 「アラート」ブロックをクリック
アラートブロックのカスタマイズメニュー
- ブロックの役割を変更できる
- 【スタイル設定】色を変更できる
- 【蛍光マーカー】ボックス内の文字に蛍光マーカーを引ける
＼アラートボックスの色設定について／
スタイル設定での色の種類はコチラ！
| Success | 緑色 |
| Info | 水色 |
| Warning | 黄色 |
| Danger | 赤色 |
アラートボックスに画像（インライン画像）を追加
＼画像を追加したい場合はインライン画像を使う／
- クリックするとその他の装飾メニューがプルダウンで表示される
- インライン画像をクリック→画像をアップロードもしくは選択
- 表示された画像をクリックすると幅設定が表示される
- 画像の幅を入力
- クリックする＝決定
段落ブロックでもボックス風ができる
「段落」ブロックで文字を入力→【色設定】で背景色を変更するだけでシンプルなボックス風も作れます。改行して文字を入力する場合は「Sift＋改行ボタン」で改行します。
グループ化を使うと可愛いボックス枠が作れる
VK Blocksの拡張機能でグループ化したブロックは装飾ができるようになります！
＼11種類のスタイル！線や背景色も変更できる／
直線
直線 角丸
点線
Dashed
二重線
ステッチ
シャドウ
info
Success
Warning
Danger
ブロックをグループ化する
文字を入力してみます（段落ブロックを作る）
※画像でもリストでもどんなブロックでもグループ化できます。
- 縦３点アイコンをクリックするとブロック編集メニューがでてくる
- グループ化をクリック
ちなみに１つのブロックでもグループ化ができます！もちろん複数のブロックを１つのグループにすることもできます。
グループブロックのカスタマイズメニュー
- ブロックタイプやスタイルを変更できる
- 配置の変更（左寄せ、中央寄せ、右寄せ）
- スタイル：枠のデザイン（最初のサンプルを参照）を選べる
- 色設定：文字、背景色を変更できる
- 線の色：枠線の色を変更できる
グループ化ボックスのアレンジ例
１つのブロックをグループ化してボックス装飾してみましたが、今度は複数のブロックを１つのグループブロックとしてアレンジしてみます。１つのグループにしておくと大枠のブロックごと移動できたり、グループ全体に背景や装飾枠を付けたりもできるのでグループ化はブロックエディタならではの便利な機能です。
ノーコード（コード無し）で簡単に装飾枠を使えるのは便利！
複数ブロックを選択してグループ化
＼段落（文字）ブロック３段をグループ化してみます／
- １番上のブロックをクリック
- 一番下のブロックを『Sift』ボタン＋クリック
- 縦３点アイコンをクリックするとブロック編集メニューがでる
- グループ化をクリック
複数ブロックのグループボックスでカスタマイズ例（GIF動画）
単数ブロックをグループ化、他の文字や画像ブロックを合わせて複数ブロックをグループ化もできるので組み合わせ次第で色んなアレンジができます♪
グループ編集メニューが表示されないor選択できない時の対処法
グループ作ったはずなのに編集メニューがでてこない…
そんな時はグループブロックの内側にあるブロックを選択している可能性が大きいです。外側のブロックの選択方法について下記の記事で解説してますので参考にしてみてくださいね！
お疲れ様でした！難しいコードは使わずに簡単にボックス（囲み枠）を作る方法をご紹介しました。アレンジ次第で記事の中で色々応用して使えるので活用してみてくださいね！次回ステップ４では画像やボタンの装飾方法を紹介していきます☻
最後まで読んでいただきありがとうございました！
▼VK Blocksの機能を使いながら簡単にサイト型ホームページが作れるWordPressテーマ
▼MeBeはConoHa WINGレンタルサーバーを使用しています😇
