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

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

文章と画像の位置関係を変更する

 

追加した画像位置の変更も簡単にできます。

位置変更は、画像を挿入する時、または挿入した後でも変更することができます。

 

基本の5つの設定

画像を挿入したときに表示されるボックス
画像を挿入したときに表示されるボックス
 

左寄せ

挿入した画像を左揃えにした場合。下の文章が右側へきます。
画像を左寄せにした場合

中央揃え

挿入した画像を中央揃えにした場合。文章は左右に移動せず、上下にあるままです。
画像を中央揃えにした時

右揃え

挿入した画像を右揃えにした場合。下にあった文章が画像の左側へ移動してきます。
画像を右揃えにした時

幅広

挿入した画像を幅広にした場合。テキストが表示される幅全体に画像が広がります。
画像を幅広にした場合

全幅

画像を全幅にした場合
 

画像をもっと魅せる設定

 

Gutenbergでは画像の魅せ方もカンタンに変更できるようになりました。

画像の魅せ方を変える方法。変換をクリックすると変更することができます。
変換をクリックすると出てくる設定
 

メディアと文章

メディアと文章は、書いている文章と画像が関連している(同じグループ・段落である)場合に利用します。

メディアと文章の設定画面。
画像の説明などに最適
「メディアと文章ボックス」の空白部分は、文章を書くことができる
右側は今までどおりのボックスが表示されて文章を書ける
 
コラム:画像寄せと「メディアと文章」

文章と全く関係ない画像を利用する場合は、先程の画像寄せで対応して問題ありません。また、文章と関係があってもこの画像寄せを使用しても間違いではありません。

先に説明した画像を左右に寄せることと、「メディアと文章」の異なる点は、文章と画像が関連していることが構造的に分かるようになっていることです。

例えば、パソコンの画面で見る時は文章の横に関連する画像が来ているけれど、スマフォ画面でみるとその画像が上か下に表示されていなければいけません。

その時、画像を別の場所で挿入して移動させてきた場合(例えばページの一番下から移動してきた)、必ずしもあなたが想定した場所へ画像が入っているわけではないのです。また、別テーマに変更した時にも、画像の位置がずれている可能性があります。

そのため、文章と画像の関係がはっきりしているのであれば、この設定を使うことをオススメします。

 

カバー

カバーは、画像を大きく目立たせたい場合に利用します。

Coverは、

写真の上に文字をいれることができる

通常の画像を幅広にした場合と異なる点は、

  • 写真の上にカラーフィルタ(オーバーレイ)をかけられる
  • 文字を入力することができる

という点です。

長くなりがちなページの区切りの良いところにこのような画像を配置し、文章のイメージや読むリズムを読み手に与えます。

 

ギャラリー

ギャラリーは、複数の写真を同時にみせることができます。

画像を一度に見せたい場合に効果的です。それぞれの写真にキャプション(説明)もつけることができます。

写真の順番も編集画面で変更することができます。

※残り一つの「ファイル」は、ダウンロードファイルを指定できる設定です。使用頻度が低そうなので説明を省きます。

最後に忘れてはいけない作業が、画像にALTテキストをいれることです。

コメント

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