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

WordPress

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

2019年10月25日

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

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

追加CSSで今回ご紹介する全幅用のCSSを設定することでブラウザ幅いっぱいの背景色を作ることができます。今回はLightingで全幅背景を設定する方法をご紹介しますね。

 

■全幅(ブラウザ幅)に背景色をつけたページの例


 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 


 
 

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

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

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

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

 

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

Lightningの有料版テーマ「Lightning Pro」をご利用の場合は、ブロックエディター のVK Blocks レイアウト「Outer」ブロックを利用することで、CSSなど設定せずに全幅の背景を設定することができます。
 
VK Block レイアウト Outer(アウター)
 
Lightning Proの使い方については「Outer | 【徹底解説】WordPressテーマLightning Proの使い方」をご参照ください。

 
 

Lightningを適用する

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

なお、今回の設定方法は、有料版Lightning Proでも適用可能です。
Lightning Pro
 

関連記事

 

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

つぎに、全幅設定したい固定ページに対して1カラムレイアウトの設定を行います。
 

トップページの場合はカスタマイズ>Lightningデザイン設定>Lightning デザイン設定で、「トップページを1カラムにする」にチェックを入れます。


 

関連記事

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

 

トップページ以外の固定ページの場合は、テンプレート属性で「サイドバーなし」を選択します。
テンプレート サイドバーなしを選択
 

この時点で下記のようなページを用意しているところまで準備してください。


 

全幅背景を設定する方法

全幅背景を設定するためには、「追加CSSに全幅用のCSSを設定」して、「固定ページ側の背景をつけたい箇所にCSSのクラスをつける」という2つのステップを踏みます。
 

(関連)LTG_全幅見出し

Lightingには、LTG_全幅見出しというウィジェットが用意されています。このウィジェットを利用すれば簡単な全幅の見出しが可能です。
 
LGT_全幅見出しウィジェット
 


 
ただし、あくまで全幅かした見出しの設定なので、コンテンツそのものを全幅にする場合にはあまり向いておらず、今回ご紹介する方法がおすすめです。

 
 

【ステップ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">でくくります。(ここではstyle=<#2776c4>で背景色の設定もしています。)
ブロックエディター full-widthをつけたdivタグを追加
 

関連記事

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

 

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

■ページビルダー(SiteOrigin by Page Builder)を使っている場合は、html・cssを使わなくても全幅に設定することができます。


 

背景色に応じて文字色なども変更しましょう。ここでは、文字を白くします。(下記は白くて見えませんが、透明色の白の画像も入れています。)


 

PageBuilder エディター クラスfull-widthを追加
 

PageBuilder エディター 背景設定
 

PageBuilder 行の編集
 

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


 
 

まとめ

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


 

ここでは、下記のCSSを利用することで、余白を使ってコンテンツ幅を広げて全幅背景を作っています。

 

■元々の状態
元々の状態
 

■CSS設定後の状態
CSS設定後の状態

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

 

VK Block レイアウト Outer(アウター)
 
Lightning Proの使い方については「Outer | 【徹底解説】WordPressテーマLightning Proの使い方」をご参照ください。
 

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

 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

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

詳細はこちら

 

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

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

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

【WordPressホームページの作り方総まとめ 12STEPで解説】

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

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, , ,

© 2020 WEBST8のブログ Powered by AFFINGER5