ワードプレステーマTwentyTwelveのグローバルナビゲーションのリンク/マウスオーバー時の背景色及び文字色の変更をする方法です。大変お待たせしました!!
テーマTwentyTwelveのグローバルナビゲーションは、デフォルトですと大変アッサリしています…。なので、最初からカスタマイズする必要があります。
そして、このリンクオーバー時の設定です。チョッと面倒の様に見えますが、1記事1テーマで書いていますので多く感じるだけです。慣れてしまえば、1回の作業で済みますのでご安心下さい。
それでは、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)
スタイルシートから、次の部分を探して下さい。
/* =Media queries
-------------------------------------------------------------- */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
～～～～～～～～ 中略 ～～～～～～～
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
position: relative;
}
↓これを、下記の様に追加/編集してみて下さい。
/* =Media queries
-------------------------------------------------------------- */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
～～～～～～～～ 中略 ～～～～～～～
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover { /* マウスオーバー時の文字色/背景色の設定 */
background: #eaffb8;
color: #000;
-moz-border-radius:3.5px;
-webkit-border-radius:3.5px;
-khtml-border-radius:3.5px;
border-radius:3.5px;
-moz-border-radius:0.25rem;
-webkit-border-radius:0.25rem;
-khtml-border-radius:0.25rem;
border-radius:0.25rem;
}
.main-navigation li { /* メニュー文字の文字と文字の間(隙間)の設定 */
margin: 0 18px 0 0;
margin: 0 1.285714286rem 0 0;
position: relative;
}
いかがでしょうか?これで、グローバルナビゲーションのマウスオーバー時の文字色/背景色が変わったハズです。カラーコードや数値を変える事によって、様々な表現が出来ると思います。
これで、グローバルナビゲーションの表示がグ～ンと良くなったと思います♫
