「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。
＊Lightning – シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ
前回に引き続き、Lightningのカスタマイズ「その３」。
今回はCSSによるカスタマイズを扱います。
前回は、WP管理画面からあれこれ設定をいじってみました。
これを最終回までに、以下の状態にまでカスタマイズします。
＊北福岡歯科クリニック | 北福岡駅より徒歩2分の痛くない歯医者
（架空のサンプルサイトです）
＊2017/10/28のアップデートにより、コードを一部書き換えました。
～ 目次 ～
- フォントを変更
- フォントの大きさ・太さを変更
- 背景色を変更
- フッターの空白を非表示に
- フッターのLightningクレジット表記を消す
- 今回はここまで
フォントを変更
「Lightning」は秀逸なWP無料テーマだとは思いますが、幾つか致命的に気にくわない点があります。
その一つがフォント（字体）です。
親テーマのCSSを覗いてみると、フォント設定は以下のようになっています。
body { font-family: "メイリオ",Meiryo,"ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif; }
この設定だと各端末でのフォント表示はこのようになります。
◇Windows：メイリオ
◇Mac：ヒラギノ角ゴシック
◇スマホ・タブレット：OSのデフォルトフォント
そして、私のWin10パソコンだとフォントは以下のように表示されます。
「メイリオ」というフォントで表示されてますね。
メイリオって嫌いじゃないけど、あの丸っこい感じがなんとも軽々しくて、真面目なサイトや重々しい法人サイトなどでは不向きだと思います。
たまに士業の堅物サイトなどでメイリオで表示されているところを見かけますが、いかにもチグハグで残念な感じを受けますね。
逆に、ノリが軽妙なサイトや、可愛い系のサイトなどでは向いてると思います。
たとえば当ブログもWindowsで見ると「メイリオ」で表示されます。
で、この歯科サイトでは真面目さを重視して、フォントは「游ゴシック」をメインにしたいと思います。
子テーマの「style.css」に以下のように記述します。
body, p { font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight:500 !important; }
こうすると、各端末では
◇Windows8.1及び10：游ゴシック
◇Windows7：メイリオ
◇Mac（Mavericks以降）：游ゴシック
◇Mac（Mountain Lion以前）：ヒラギノ角ゴシック
◇スマホ・タブレット：OSのデフォルトフォント
で、表示されます。
私のWin10パソコンでは以下のように変更されます。
「游ゴシック」で表示されました。
真面目な感じが良いです。
Win7では相変わらずメイリオで表示されますが、どうせ今後減っていくOSバージョンですからw
他にはGoogleフォントの「Noto Sans」を使うという選択肢もありましたが、今回は「游ゴシック」を使用しました。
フォントの大きさ・太さを変更
PCで見るとPタグのフォントが小さく感じるので、PC閲覧時（画面幅992px以上）のフォントサイズを変更します。
@media (min-width: 992px) { p { font-size:20px; } }
さらに、「游ゴシック」に切り替えるとメニュー（ナビゲーション）の文字が見づらくなったので、太字にします。
.gMenu_name { font-weight:bold !important; }
背景色を変更
背景色を変更します。
「Lightning」で気に食わない点の２番目ですが、背景色がWordPressの設定画面から変更できないんです。
なんでしょうね、この残念仕様は。
おそらく、変更させたきゃ有料プラグイン買いなさいという策なんでしょうけど。
さて、Lightningの背景色はデフォルトでは白です。
これを最近の歯科サイトに多い、淡い明るい色に変えたいと思います。
子テーマの「style.css」に以下のように記述します。
body, header, nav ul li a { background-color:#ffffe7 !important; }
フッターの空白を非表示に
この時点で、フッターの上半分が空白になってます。
ここにはウィジェットエリアの３つ、
「フッターウィジェットエリア１」
「フッターウィジェットエリア２」
「フッターウィジェットエリア３」
これらが左・中央・右と平行３列に入るエリアです。
ですが、ウィジェットは何も入れてないためにぽっかりと空白になってます。
そもそも何も入れない場合は、自動的に非表示にしてくれればいいのにね・・
「ユーザーは絶対ここにウィジェットを入れます！」と確信して作ってるのでしょうね。
でも、私は入れませんｗ
小規模サイトの場合はわざわざ何かを入れる必要性を感じません。
よって、ここはCSSで無理矢理に非表示に変えます。
さらにセクションの余計な区切り線も消します。
footer .sectionBox { display:none !important; } footer .copySection { display:block !important; border-top:none !important; }
フッターのLightningクレジット表記を消す
フッター最下部には
「Powered by WordPress with Lightning Theme & VK All in One Expansion Unit by Vektor,Inc. technology.」
というLightningのクレジット表記があります。
これが邪魔なので消します。
「いやいや、消して大丈夫なの？」というそこの貴方！
消して大丈夫です。
LightningもWordPress自体もGPLライセンスなので、こういうのは表示しなくて問題ありません。
邪魔者は消しましょう。
消す方法は公式サイトに書かれていますが、
削除専門の有料プラグインを買いなさい、ということなので却下します。
他の方法としては、
◇phpファイルをいじる方法
◇CSSで消す
の２パターンあります。
ここは簡単な後者でいきます。
footer .copySection p:nth-child(2) { display:none !important; }
すっきり消えました。
今回はここまで
さて、ここまでのカスタマイズ結果です。
背景色が変わると、受ける雰囲気も一気に変わりますね。
さてさて、次回もCSSでのカスタマイズで、見出しの変更などを行います。
