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

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

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

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

今回もCSSによるカスタマイズを扱います。

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

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

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

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

Lightningの大見出しについて

Lightningの「大見出し（h2）」に関する考え方は少々ややこしいのでご注意ください。

一応、公式ページには以下のようにレイアウトが記載されています。

ウィジットを使った場合は、各ウィジェットの見出しは通常は「h3」扱いとなります。

ところが、トップページの「トップページコンテンツエリア上部」に配置したウィジェットの場合のみ、見出しが「h2」扱いとなります。

なんかややこしいですなあ (^_^;)

この大見出しを変更します。

大見出しの変更

大見出しには、ニコッと笑う「歯」のアイコンを入れます。

最初はFont Awesomeのアイコンフォントを使おうと思ったのですが、「笑う歯」なんて都合の良いアイコンがあるわけもなく、素材を使ってロゴと共通化したアイコンを自作しました。

アイコン画像をWP管理画面よりメディアライブラリに登録した後、CSSに以下のコードを入れます。

.mainSection-title,
h2 {
    border-top:none !important;
    border-bottom:none !important;
    background-color:#f8a834;
    border-radius:5px;
    color:#fff;
    padding: 7px 10px 7px 20px;
    line-height: 2.5em;
    }

.mainSection-title:before,
h2:before {
    margin:0 10px 0 0;
    content:" ";
    display:inline-block;
    width:50px;
    height:50px;
    margin-right:20px;
    background-image:url( "画像ファイルのURLを入れます" );
    background-size:contain;
    background-repeat: no-repeat;
    vertical-align:middle;
    }

すると、見出しが変更されます。

トップページ

サブページ

最初の大見出しのみ、さらに変更

トップページの最初の大見出しは、ページ全体の「大見出し」という見た目にしたいため、ここだけさらに変更します。

まず、このセクションの「ID」を調べます。

ページ上で右クリックして「ページのソースを表示」で、トップページのHTMLコードを確認します。

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

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

で、以下のコードをCSSに記述します。

#text-2 h2 {
    text-align:center;
    background-color:#ffffe7;
    color:#333;
    border-radius:0;
    padding: 0 0 20px 0 !important;
    margin-bottom:30px;
    position: relative;
    }

#text-2 h2:before {
    margin-right:0px;
    background-image:none;
    width:0px;
    height:0px;
    }

#text-2 h2:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 0;
    border-bottom:solid 1px #f8a834 !important;
    }

これで最初の大見出しのみ変更されました。

Facebookページの囲みを消す

トップページ下段のFacebookページセクション、ここのグレーの囲みがすごく野暮に感じるので消します。

以下のCSSコードを記述します。

.fbPagePlugin_body {
    border:none !important;
    background-color:#ffffe7 !important;
    }

囲いが消えてスッキリしました。

今回はここまで

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

アイコン入りでメインカラーの大見出しが入り、全体が引き締まりました。

さてさて、次回もCSSでのカスタマイズで、「3PRセクション」の変更と、画像にマテリアルっぽいシャドウを入れます。

Lightningは、妙なところにマニアック的なこだわりを感じるテーマです。

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

2022.01.29

関連記事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」をカスタマイズ（その２）WP管理画面からのカスタマイズ

2022.01.29

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

2022.01.29

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

2021.06.01