WordPressテーマ「Lightning」をカスタマイズ(その4)見出しの変更・その他

WordPressテーマ「Lightning」をカスタマイズ(その4)見出しの変更・その他

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

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

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

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

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

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

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

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

~ 目次 ~

  • Lightningの大見出しについて
  • 大見出しの変更
  • 最初の大見出しのみ、さらに変更
  • Facebookページの囲みを消す
  • 今回はここまで

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セクション」の変更と、画像にマテリアルっぽいシャドウを入れます。

 

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

 

関連記事

WordPressテーマ「Lightning」をカスタマイズ(その9)よくある御質問ページの作成

2017.10.16

WordPressテーマ「Lightning」をカスタマイズ(その8)スライドショーの調整・他

2017.10.09

WordPressテーマ「Lightning」をカスタマイズ(その7)全幅コンテンツの実装

2017.10.02

WordPressテーマ「Lightning」をカスタマイズ(その6)インフォメーションの設置

2017.09.25

WordPressテーマ「Lightning」をカスタマイズ(その5)3PRの変更・その他

2017.09.18

WordPressテーマ「Lightning」をカスタマイズ(その3)フォントの変更・クレジットの非表示

2017.09.04

WordPressテーマ「Lightning」をカスタマイズ(その2)WP管理画面からのカスタマイズ

2017.08.28

WordPressテーマ「Lightning」をカスタマイズ(その1)準備編

2017.08.21

テーマの知識が無いと困る!? 今後のWordPress制作

2017.08.09