「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。
＊Lightning – シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ
前回に引き続き、Lightningのカスタマイズ「その４」。
今回も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セクション」の変更と、画像にマテリアルっぽいシャドウを入れます。
