ワードプレス　Luxeritasで全幅画像を表示する方法（他テーマでも応用可）

2021年5月13日

ブロックエディターでは、画像の配置の中に全幅を選択することができるようになってます。しかし、テーマによっては全幅が選択できなかったり、全幅を選択しても画面いっぱいに広がる画像にはならない場合があります。

テーマLuxeritasにおいても、エディターの中で全幅配置を選択するだけでは、画面いっぱいに広がる画像を表示させることはできません。

そこで、本記事では、カスタムCSSを使って、Luxeritasにおいて画面いっぱいに広がる画像を表示する方法について解説いたします。

Luxeritas以外のテーマでも応用できますので、ぜひ読んでみてくださいね。

全幅画像とは

全幅画像というのは、画面いっぱいに広がる画像のことです。

例えば、テーマTwenty Ninteenで、ブロックエディターを使って画像を”全幅”として配置します。

これをWebサイト表示させてみると次のようにパソコン表示、スマホ表示ともに、画面いっぱいに広がった画像が表示されます。

ブロックエディターでの全幅画像設定については、次の記事で詳しく解説していますので参考にしてください。

Luxeritasで全幅画像を配置してみる

では、Twenty Ninteen同様に、Luxeritasで全幅画像を配置してみるとどうなるでしょうか？

ただし、前提としては、デフォルトの2カラムレイアウトのままではサイドバーが邪魔になって全幅表示できないことは明確なので、あらかじめ1カラムレイアウトにしてから全幅画像としてみます。

1カラムレイアウトとする

1カラムレイアウトにする方法は、ダッシュボードメニューの外観＞カスタマイズ＞カラム操作　と進んで、デフォルトを1カラムとしておきます（初期設定は2カラム）。

もちろん、投稿ページだけとか固定ページだけなど、ページの種類ごとにカラム数を選択することもできます。

全幅画像の設定

それでは、全幅画像を配置します。

”投稿”にて”ブロックエディター”を使用して画像を配置し、”全幅”を選択しましょう。

ブロックエディターでの画像の配置方法については、以下の記事を参照ください。

Webサイト表示

では全幅配置した画像をWebサイト表示してみます。

残念ながら、このように画面いっぱいに広がる画像とはなっていません。

そこでカスタムCSSを追加して、画像を広げてみましょう。

カスタムCSSについてよく知らない、という方は、次の記事を参照してみてください。

カスタムCSSでの全幅画像表示の手順

追加CSSクラスを入力する

今回設定した画像ブロックを選択した状態で、編集エディター画面右ブロックパネルの一番下にある”高度な設定”の”追加CSSクラス”に任意のクラス名を入力します。

今回は、my-allwidth-imageとしました。

カスタムCSSを適用する

次のようなカスタムCSSを適用します。子テーマのstyle.cssに追記しましょう。

.my-allwidth-image {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

画像の左右にマイナスマージンをかけています。calc(50% – 50vw)　は、（画像自身の幅の半分）ー（画面幅の半分）を算出しますので、マイナスマージンとなって左右にはみ出すというわけです。

このCSS適用後、Web表示させると次のようになります。

このように画面幅いっぱいに画像を広げることができています。

すごく簡単ですね。

まとめ

全幅画像が適用されないテーマの場合でも、カスタムCSSを使用すれば簡単に画面いっぱいに画像を広げることができます。

実際、このウェブチルサイトでも、トップページのヘッダー部下に設置している画像は、この方法で全幅表示させています（2021年1月現在）。

Luxeritas以外のテーマでも、同様の手順で全幅画像表示ができるようになります。あなたのサイトづくりの参考になればと思います。

また、Luxeritasのおすすめ機能を次の記事でまとめていますので参考にしてくださいね。