Lightningのヘッダーの色を変更

11

記事の方法でカスタムを100%保障するものではございません。

悪しからずご了承下さいませ。

古いバージョンでのカスタム内容となります

※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

WordPress・テーマLightningの改造

改造後1

前回は Lightningのコピーライトを削除をして

ガンダムかジムか分からなくしたので

今回は、ヘッダーの色を変更してガンダム臭を消したいと思います。

「ジーク・ジオン!」
 

 

 

 

 

 

ドム仕様に改造

ザク仕様にする予定でしたが、黒ベースの方が楽そうなので「ドム仕様」にします。

[スポンサーリンク]

ドム

ヘッダーの色を変更

wp-content/themes/Lightning-master/css/style.css

2691行 .siteHeader { background-color: #fff; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 0; }

background-color: #fff; を  background-color: #000;

でヘッダーの色が黒に変わります


/*-------------------------------------------*/
/* .siteHeader
/*-------------------------------------------*/
.siteHeader { background-color: #000; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 0; }

 
 

変更後

ヘッダー色 黒

メニューの色を変更

ヘッダーを黒色に変更したらメニューが見えにくいのでメニューの色を変更します

2726行目 .gMenu_name { font-weight: normal; color: #464646; }

color: #464646;  を color: #FF0000;

メニューの色を赤に変更


.gMenu_name { font-weight: normal; color: #464646; }

ul.gMenu a { display: block; overflow: hidden; border-bottom: 1px solid #e5e5e5; color: #666; text-decoration: none; }
ul.gMenu a:hover { color: #337ab7; }
ul.gMenu ul { padding-left: 0; width: auto; display: block; }
ul.gMenu ul li a { display: block; overflow: hidden; padding: 10px 1em 10px 2em; width: auto; }
ul.gMenu ul li li a { padding-left: 3em; }
ul.gMenu ul li li li a { padding-left: 4em; }
ul.gMenu ul li li li li a { padding-left: 5em; }

.gMenu_name { font-weight: normal; color: #FF0000; }

 

変更後

ヘッダ色変更

 
 

英語表記の文字色を変更

次に、英語表記の文字色を変更します。

2718行目 ul.gMenu a { display: block; overflow: hidden; border-bottom: 1px solid #e5e5e5; color: #666; text-decoration: none; }

color: #666; を ドムの目の色を意識して color: #f2a7ce; に変更


nav { font-size: 14px; }
nav ul { margin-top: 0; }
nav li { margin-bottom: 0; }
nav i { margin-right: 0.5rem; }

ul.gMenu a { display: block; overflow: hidden; border-bottom: 1px solid #e5e5e5; color: #f2a7ce; text-decoration: none; } 
ul.gMenu a:hover { color: #337ab7; }
ul.gMenu ul { padding-left: 0; width: auto; display: block; }
ul.gMenu ul li a { display: block; overflow: hidden; padding: 10px 1em 10px 2em; width: auto; }
ul.gMenu ul li li a { padding-left: 3em; }
ul.gMenu ul li li li a { padding-left: 4em; }
ul.gMenu ul li li li li a { padding-left: 5em; }

 

変更後

ヘッダ色
 
 

マウスを乗せた時の色を変更

次は、マウスを乗せると英字表記が青系の色(#337ab7)になるので黒色に変更する
 
 

変更前

変更前

 

ul.gMenu a:hover, ul.gMenu a:active { background-color: #fff; color: #337ab7; }

2735行目  ul.gMenu a:hover, ul.gMenu a:active { background-color: #fff; color: #337ab7; }

color: #337ab7;  を color: #000;


.gMenu_description { display: block; overflow: hidden; font-size: 10px; line-height: 14px; }

@media (max-width: 767px) { ul.gMenu { border-top: 1px solid #e5e5e5; margin-bottom: 0; }
  ul.gMenu a:hover, ul.gMenu a:active, ul.gMenu .current-menu-item a { background-color: #fcfcfc; } }
@media (min-width: 768px) { .gMenu_name { text-align: center; display: block; }
  .gMenu_description { text-align: center; }
  ul.gMenu { float: right; }
  ul.gMenu a:hover, ul.gMenu a:active { background-color: #fff; color: #000; } 
  ul.gMenu > li { position: relative; }
  ul.gMenu > li > a { border-bottom: none; }; }

 
 

変更後

変更後

 
 

マウスを乗せた時の色を変更

次に、マウスを乗せた時の色を白をドムカラー(紫)に変更する

2735行目  ul.gMenu a:hover, ul.gMenu a:active { background-color: #fff; color: #337ab7; }

background-color: #fff; を background-color: #b395ce;


@media (max-width: 767px) { ul.gMenu { border-top: 1px solid #e5e5e5; margin-bottom: 0; }
  ul.gMenu a:hover, ul.gMenu a:active, ul.gMenu .current-menu-item a { background-color: #fcfcfc; } }
@media (min-width: 768px) { .gMenu_name { text-align: center; display: block; }
  .gMenu_description { text-align: center; }
  ul.gMenu { float: right; }
  ul.gMenu a:hover, ul.gMenu a:active { background-color: #b395ce; color: #000; } 
  ul.gMenu > li { position: relative; }
  ul.gMenu > li > a { border-bottom: none; }
  ul.gMenu > li > a:hover:after, ul.gMenu > li.current-post-ancestor > a:after, ul.gMenu > li.current-menu-item > a:after, ul.gMenu > li.current-menu-parent > a:after, ul.gMenu > li.current-menu-ancestor > a:after, ul.gMenu > li.current_page_parent > a:after, ul.gMenu > li.current_page_ancestor > a:after { content: "."; line-height: 0; border-bottom: 1px solid #337ab7; bottom: 0px; display: block; overflow: hidden; position: absolute; width: 100%; left: 0; }

 
 

変更後

メニュー変更
 
 

sub-menu の色を変更

最後に sub-menu の色(白)ををドムカラー(紫)に変更します

2740 ul.gMenu > li > ul.sub-menu li { width: 240px; margin: 0; list-style: none; background-color: #fff; display: block; overflow: visible; position: relative; }


  ul.gMenu > li > ul.sub-menu { display: none; position: absolute; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); z-index: 1000; }
  ul.gMenu > li > ul.sub-menu li { width: 240px; margin: 0; list-style: none; background-color: #b395ce; display: block; overflow: visible; position: relative; }  2740
  ul.gMenu > li > ul.sub-menu li ul { margin-bottom: 0; display: none; position: absolute; left: 240px; top: 0.8em; }
  ul.gMenu > li > ul.sub-menu li a { padding-left: 1.5em; }
  ul.gMenu > li > ul.sub-menu li a:hover { background-color: #f5f5f5; }
  ul.gMenu li:hover > ul.sub-menu { display: block; }
  ul.gMenu ul.sub-menu li:hover ul { display: block; } }

 
 

完成

メニュー色

 

これで少しドムに近づきました。会社のロゴの色が…変更します。

改造2

改造2

ロゴとデザイン設定でキーカラーを変更したのがこちら

ドムには、まだまだですが、ガンダム臭は消えましたね

 

 

 

 
 

 

 
 

Lightningの改造

 

この投稿へのコメント

  1. よし said on 2017-08-27 at 9:57 PM

    はじめまして、よしといいます。
    Lightningのカスタマイズを探していてこちらへたどり着きました。

    以上の設定は、Lightningのバージョンが3.2.0の場合は
    wp-content/themes/MY_THEME_NAME/design_skin/origin/css/style.css
    でいいでしょうか??

    またこれらは子テーマにコピーして直したほうがいいでしょうか?
    お忙しいと思いますが、教えていただければ幸いです。

    • mario said on 2017-08-28 at 7:21 PM

      はじめましとて、3.2.0などのカスタムをしておりませんので正確にお答えできませんがsiteHeaderの記載があれば
      そこでいいと思います。

      バージョンアップなどがありますのでカスタムは子テーマで行った方がいいと思います。

      あくまでのカスタム方法の一例となりますので、スタイル優先を!importantで行った方が楽だと思います

コメントを残す