ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

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

2021年4月29日リリースのversion3.16.0からLuxeritasでも画像ブロックの全幅対応がされるようになりました。そのため、本記事の内容はLuxeritasでは不要かもしれませんが、非対応の他テーマを使用している場合の参考になればと思います。

目次

全幅画像とは

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

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

Twenty Nineteenで画像を全幅で挿入

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

Twenty Nineteen全幅画像のサイト表示

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

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

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

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

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

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

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

カラム数の選択で1カラム化しておく

全幅画像の設定

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

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

全幅で画像を配置

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

Webサイト表示

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

全幅画像のWeb表示結果

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

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

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

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

追加CSSクラスを入力する

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

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

追加CSSクラスの設定

※編集画面右にブロックパネルが表示されていない場合は、画面右上の設定(歯車マーク)をクリックすれば表示できます。

情報パネルの表示・非表示切り替え

カスタムCSSを適用する

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

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

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

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

カスタムCSS適用後の全幅画像Web表示

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

すごく簡単ですね。

まとめ

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

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

ウェブチルトップページヘッダー下の全幅画像

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

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

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる