Gutenbergで画像を挿入してみよう

画像をドラッグアンドドロップするGutenberg
 

Gutenbergでページを書いてみましたか?まだの方は、分からないなりにも書いてみましょう。実際に触ってみるのが一番ですよ♪

前回の基本的な操作方法(タイトル・見出し・文章)の他に、ページを作成するときに必要な画像挿入方法についてご説明します。

※予想以上にページが長くなりましたので、リンクの作成については別ページへまとめます。ごめんなさい。

 

画像の挿入方法を知ろう♪

 

Gutenbergを利用した画像挿入の流れは、

  1. 画像を挿入する
  2. 位置関係を決める
    1. 基本の5設定
    2. 画像をもっと魅せる3設定
      *コラム:画像寄せと「メディアと文章」
  3. 画像文字列(ALT)を入れる(大事!)

のようになります。

 

4つの画像挿入方法

 

0.画像挿入の準備をします。

1.ブロックにある「画像の追加」ボタンを押します。

ブロックの右側に現れる画像の追加ボタン

2.画像を追加するボックスが表示されます。

画像挿入ボタンを押した後に表示される画像挿入画面
ボタンを押した後に現れるボックス

これから紹介する5つの方法、いずれかの方法で画像を挿入します。

 

1.一番カンタンなドラッグ&ドロップ

画像をドラッグアンドドロップする

一番カンタンなのは画像を灰色のエリアへドラッグ&ドロップすることです。

 

2.すでに使ったことある画像ならメディアライブラリ

すでに使ったことのある画像であれば、メディアライブラリから選びます。

写真をメディアライブラリから選ぶ
 

3.すぐにドラッグ&ドロップができない時はアップロード

自分のパソコンの中に保管されている画像を選択してアップロードします。

自分のパソコンの中にある写真を選択してアップロードする方法
画像が保存してある場所へ移動しましょう
 

先程のメディアライブラリからもアップロードして画像を追加することができます。

メディアライブラリから画像をアップロードする方法
画面の左上の「ファイルをアップロード」をクリックする
 

4.別の場所にある画像のURLが分かる場合はURL挿入(上級)

WordPressのシステムを利用せずに画像を管理している場合などに利用しますが、使用頻度が低いでしょうから、ここではスルーして問題ありません。😓

 

では、挿入した画像の位置を変更する方法をご紹介します。

コメント

タイトルとURLをコピーしました