こんにちは、Cinna(シーナ / @web_cinna)です。
WordPressブロックエディタ(Gutenberg)で難しいコードは使わずに「記事を見やすくする方法」STEP4、今回は「画像装飾」編です。
画像を簡単にオシャレに見せることができる4つのブロック「画像・メディアとテキスト・ギャラリー・カバー」の使い方をご紹介します。
今回はアレンジ例の作り方も最後に解説していますのでぜひ活用してみてください。
💡 VK Blocksでできること一覧と導入方法はコチラ!ブロックエディタを使いやすく便利にしてくれる無料プラグインです✨

それではいきましょう!
画像ブロックも1クリックでオシャレにできる!
VK Blocksを使うとこのような画像の装飾が簡単にできます!
画像ブロック基本設定

- +ボタンをクリック
- ブロック検索に「画像」と入力
- 画像ブロックをクリック
アップロードで新しく画像を追加するか、メディアライブラリの中から画像を選択
赤枠のように画像の説明文を添えることもできます!直接クリックで入力できます。
画像ブロックのカスタマイズ
- ブロックの役割を変更できる
- 配置を変更できる(左寄せ、中央寄せ、右寄せ)
- リンクを追加できる(画像をクリックすると指定のURLへジャンプ)
- 切り抜き加工できる
- 画像を入れ替えることができる
- 画像の上に文字を被せて入力できる
- 【スタイル】フォトフレームを選べる
- 【画像設定】代替テキストや画像の大きさを設定
\1クリックで12種類のデザインに変更できる/

1クリックで画像を加工できるのは便利だな〜
“メディアとテキスト”ブロックが万能!
テキストエリアと画像を横並び(スマホでは縦並び)に手軽にできるブロックです。バナーのように使ってもいいし、全幅設定をして大胆に使うのもおすすめ!

WEB
DESIGN
Let’s try to use the block editor.
メディアとテキストブロック基本設定
- クリックしてブロック追加
- ブロック検索に「メディア」と入力
- 「メディアとテキスト」をクリック
- 画像をアップロードまたはメディアライブラリから選択
- テキストを入力
- 位置を左右変更できる
- 配置を変更できる(上揃え、中央揃え、下揃え)
- 【色設定】テキストエリアの背景色、文字色を設定
- 【メディアと文章の設定】スマホの時に横並びのままか、縦並びにするか選択できる
メディアとテキストブロックのカスタマイズ
- 画像とテキストの表示割合を左右にドラッグで変更できる
- 画像にリンクURLを指定できる
- 上記同じ(背景色、文字色設定)
- 画像の表示の詳細設定

※画像の方をクリックすると上記の編集メニューが表示されます。テキストをクリックしていると段落ブロックの編集メニューになります。
複数の画像ならギャラリーを活用!
複数の画像を自動的に大きさを調整して配置してくれるブロックです!横並びにする数を指定できます。
ギャラリーブロック基本設定
- クリックしてブロックを追加
- ブロック検索で「ギャラリー」と入力
- 「ギャラリー」をクリック
メディアライブラリから画像を選択するとギャラリーに追加する画像を確認、編集することができます。このページで画像のキャプションを入力もできます。
ギャラリーブロックのカスタマイズ
- ギャラリーの配置を変更できる(左寄せ、中央寄せ、右寄せ)
- 【ギャラリー設定】
- カラムの数で画像を横に何枚並べるか設定できる。
- 画像の切り抜きをONにしておくと同じ大きさに自動調整してる。
- リンク先はなし、添付ファイル、メディアファイルが選べる
- 画像サイズは小さすぎるとボケるのでプレビューで確認する
- 【Images】ギャラリーに画像を追加、削除など編集できる
\画像をクリックすると個別の編集メニューがでる/
- 画像の並び順を左右入れ替えることができる
- 画像の置換(画像を変更)できる
- 画像を削除できる
カバーブロックは重ねワザで自由自在!
カバーブロックは、画像や単色を背景として配置できるブロックです。前面に好きな色を重ねたり、他のブロックを重ねることができます。
For you
文字と色を画像に重ねています。色はオレンジ系グラデーションをオーバーレイ機能で透過しています♪
For you
こちらは緑系グラデーションを重ねてみました。
重ねる色を変えるだけで雰囲気がずいぶん変わります!
カバーブロック基本設定
- クリックでブロックを追加
- ブロック検索で「カバー」と入力
- 「カバー」をクリック
- 配置設定(左寄せ、中央寄せ、右寄せ)設定によっては全幅(画面幅全部)も可能
- 画像をアップロードもしくはメディアライブラリから選択
- 画像の代わりに単色背景を設定することもできる
- 段落ブロックが表示されるので、テキストを入力する。

段落ブロック以外にも、見出しやボタンや吹き出しなど、他のブロックを重ねることも可能です!
カバーブロックのカスタマイズ
- 前面のコンテンツ(ここではテキスト)の配置設定
- フルハイト(縦幅いっぱいに表示)
- 写真を置換(置き換え)
- 【メディア設定】画像を「固定背景」「繰り返し背景」にするか選べる
- 【サイズ】画像の縦幅をピクセルで指定できる。固定背景にしていない場合は焦点ピッカーで画像のどの部分を切り取るか設定できる。
- 【オーバーレイ】画像に色を重ねることができる。不透明度も指定できる。
\グラデーションの調整メニュー/
- 「単色」「グラデーション」でパレットを変更できる
- ○をクリックすると色を変更できる。グラデーションの色味の変化をこれで調整できる。
- 【線形】直線的(斜めや縦や横に向かって)にグラデーションがかかる
【放射状】中心から外に向かってグラデーションがかかる - グラデーションをかける角度を調整できる。右側の○は内側の●を移動させると角度を変えることができる
\その他の調整メニュー/
今回のアレンジ例 / 母の日バナー【作り方手順】
今日は母の日。こんなバナーをカバーブロックで作ってみます♪
Thanks,Mom.
母の日に”ありがとう”と”花”を贈ろう。
GIF動画で見る:作り方手順
m4v動画で見る:作り方手順
WordPress記事を見やすくする方法ステップ4「画像の装飾」編でした!少し装飾をつけるだけで記事を可愛くやオシャレにもできる機能ですので、ぜひ活用してみてくださいね。
次回は「レイアウト」編としてコンテンツの配置アレンジなどを紹介したいと思います!
最後まで読んでいただきありがとうございます!
▼VK Blocksの機能を使いながら簡単にサイト型ホームページが作れるWordPressテーマ
