WordPressテーマ「Lightning」をカスタマイズ（その７）全幅コンテンツの実装

「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。

＊Lightning シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ

前回に引き続き、Lightningのカスタマイズ「その７」。

今回は全幅のコンテンツを実装します。

前回はここまで進行しました↓

これを最終回までに、以下の状態にまでカスタマイズします。

＊北福岡歯科クリニック | 北福岡駅より徒歩2分の痛くない歯医者
（架空のサンプルサイトです）

＊2017/10/28のアップデートにより、コードを書き換えました。

Lightningと全幅コンテンツ

昨今のWEBサイトでは、ブラウザの横幅いっぱいに広がった全幅コンテンツをよく見かけます。

たとえば以下のサイトなど。

＊ルチェーレ会計事務所

＊株式会社フォーサイス

＊Home – Gemfields

こういうレイアウトは最近多いですね。

背景画像などを全幅で表示させて、時にパララックス効果などをかけたりします。
また、左右のスペースをたっぷり取っていて、非常に見やすいです。

で、我らがLightningの場合ですが、１カラムの構成だとコンテンツ領域は最大幅1170pxに制限されています。

何故そうなるかというと、スライドショーの下からフッターの上までのコンテンツ領域を、class「container」で囲っているからです。

<div class="container">
    <div class="row">
        <div class="col-md-12 mainSection">

        ～～　コンテンツ　～～

        </div><!-- [ /.mainSection ] -->
    </div><!-- [ /.row ] -->
</div><!-- [ /.container ] -->

class「container」はLightningに実装されているBootstrapのCSSコードです。

このclass「container」の記述内容を覗いてみると、

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

コンテンツ内に何かを記述してもブラウザの幅が1200px以上の場合は、widthが1170px以下に固定されてしまいます。

これではコンテンツ領域に全幅コンテンツを入れるのは不可能に思えます。

全幅コンテンツの実装方法

ところが、本来は不可能だったLightningへの全幅コンテンツの実装でしたが、9月27日のアップデートで可能になりました。

＊タイトルを全幅表示できる！「全幅見出しウィジェット」をリリース

見出しを全幅で入れるというウィジェット「LTG 全幅見出しウィジェット」が追加されました。

見出し用ウィジェットと言いつつ、テキストだけではなく画像も埋め込み可能です。
これを応用して全幅コンテンツを実装します。

全幅コンテンツを入れる位置

では、実際にやってみましょう。

本サイトで全幅コンテンツを入れたいのは、トップページの以下の２カ所です。

A、スライドショーの下に、背景色がメインカラーの帯を入れて「住所・電話番号」を表示する。

B、ページ中段に固定背景画像を入れ、テキストを表示する。

順番に「A」から実装します。

スライドショーの下に住所等の表記を入れる

WP管理画面より「外観」⇒「ウィジェット」を開きます。

「トップページコンテンツエリア上部」にウィジェット「LTG 全幅見出しウィジェット」を入れます。
場所は一番上です。

「LTG 全幅見出しウィジェット」の各項目に記述し、保存ボタンをクリックします

◇タイトル：郵便番号・住所
◇背景色：メインカラー（#f8a834）
◇文字色：白（#fff）
◇サブタイトル：電話番号

この段階では表示はこのようになります。

見出し用の「笑う歯」アイコンが入ってしまってヘンテコリンな感じです。
さらにスライドショーとの間に間隔が空いてしまってます。

ここはCSSで解消します。

アイコンを消す

まず、アイコンの解消です。

何故アイコンが入るかと言うと、住所の箇所は見出しの「h2」として記述されるからです。

解消策のCSSを載せておきます。
このコードを子テーマCSSに記述してください。

.widget_ltg_adv_full_wide_title_title:before {
    margin-right:0px;
    background-image:none;
    width:0px;
    height:0px;
    }

アイコンが消えました。

ついでに文字の大きさと色を修正しておきます。

.widget_ltg_adv_full_wide_title_title {
    font-size:17px;
    color:#fff;
    }

.widget_ltg_adv_full_wide_title_caption {
    color:#fff;
    }    
    
@media (min-width: 768px) {
    
.widget_ltg_adv_full_wide_title_title {
    font-size:19px;
    } 
    
}

@media (min-width: 992px) {

.widget_ltg_adv_full_wide_title_title {
    font-size:21px;
    } 
    
}

スライドショーとの間隔を無くす

スライドショーとの間が空いてしまってるので解消します。

.carousel {
    border-bottom:none;
    }

.home .siteContent {
    padding-top:0 !important;
    }

これでピッタリくっつきました。

ページ中段に固定背景画像を入れる

次に、もう一つの全幅コンテンツ、ページ中段に固定背景画像を入れます。

