WordPress・Lightningのヘッダーの色を変更

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

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

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

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

ヘッダーの色を変更

.siteHeader.navbar {background-color: #000;}

メニューの色を変更

メニューの色を赤に変更

.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; }

英語表記の文字色を変更

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）になるので黒色に変更する

.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; }; }

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

次に、マウスを乗せた時の色を白を（紫）に変更する

@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　の色を変更

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; } }