ブロックエディタ使い方

【記事をデザイン】画像をオシャレに見せる4つのブロック使い方「画像の装飾」編

Cinna

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

WordPressブロックエディタ(Gutenberg)で難しいコードは使わずに「記事を見やすくする方法」STEP4、今回は「画像装飾」編です。

画像を簡単にオシャレに見せることができる4つのブロック「画像・メディアとテキスト・ギャラリー・カバー」の使い方をご紹介します。

今回はアレンジ例の作り方も最後に解説していますのでぜひ活用してみてください。

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

それではいきましょう!

画像ブロックも1クリックでオシャレにできる!

カスタマイズ例
Cinna

VK Blocksを使うとこのような画像の装飾が簡単にできます!

画像ブロック基本設定

  1. +ボタンをクリック
  2. ブロック検索に「画像」と入力
  3. 画像ブロックをクリック

アップロードで新しく画像を追加するか、メディアライブラリの中から画像を選択

赤枠のように画像の説明文を添えることもできます!直接クリックで入力できます。

画像ブロックのカスタマイズ

  1. ブロックの役割を変更できる
  2. 配置を変更できる(左寄せ、中央寄せ、右寄せ)
  3. リンクを追加できる(画像をクリックすると指定のURLへジャンプ)
  4. 切り抜き加工できる
  5. 画像を入れ替えることができる
  6. 画像の上に文字を被せて入力できる
  7. 【スタイル】フォトフレームを選べる
  8. 【画像設定】代替テキストや画像の大きさを設定

\1クリックで12種類のデザインに変更できる/

Cinna

1クリックで画像を加工できるのは便利だな〜

“メディアとテキスト”ブロックが万能!

テキストエリアと画像を横並び(スマホでは縦並び)に手軽にできるブロックです。バナーのように使ってもいいし、全幅設定をして大胆に使うのもおすすめ!

カスタマイズ例

WEB
DESIGN

Let’s try to use the block editor.

メディアとテキストブロック基本設定

  1. クリックしてブロック追加
  2. ブロック検索に「メディア」と入力
  3. 「メディアとテキスト」をクリック
  1. 画像をアップロードまたはメディアライブラリから選択
  2. テキストを入力
  3. 位置を左右変更できる
  4. 配置を変更できる(上揃え、中央揃え、下揃え)
  5. 【色設定】テキストエリアの背景色、文字色を設定
  6. 【メディアと文章の設定】スマホの時に横並びのままか、縦並びにするか選択できる

メディアとテキストブロックのカスタマイズ

  1. 画像とテキストの表示割合を左右にドラッグで変更できる
  2. 画像にリンクURLを指定できる
  3. 上記同じ(背景色、文字色設定)
  4. 画像の表示の詳細設定
MEMO

※画像の方をクリックすると上記の編集メニューが表示されます。テキストをクリックしていると段落ブロックの編集メニューになります。

【メディアと文章の設定】

  1. 【モバイルでは縦に並べる】
    画像とテキストエリアが縦並びになります。オンにするのがオススメ!

    【カラム全体を塗りつぶすように画像を切り抜く】
    画像を枠いっぱいに表示するかの設定。
  2. 画像のどの部分を表示するか焦点を決めることができる

    画像をドラッグして変更するか、%で指定ができる
  3. 画像がうまく表示できなかった時の代替テキスト、また視覚障碍者の方の音声対応やSEO対策として簡潔な説明を入力する

    画像サイズは小さすぎるとぼやけるので適切なサイズをプレビューして確認する

複数の画像ならギャラリーを活用!

複数の画像を自動的に大きさを調整して配置してくれるブロックです!横並びにする数を指定できます。

画像4枚、カラム2に設定した場合

ギャラリーブロック基本設定

  1. クリックしてブロックを追加
  2. ブロック検索で「ギャラリー」と入力
  3. 「ギャラリー」をクリック

メディアライブラリから画像を選択するとギャラリーに追加する画像を確認、編集することができます。このページで画像のキャプションを入力もできます。

ギャラリーブロックのカスタマイズ

  1. ギャラリーの配置を変更できる(左寄せ、中央寄せ、右寄せ)
  2. 【ギャラリー設定】
    • カラムの数で画像を横に何枚並べるか設定できる。
    • 画像の切り抜きをONにしておくと同じ大きさに自動調整してる。
    • リンク先はなし、添付ファイル、メディアファイルが選べる
    • 画像サイズは小さすぎるとボケるのでプレビューで確認する
  3. 【Images】ギャラリーに画像を追加、削除など編集できる

\画像をクリックすると個別の編集メニューがでる/

  1. 画像の並び順を左右入れ替えることができる
  2. 画像の置換(画像を変更)できる
  3. 画像を削除できる

カバーブロックは重ねワザで自由自在!

カバーブロックは、画像や単色を背景として配置できるブロックです。前面に好きな色を重ねたり、他のブロックを重ねることができます。

カスタマイズ例1

For you

Cinna

文字と色を画像に重ねています。色はオレンジ系グラデーションをオーバーレイ機能で透過しています♪

カスタマイズ例2

For you

Cinna

こちらは緑系グラデーションを重ねてみました。
重ねる色を変えるだけで雰囲気がずいぶん変わります!

カバーブロック基本設定

  1. クリックでブロックを追加
  2. ブロック検索で「カバー」と入力
  3. 「カバー」をクリック
  1. 配置設定(左寄せ、中央寄せ、右寄せ)設定によっては全幅(画面幅全部)も可能
  2. 画像をアップロードもしくはメディアライブラリから選択
  3. 画像の代わりに単色背景を設定することもできる
  1. 段落ブロックが表示されるので、テキストを入力する。
MEMO

段落ブロック以外にも、見出しやボタンや吹き出しなど、他のブロックを重ねることも可能です!

カバーブロックのカスタマイズ

  1. 前面のコンテンツ(ここではテキスト)の配置設定
  2. フルハイト(縦幅いっぱいに表示)
  3. 写真を置換(置き換え)
  4. 【メディア設定】画像を「固定背景」「繰り返し背景」にするか選べる
  5. 【サイズ】画像の縦幅をピクセルで指定できる。固定背景にしていない場合は焦点ピッカーで画像のどの部分を切り取るか設定できる。
  6. 【オーバーレイ】画像に色を重ねることができる。不透明度も指定できる。

背景固定によるパララックス効果(視差効果)はPCのみの動作となります

\グラデーションの調整メニュー/

  1. 「単色」「グラデーション」でパレットを変更できる
  2. ○をクリックすると色を変更できる。グラデーションの色味の変化をこれで調整できる。
  3. 【線形】直線的(斜めや縦や横に向かって)にグラデーションがかかる
    【放射状】中心から外に向かってグラデーションがかかる
  4. グラデーションをかける角度を調整できる。右側の○は内側の●を移動させると角度を変えることができる

\その他の調整メニュー/

↑配置設定を変えると、前面のブロック(「For you」の文字)が右下に表示されました!

今回のアレンジ例 / 母の日バナー【作り方手順】

Cinna

今日は母の日。こんなバナーをカバーブロックで作ってみます♪

Thanks,Mom.

母の日に”ありがとう”と”花”を贈ろう。

GIF動画で見る:作り方手順

作り方手順(自動再生)クリックで拡大再生できます

m4v動画で見る:作り方手順

動画を止めて確認したりはコチラをどうぞ

背景固定によるパララックス効果(視差効果)はPCのみの動作となります

WordPress記事を見やすくする方法ステップ4「画像の装飾」編でした!少し装飾をつけるだけで記事を可愛くやオシャレにもできる機能ですので、ぜひ活用してみてくださいね。

次回は「レイアウト」編としてコンテンツの配置アレンジなどを紹介したいと思います!

Cinna

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

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