ワードプレス ブロックエディターで画像を全幅表示させる
ワードプレスのブロックエディターでは画像を全幅表示させる機能があります。画像をDisplayの横幅いっぱいに広げて表示させると、ユーザーに強い印象を与えることができますよね。
特に、”カバー”ブロックとの併用では、サイトの1stビューの雰囲気を変えるのに威力を発揮します。
ただし、この機能はテーマによって対応しているものがまだ少ないのが現状です。本記事では、対応していないテーマと対応済テーマで何が違うかを見てみましょう。
前提条件
今回テーマは、
- 全幅対応していないテーマとしてTwenty Seventeen
- 全幅対応済テーマとしてTwenty Nineteen
を使用します。どちらもデフォルトのテーマですね。
また、エディターの編集機能に影響を与えるAdvanced Editorなどのプラグインは何も有効化していない状態です。
ブロックエディターの基本的な使用方法は以下の記事を参照ください。
https://web-children.com/2020/11/18/gutenberg-guidelines/また今回は画像の挿入を実施します。ブロックエディターでの画像の挿入方法は、
の中の、画像の挿入 についてご確認ください。
テーマTwenty Seventeenで画像を挿入
画像の挿入
記事の投稿でブロックエディターを使って、画像を挿入してみましょう。
画像の配置は左寄せ・中央揃え・右寄せの３つしかありません。中央揃えを選択します。
サイト表示結果
ではサイト表示させてみましょう。
以下のようにパソコン表示では２カラム、スマホ表示では1カラムで表示されます。
このように、全幅対応していないテーマの場合、従来のクラシックエディターでもできる画像表示しかできません。
テーマTwenty Nineteenで画像を挿入
画像の挿入
ではテーマをTwenty Nineteenに変更してみます。
すると、Twenty Seventeenにはありませんでしたが、画像の配置の中に、全幅というのが選択できるようになりました。この全幅を選択してみます。
サイト表示結果
ではサイト表示させてみましょう。
以下の通り、画像が全幅で表示されるのがわかります。同じコンテンツ（画像）なのに、これだけでサイトの雰囲気が全く変わりますね。
Twenty Nineteenは元々１カラムレイアウトのテーマですが、Twenty Seventeenもスマホ表示では１カラム表示です。
スマホ表示どうしを比較すると、同じ１カラムでも中央揃えと全幅の差がはっきりわかりますね。
ちなみに、パソコン表示の画像の下が切れているのは、画像が大きくなった分パソコンのモニター内で表示が切れているだけで、スクロールすると画像はすべて表示されています。
全幅表示でヘッダー画像を作成する（”カバー”ブロックとの併用）
ヘッダー画像を全幅で表示させるサイトが多いですが、これを作成してみましょう。
画像の上にテキストを重ねるべく、”カバー”ブロックを使用して、その際画像を全幅で指定してやれば可能です。
カバーブロックの使用方法は、以下の記事を参考にしてください。
トップページにして表示してみました。なかなかよい雰囲気です。
ただし画像の縦横比は、元画像よりも横長になって、画像の上下は切り取られてしまいます。
元画像の縦横比をキープする方法を以下で紹介していますので参考にしてみてください。
全幅画像を表示するにはテーマ側の対応が必要
このように、全幅画像を利用すれば、簡単にヘッダー画像なんかも作れてしまいます。
ただし全幅画像を使用するにはテーマ側の対応が必要です。Twenty Seventeenがそうであったようにテーマ側が未対応だと全幅表示することができません。
また、ツールバーで全幅を指定できるようになっていても、実は全幅で表示されない、というテーマもあります。
Twenty Seventeenのように2カラム方式のレイアウトのテーマはまず対応していませんし、１カラム対応のテーマだからといって対応しているとは限らないようです。
非対応なテーマではカスタムCSSで可能
私がおすすめしているテーマLuxeritas（本サイトでも使用中）でも、全幅を選択はできますが表示は画面いっぱいに広がりません。しかし、次の記事ではカスタムCSSを使って画面いっぱいに広げる方法を解説していますので参考にしてみてください。Luxeritas以外でも応用可能です。
まとめ
ブロックエディターの画像配置で、全幅が使用できるテーマであれば、簡単に全幅の画像をサイト表示できます。
特に、”カバー”ブロックとの併用で、ヘッダー画像のように、全幅でかつテキストを重ねた画像を設置するのに威力を発揮できます。
ただし、全幅表示するにはテーマ側の対応が必須です。未対応のテーマの場合は、カスタムCSSで対応しましょう。
