WordPressテーマLightingで 全幅背景を設定する方法

WordPressテーマ

【Lightning全幅設定】Lightningで全幅背景を設定する方法

2019年10月25日

今回は、WordPressで有名な無料テーマ「Lightning(ライトニング)」で全幅(ブラウザ幅いっぱい)に背景色・背景画像をつける方法をご紹介します。
 

カバーブロックで全幅背景設定
 

Lightningを使っているんですけど、雰囲気を変えるために背景に色をつけたいんですけど、どうしたらよいでしょうか??

カバーブロックを利用することでブラウザ幅いっぱいの背景色を作ることができます

 

 
本記事は2022年6月に追記更新した内容です。ご利用のWordPressおよびテーマのバージョンによって手順が異なる場合がありますのであらかじめご了承ください。
 

【事前準備】Lightningで全幅の背景を設定する方法

Lightningで全幅の背景を設定する方法を説明する前に、まずは事前準備をしましょう。
 

今回は下記の前提で説明します。

  • WordPressテーマLightningが有効化されていること
  • 固定ページで1カラムテンプレートが適用されていること

 
 

Lightningを適用する

まずは、事前にLightningをインストール・有効化しておいてください。
ワードプレステーマ lightning
 

固定ページに1カラムテンプレートを適用する

全幅設定したい固定ページまたは投稿ページに対して1カラムレイアウトの設定を行います(サイドバーありのレイアウトだと上手くいきません)。
 

固定ページ編集画面でのLightningデザイン設定>Lightning デザイン設定で、「1カラム」を選択して、下書き保存または公開/更新しておきます。
Lightingデザイン設定>カラムの設定
 

※対象のページがすでにサイドバーなしの1カラムレイアウトになっている場合は、本操作は不要です。

関連記事

なお、任意の固定ページをトップページに割り当てる方法は「WordPressで固定ページをトップページにする設定方法」をご参照ください。

 

 

カバーブロックを利用して全幅設定する場合

WordPress標準のカバーブロックを利用して全幅設定することができます。

カバーブロックとは、画像を背景として設定して、その上に段落や見出しブロックを挿入して表示することができるブロックです。

カバーブロックの説明
 

手軽に画像にテキストを挿入できて、テキストの文字色を変えたり、画像に重ねるオーバーレイの色や画像の透過率を変えられます。

カバーブロックについての詳しい説明は、【WordPerssカバーブロックの使い方】背景画像に文字を入れる方法をご参照ください。
 

カバーブロックを挿入する

まずは、カバーを選び画像を背景画像に設定していきます。

ページの編集画面で左上の「+」プラスボタンをクリックして、メディアの中からカバーを選びます。

 

カバーブロックが挿入されて、以下の画面が表示されます。画像を選択するために、「アップロード」またはメディアライブラリを選択します。

 

まずは背景画像を設定したい場合で説明します。挿入したい画像にチェックを入れて、右下の選択ボタンをクリックします。

 

背景画像を挿入したら、以下のような画面が出てきます。

 

必要に応じてカバーブロックの上に段落などのブロックを入力してください。

 

全幅背景設定をする

カバーブロックで背景の幅を設します。下記は全幅に設定する例です。
全幅設定
 

全幅背景が設定されました。
全幅設定
 

※全幅設定はサイドバーありのレイアウトやご利用のテーマによっては、意図せぬ表示になる場合がありますのでご注意ください。
 

オーバーレイで色・不透明度を設定する

カバーブロックでは、画像の上に色を重ね合わせて(オーバーレイ)不透明度を設定したり、固定背景、焦点ピッカーなども設定できるようになっています。

不透明度を100にするか、画像をクリアすると、背景画像ではなく背景色が設定されます。

 
オーバーレイの色を変更したり、透過率を変えることで、文字を読みやすくしたり、画像の印象を変えることができるので、自分の好みの色や透過率に調節してみましょう。
 

固定背景設定

右のカバー設定から、背景を固定にすることもできます。


 

繰り返し背景

