【WordPress】画像をオシャレに見せる４つのブロック使い方

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

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

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

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

＼１クリックで1２種類のデザインに変更できる／

1. クリックしてブロック追加
2. ブロック検索に「メディア」と入力
3. 「メディアとテキスト」をクリック

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

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

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

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

1. 【モバイルでは縦に並べる】
   画像とテキストエリアが縦並びになります。オンにするのがオススメ！
   
   【カラム全体を塗りつぶすように画像を切り抜く】
   画像を枠いっぱいに表示するかの設定。
2. 画像のどの部分を表示するか焦点を決めることができる
   
   画像をドラッグして変更するか、％で指定ができる
3. 画像がうまく表示できなかった時の代替テキスト、また視覚障碍者の方の音声対応やSEO対策として簡潔な説明を入力する
   
   画像サイズは小さすぎるとぼやけるので適切なサイズをプレビューして確認する

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

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

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

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

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

1. クリックでブロックを追加
2. ブロック検索で「カバー」と入力
3. 「カバー」をクリック

1. 配置設定（左寄せ、中央寄せ、右寄せ）設定によっては全幅（画面幅全部）も可能
2. 画像をアップロードもしくはメディアライブラリから選択
3. 画像の代わりに単色背景を設定することもできる

1. 段落ブロックが表示されるので、テキストを入力する。

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

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

＼グラデーションの調整メニュー／

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

＼その他の調整メニュー／

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