WP管理画面より「外観」⇒「ウィジェット」を開きます。

「トップページコンテンツエリア上部」にウィジェット「LTG 全幅見出しウィジェット」を入れます。
場所は「所在地・地図」と「プロフィール」の間です。

「LTG 全幅見出しウィジェット」の各項目に記述し、保存ボタンをクリックします

◇タイトル：クリニックのPR文章
◇画像：入れたい背景画像
◇文字色：茶色（#823d01）

この段階では表示はこのようになります。

なんだが細すぎですね・・
もとが見出し用のウィジェットなので、これは仕方ないです。

これをCSSでカスタマイズします。

まず、ここの背景画像はファイル容量が大きいので、スマホでは非表示にして、PC閲覧時（ブラウザ幅992px以上）のみ表示に変更します。

このセクションの「ID」を調べます。
ページ上で右クリックして「ページのソースを表示」で、トップページのHTMLコードを確認します。

該当セクションのIDを確認。

IDが「ltg_full_wide_title-3」と判明しました。
（＊数値はそれぞれの環境によって違います。ご注意ください）

#ltg_full_wide_title-3 {
    display:none;
    }

@media (min-width: 992px) {

#ltg_full_wide_title-3 {
    display:block;
    } 

}

これでスマホでは非表示となりました。

さらに、細い画像を太くします。
以下のコードを子テーマCSSに記述します。

@media (min-width: 992px) {

#ltg_full_wide_title-3 .widget_ltg_adv_full_wide_title_outer {
    height:500px;
    margin-top:80px !important;
    margin-bottom:80px !important;
    padding-top:190px;
    }
    
}

背景画像が太くなりました。
（＊PC閲覧時のみ）

上に載ってる文字を見やすくします。

@media (min-width: 992px) {

#ltg_full_wide_title-3 .widget_ltg_adv_full_wide_title_title {
    width:800px;
    margin:0 auto;
    padding:30px 50px;
    border-radius:10px;
    background-color:rgba(255,255,255,0.7);
    text-align:left;
    font-size:24px !important;
    }
    
}

文字の背景に半透明の白帯が入り、見やすくなりました。
（＊PC閲覧時のみ）

バクにご注意

ちなみに、この「LTG 全幅見出しウィジェット」にはバグがあります。
（2017/10/28現在）

例としてページ上段の「住所・電話番号」を入れた箇所のコードを見てみましょう。

ややこしいですけど注目していただきたいのは、

<h2 class="widget_ltg_adv_full_wide_title_title" style="">〒812-8577 福岡県福岡市博多区東公園7－7</h1>

この部分です。

見出しが「h2」タグで始まって、「h1」タグで閉じてます。

「LTG 全幅見出しウィジェット」を入れると、自動的に見出しを「h2」と「/h1」で挟んでしまいます。
これ、Lightning開発サイドのミスですね (^_^;)

Lightningの他の見出しの発想から考えて、ここは「h2」で記述するのが正解だと思います。

こういうバグは勘弁してほしいです。。。

今回はここまで

さて、ここまでのカスタマイズ結果です。

全幅コンテンツが「LTG 全幅見出しウィジェット」にて２つ実装されました。

そのうちの一つ、スライドショー下の「住所・電話番号」ですが、単に住所や電話番号を記述するだけなら、あえて全幅コンテンツにする必要はありません。

しかし、ヘッダーからスライドショー下にかけては背景色のみで色合いが単調なので、ここは全幅のメインカラーの帯を入れてメリハリを付ける意味合いがありました。

さてさて、次回はスライドショーの調整と３つのセクションのカスタマイズについてです。

今回の記事作成は２回分疲れました (^_^;)

関連記事WordPressテーマ「Lightning」をカスタマイズ（その９）よくある御質問ページの作成

2022.01.29

関連記事WordPressテーマ「Lightning」をカスタマイズ（その８）スライドショーの調整・他

2022.01.29

関連記事WordPressテーマ「Lightning」をカスタマイズ（その６）インフォメーションの設置

2022.01.29

関連記事WordPressテーマ「Lightning」をカスタマイズ（その５）3PRの変更・その他

2022.01.29

関連記事WordPressテーマ「Lightning」をカスタマイズ（その４）見出しの変更・その他

2022.01.29

関連記事WordPressテーマ「Lightning」をカスタマイズ（その３）フォントの変更・クレジットの非表示

2022.01.29

関連記事WordPressテーマ「Lightning」をカスタマイズ（その２）WP管理画面からのカスタマイズ

2022.01.29

関連記事WordPressテーマ「Lightning」をカスタマイズ（その１）準備編

2022.01.29

関連記事テーマの知識が無いと困る！？ 今後のWordPress制作

2021.06.01