ブロックエディタ使い方

【記事をデザイン】可愛い囲み枠ブロックをVK Blocksで作る「ボックス装飾」編

Cinna

こんにちは、Cinna(シーナ / @web_cinna)です。

WordPressブロックエディタで難しいコードは使わずに「記事を見やすくする方法」STEP3です。今回は可愛い囲み枠を作る「ボックス装飾」編です。

無料プラグインVK Blocksの拡張機能と追加ブロックを使うとボックスが簡単に作れます。設定方法を図解を使って解説していきます!

この記事では簡単に記事をデザインするために、無料プラグイン”VK Blocks”のブロックエディタ拡張機能を使っています。

それではいきましょう!

枠線ボックスを使ってみる

文字や画像を囲む「ボックス」ブロックが使えると視覚的にとても見やすくなります!まずはVK Blocksの追加ブロック”枠線ボックス”を使ってみましょう!

\枠や背景の色も変更できる!/

Cinna

枠線ブロックはテンプレ型なので簡単で使いやすいです♪

枠線ボックスブロックを追加

  1. プラスボタンをクリック
  2. ブロック検索で「ボックス」と入力
  3. 「枠線ボックス」をクリック

枠線ボックスブロックのカスタマイズメニュー

  1. ブロックの役割を変更できる
  2. 【スタイル】ボックスのデザインを選択できる
  3. 【色】ボックスの線の色、背景色を白か透明かを選べる
  4. 【アイコン】ボックスタイトルの前にアイコンを追加できる
  5. 【蛍光マーカー】ボックスタイトルに蛍光マーカーを引ける

\全6種類デザインを選べる/

デザインは6種類、その他枠の色や文字の色の変更、アイコンの追加もできるからシーンに合わせてカスタマイズの幅が広がります!

WordPressのテーマによっては、テーマのボックスも用意されていると思うのでVK Blocksとうまく活用してみてください^^

アラートブロックを活用する

ボックスタイトルが必要ない、背景色だけつけたシンプルなボックスなら「アラート」ブロック!

\注意書きやお知らせに便利!/

「アラート」ボックスは、ボックス内の文字が背景色と似た色に自動的になります。

アラートボックスを追加

  1. プラスボタンをクリック
  2. ブロック検索で「アラート」と入力
  3. 「アラート」ブロックをクリック

アラートブロックのカスタマイズメニュー

  1. ブロックの役割を変更できる
  2. 【スタイル設定】色を変更できる
  3. 【蛍光マーカー】ボックス内の文字に蛍光マーカーを引ける

\アラートボックスの色設定について/

スタイル設定での色の種類はコチラ!
Success緑色
Info水色
Warning黄色
Danger赤色

アラートボックスに画像(インライン画像)を追加

\画像を追加したい場合はインライン画像を使う/

  1. クリックするとその他の装飾メニューがプルダウンで表示される
  2. インライン画像をクリック→画像をアップロードもしくは選択
  3. 表示された画像をクリックすると幅設定が表示される
  4. 画像の幅を入力
  5. クリックする=決定

「インライン画像」はアラートだけでなく、他のブロックでも使える方法なのでぜひ活用してみてください☻

段落ブロックでもボックス風ができる

「段落」ブロックで文字を入力→【色設定】で背景色を変更するだけでシンプルなボックス風も作れます。改行して文字を入力する場合は「Sift+改行ボタン」で改行します。

【Siftの役割】
Sift+改行ボタン▶︎1つのブロックのまま改行できる
改行ボタンのみ▶︎ブロックが分かれる

【選択した文字のみ色を変更したい場合】
「色変更」ではなく「テキストの色」の『選択済み文字色』から変更できます。※「色変更」はブロック内の文字全体の色が変わります。

グループ化を使うと可愛いボックス枠が作れる

Cinna

VK Blocksの拡張機能でグループ化したブロックは装飾ができるようになります!

\11種類のスタイル!線や背景色も変更できる/

直線

直線 角丸

点線

Dashed

二重線

ステッチ

シャドウ

info

Success

Warning

Danger

ブロックをグループ化する

文字を入力してみます(段落ブロックを作る)
※画像でもリストでもどんなブロックでもグループ化できます。

  1. 縦3点アイコンをクリックするとブロック編集メニューがでてくる
  2. グループ化をクリック

ちなみに1つのブロックでもグループ化ができます!もちろん複数のブロックを1つのグループにすることもできます。

グループブロックのカスタマイズメニュー

  1. ブロックタイプやスタイルを変更できる
  2. 配置の変更(左寄せ、中央寄せ、右寄せ)
  3. スタイル:枠のデザイン(最初のサンプルを参照)を選べる
  4. 色設定:文字、背景色を変更できる
  5. 線の色:枠線の色を変更できる

グループ化ボックスのアレンジ例

1つのブロックをグループ化してボックス装飾してみましたが、今度は複数のブロックを1つのグループブロックとしてアレンジしてみます。1つのグループにしておくと大枠のブロックごと移動できたり、グループ全体に背景や装飾枠を付けたりもできるのでグループ化はブロックエディタならではの便利な機能です。

Cinna

ノーコード(コード無し)で簡単に装飾枠を使えるのは便利!

複数ブロックを選択してグループ化

\段落(文字)ブロック3段をグループ化してみます/

  1. 1番上のブロックをクリック
  2. 一番下のブロックを『Sift』ボタン+クリック
  1. 縦3点アイコンをクリックするとブロック編集メニューがでる
  2. グループ化をクリック

複数ブロックのグループボックスでカスタマイズ例(GIF動画)

Cinna

単数ブロックをグループ化、他の文字や画像ブロックを合わせて複数ブロックをグループ化もできるので組み合わせ次第で色んなアレンジができます♪

グループ編集メニューが表示されないor選択できない時の対処法

Cinna

グループ作ったはずなのに編集メニューがでてこない…

そんな時はグループブロックの内側にあるブロックを選択している可能性が大きいです。外側のブロックの選択方法について下記の記事で解説してますので参考にしてみてくださいね!

ブロックが選択できないときの対処法【WordPress使い方】ブロックエディタ- Gutenbergブロックの仕組みと外側ブロックの選択方法を解説します。グループやカラムなど複数のブロックを組み合わせて構成されているブロックは、選択したいブロックをうまく選択しにくい場合があります。そんな時の対処法です。...

お疲れ様でした!難しいコードは使わずに簡単にボックス(囲み枠)を作る方法をご紹介しました。アレンジ次第で記事の中で色々応用して使えるので活用してみてくださいね!次回ステップ4では画像やボタンの装飾方法を紹介していきます☻

Cinna

最後まで読んでいただきありがとうございました!

ABOUT ME
Cinna
Cinna
8年間働いた会社を辞めて2年間のwebデザイン長期職業訓練に通っていました。2019年入学▶︎2021年修了。デザインは独学・webは初心者からスタート。ライフスタイルが変わっても働き続けられる仕事がしたくてチャレンジすることに。まなび総合サイトmanabimon.comにてライタースタート、ライフスタイルやこれまでの体験談からの役立つ情報をよりリアルに発信するため"MeBe"を開設。