画像を使って様々な見せ方をする

WordPress新エディター「Gutenberg」の触り方がなんとなくわかり始めてきた頃ではないでしょうか。
それでは、ページ一層を華やかなものにするため、画像について説明します。

「Gutenberg」ではCSSやプラグインでなければ難しかった、複数の画像を並べて見せる「ギャラリー」や画像を背景とした「カバー」などの機能が加わりました。
特に写真やイラスト勝負のサイトでは嬉しい機能です。
ぜひぜひ、活用してみてください。

まずは画像を挿入してみよう

「一般ブロック」の「画像」をクリックすると登場するのがこちら。
「アップロード」「メディアライブラリ」「URLから挿入」の3つです。

「アップロード」

新たに画像をアップロードする場合に使用します。

画像の100%のサイズがディフォルトで表示されますが、右と下の青い丸を引っ張ったり、右メニューの「画像サイズ」や「画像の寸法」、「画像の寸法」下の%でも変更することができます。

「メディアライブラリ」

既にアップロードしてある画像を使用するときはこちらを使いましょう。

任意のファイルを選んでクリックすると青いチェック状態になります。その状態で右下にある「投稿に挿入」をクリックすればOK。
複数選びたい場合も同じようにクリックすればOK。間違えた場合はチェックマークの部分をクリックすれば未選択状態に戻ります。

「URLから挿入」

外部サーバなどにあるJPEG画像などを直接貼り付ける方法です。

「URLから挿入」をクリックし、画像のパスを貼り付ける方法です。

複数の画像を一度に見せたい「ギャラリー」

アルバムのように複数の写真を何枚も並べて見せたい場合は「一般ブロック」の「ギャラリー」を使いましょう。
まずは画像を挿入してみよう」で登場したのと同じような「アップロード」「メディアライブラリ」が登場します。
試しにtomokos.netのサイトの中にある5枚をアップロードしてみました。

ここで注目して欲しいのが右メニューの「カラム」「3」で設定されており、「画像の切り抜き」にチェックが入っています。

カラム数を変えることで複数の画像を自動的に美しい並びになるようにWordPress側で調整してくれるという嬉しい機能です。
カラムを「2」に変更するとこのような表示に変わりました。

最初に決めた複数の画像の削除や追加も簡単に、自由に変更できます。勿論、カラム数や画像の切り抜きの有無もすぐに調整できるという大変便利なブロック要素です。

画像を背景として使うことができる「カバー」

見出しの背景に画像を使いたい!そんな時に便利なのが「カバー」。「一般ブロック」の「カバー」から選択できます。

「アップロード」または「メディアライブラリ」から任意の画像を選びます。
このとき、右メニューの「カバー設定」の「固定背景」はディフォルトでオフ状態になっています。画像全体が収まるように自動で調整されています。
「固定画像」をオンにすると画像のもとのサイズ

画像を背景としてテキストエリアが登場します。入力したテキストには「太字」「イタリック」「リンク」「打ち消し線」を設定することができます。
テキストの「右寄せ」「中央揃え」「左寄せ」も設定できるので、人物や物など見せたい部分に文字がかからないようにも調整できるでしょう。

またこのカバー機能の優れた点は「オーバレイ」の設定も右メニューで行えることです。
見出しなど文字をデザインする」の「文字色・背景色を変えてみよう」で触ったカラーのように、画像の上にかかる色とその透過率を任意で設定することができます。

上記の画像から、固定画像をオンに、文字を太く、オーバレイの色と透過率の数値を変えてみました。

いかがでしたか?画像も色々な見せ方ができますね!
この次は「WordPressの投稿の仕方」を説明します。

WordPress投稿のチェックポイント」に進む
見出しなど文字をデザインする」に戻る