右のカバー設定から、背景画像の繰り返し設定をすることもできます。下記は、ドットのパターン画像を繰り返しした例です。
繰り返し設定
 

Lightning G3 Proの場合はOuterブロックで可能

Lightningの有料版テーマ「Lightning G3 Pro」をご利用の場合は、ブロックエディター のVK Blocks Proの「Outer」ブロックを利用することで設定せずに全幅の背景を設定することができます。

Outerブロック

こちらは全幅の境界を装飾したりなど、カバーブロックよりも高度な設定が可能です。

Lightning G3 Proの使い方については「Outer | 【徹底解説】WordPressテーマLightning G3 Proの使い方」をご参照ください。

 

 

HTMLとCSSで実施する場合

つぎに、HTML・CSSで全幅設定する方法もご紹介します。
HTML・CSSがわかる方でカバーブロックよりも細かいレイアウトを実現する必要がある場合にご参考ください。

【ステップ1】全幅設定のCSSを記述する

まず、全幅設定のCSSを追加CSSに記述します。

カスタマイズ>追加CSSで全幅になるCSSを設定します。追加するCSSコードは下記の通り。

 

追加CSSに全幅のCSSを設定する
 

■追加CSSにfull-widthクラスを追加する手順


 

上記は、full-widthクラスをつけた箇所を全幅にするというスタイルです。
 

(補足)(中級者向け)設定したCSSの意味

Lightningでは、固定ページ編集画面から背景を設定しても、背景が全幅にならず、通常下記のようになります。


 

今回設定したCSSでこのコンテンツ幅の余白を調整して全幅にしています。

  • margin: 0 calc(50% - 50vw)・・・marginは外部余白です。上下0px、左右にcalc(50%-50vw)の外部余白(ネガティブマージン≒広がる)をとっています。
  • padding: 5em calc(50vw - 50%)・・・paddingは内部余白。上下5em、左右にcalc(50vw - 50%)の内部余白をとっています。

重要な設定は 左右のcalc(50xx-50xx)の設定です。
 

50%は親要素コンテンツ幅の半分。50vwはビューポート(ウインドウ)幅の半分の大きさです。
 
marginに対して、calc(50vw - 50%) を設定することで、 (コンテンツ幅) - (ブラウザ幅) の差分だけ左右に広げています。
 
ただし、そのままだと中身のコンテンツもブラウザ幅いっぱいまで広がってしまうので、padding(左右)でcalc(50vw - 50%)を設定することで、(ブラウザ幅) - (コンテンツ幅) の差分だけ内部余白をとっています。
 
元々の状態
 

CSS設定後の状態
 

ですので、基本的にLightning以外のテーマでも同じCSSで全幅にすることが可能なはずです。

 
 

【ステップ2】固定ページで全幅の設定をする

つぎに、固定ページ側で全幅にしたい箇所をfull-widthクラスをつけたdivタグを追加します。
 

■ブロックエディター 全幅にしたい箇所をHTMLで<div class="full-width">でくくります。(ここでは背景色#2776c4で背景色の設定もしています。)
ブロックエディター full-widthをつけたdivタグを追加
 

関連記事

CSSで背景色や背景画像を設定する方法は「CSS 背景プロパティbackgroundの使い方まとめ」をご参照ください。

 

■クラシックエディターの場合でも同様にHTMLで<div class="full-width>でくくることで設定できます。
クラシックエディター full-widthをつけたdivタグを追加
 

以上で設定は完了です。全幅の背景が設定されていることを確認しましょう。


 
 

まとめ

まとめです。今回は、WordPressで有名な無料テーマ「Lightning(ライトニング)」の1カラムページでブラウザ幅いっぱいに背景色をつける方法をご紹介しました。
 


 

なお、Lightning G3 Proをご利用の場合は、VK Blocks Proの「Outer」を利用することで、簡単に全幅の設定をすることもできます。

 
Outerブロック
 
Lightning G3 Proの使い方については「WordPressテーマLightning G3 Proの使い方」をご参照ください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

 

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPressテーマ
-