ナビメニューの背景をグラデーションにして差をつける

2017年2月13日gush2グラデーション, ナビメニュー, 背景gush2, ナビメニュー, 背景

gush2

ナビメニューの背景をグラデーションにして差をつける

 

gush2は素でも使えるが人と同じでは差がつかない。なので個性を出すためにナビメニューをカスタマイズして差をつけよう!

gush2でナビメニューのカスタマイズとして、背景をグラデェーションするやり方を解説してます。

 

  • ここで紹介するgush2のカスタマイズは、私の備忘録です。
  • gush2は素でも使える。でも個性を出すためにカスタマイズしよう
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのgush2をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いいたします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

デフォルトのナビメニューは以下のようになってると思います。

css3gena002

 

これを以下のようにカスタマイズします。

css3gena003

 

ナビメニューの背景をグラデーション

 

私は「CSS3 Generator」を使ってナビメニューの背景をグラデーションしてみました。

「CSS3 Generator」は、グラデーション、角丸、シャドウ、透明度などを視覚的に調整できる便利なツールです。調整も簡単で気に入った形を作成し、CSS3のコードを容易に発行することができます。

また、「CSS3 Generator」には、特に便利な機能があり、コードを発行したときに古いバージョンのIEや各ブラウザ(Firefox、Operaなど)に対応したCSS3のコードを作成してくれます。これは、ブラウザによってCSS3のコードの書き方が違うのでとても役に立ちます。

「CSS3 Generator」にアクセスします。

 

css3gena001

 

上記画面が表示されます。

 

「CSS3 Generator」の使い方

 

以下の設定項目は、横の「preview」で出来具合を観ながら作成出来るので、即座に修正ができるので簡単だと思います。

 

1.「border-radius」は角丸の調整。

ボックスの角の丸みを調整します。スライダーを動かす事によって丸みの度合いを調整します。

「+」ボタンをクリックすると、ボックスの4角を調整できます。

2.「box-shadow」はシャドウの調整。

ボックスの外側にシャドウ(影)を付けることが出来ます。

「+」ボタンをクリックすると、詳細設定が出来ます。

「horizontal」・・・ ボックスの右側にシャドウを付ける時の度合いを設定します。

「vertical」・・・ ボックスの下側にシャドウを付ける時の度合いを設定します。

「blur」・・・ シャドウのぼかしの度合いを設定します。

「spread ・・・ 上下左右全体にシャドウを付ける時の度合いを設定します。

「shadow:」・・・ シャドウの色を設定します。

「Inset Shadow?」・・・ ボックスの内側にシャドウを付けます。

3.「background gradient」を”ON”にするとグラデーションの調整が可能。

「from:」で初期の色を指定。「to:」で後半の色を指定します。

「+」ボタンをクリックすると、詳細設定が出来ます。

「top to bottom」ボタンをクリックすると、上から下へグラデーション。
「left to right」ボタンをクリックすると、左から右へグラデーション。
「right to left」ボタンをクリックすると、右から左へグラデーション。

4.「opacity」は透明度の調整。

設定値 100で不透明。スライダーを左に移行するほど、透明度が増します。

5.「GET THE CODE!」をクリックしてコードを取得

「GET THE CODE!」をクリックして、「select code」をクリックします。

すると設定したコードが全選択になりますので、右クリックしてコピーします。

とりあえず「TeraPad」等に貼り付けしておいた方が無難だと思います。

これでボックスをシャドウにする為のコードが完成です。

 

各テーマのスタイルシート(style.css)に記述

stinger 3の場合の例として

「#navi-in {」コード内に
background:「CSS3 Generator」で作成したコードを追記;
}

#navi-in li a:hover {
background: 「CSS3 Generator」で作成したコードを追記;
}

stinger 5の場合の例として

nav li {
background:「CSS3 Generator」で作成したコードを追記;
}

nav li a:hover {
background:「CSS3 Generator」で作成したコードを追記;
}

 

作成したコードをスタイルシート(style.css)に記述します。

子テーマを作成してる場合は、子テーマに記述。子テーマを作成していない方は、gush2のスタイルシート(style.css)の最後尾にに記述します。

ナビメニューの背景をグラデェーションにカスタマイズ

ナビメニュー(親)の背景色をグラデーションさせるコード

[css]
/* ナビの背景色をグラデェーション表示 */
.togmenu {
display: block;
color: #fff;
background: -moz-box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
box-shadow: 0px 0px 10px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#00FFFF’);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#00FFFF’)”;
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #4169e1, #00FFFF);
background-image: -ms-linear-gradient(top, #4169e1, #00FFFF);
background-image: -o-linear-gradient(top, #4169e1, #00FFFF);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#00FFFF));
background-image: -webkit-linear-gradient(top, #4169e1, #00FFFF);
background-image: linear-gradient(top, #4169e1, #00FFFF);
/*–IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS–*/
}
[/css]

ナビメニュー(親)にカーソルをあてると背景色をグラデェーションさせるコード

[css]
/* カーソルをのせると親のメニュー背景色のグラデェーション表示 */
nav#menu ul li:hover,
nav#menu ul li ul.sub-menu li {
border-bottom: 2px solid #ff7ddf; /* 下線の色を指定 */
background: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#0000cd’, endColorstr = ‘#00FFFF’);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#0000cd’, endColorstr = ‘#00FFFF’)”;
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #0000cd, #00FFFF);
background-image: -ms-linear-gradient(top, #0000cd, #00FFFF);
background-image: -o-linear-gradient(top, #0000cd, #00FFFF);
background-image: -webkit-gradient(linear, center top, center bottom, from(#0000cd), to(#00FFFF));
background-image: -webkit-linear-gradient(top, #0000cd, #00FFFF);
background-image: linear-gradient(top, #0000cd, #00FFFF);
/*–IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS–*/
/*–徐々に色を変更させる–*/
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
[/css]

ナビメニュー(親)にカーソルをのせた時のナビサブメニュー(子)の背景色をグラデェーション表示

[css]
/* 親のナビメニューにカーソルをのせるとナビサブメニュー(子)の背景色をグラデェーション表示 */
nav#menu ul li:hover ul.sub-menu li {
overflow: hidden;
min-height: 40px;
background: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#0000cd’, endColorstr = ‘#00FFFF’);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#0000cd’, endColorstr = ‘#00FFFF’)”;
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #0000cd, #00FFFF);
background-image: -ms-linear-gradient(top, #0000cd, #00FFFF);
background-image: -o-linear-gradient(top, #0000cd, #00FFFF);
background-image: -webkit-gradient(linear, center top, center bottom, from(#0000cd), to(#00FFFF));
background-image: -webkit-linear-gradient(top, #0000cd, #00FFFF);
background-image: linear-gradient(top, #0000cd, #00FFFF);
/*–IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS–*/
}
[/css]

ナビサブメニュー(子)にカーソルをのせるとナビサブメニュー(子)のテキスト色と背景をグラデーションするコード

[css]
/* ナビサブメニュー(子)にカーソルをのせるとナビサブメニュー(子)のテキスト色と背景をグラデーションに変更 */
nav#menu ul li ul.sub-menu li a:hover {
color: #ff7ddf;
background: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #00BFFF”, endColorstr = ‘#000080’);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#00BFFF’, endColorstr = ‘#000080’)”;
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #00BFFF, #000080);
background-image: -ms-linear-gradient(top, #00BFFF, #000080);
background-image: -o-linear-gradient(top, #00BFFF, #000080);
background-image: -webkit-gradient(linear, center top, center bottom, from(#00BFFF), to(#000080));
background-image: -webkit-linear-gradient(top, #00BFFF, #000080);
background-image: linear-gradient(top, #00BFFF, #000080);
/*–IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS–*/
/*–徐々に色を変更させる–*/
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
[/css]

 

ナビメニューのカスタマイズは、PCのみ表示なので全体のスタイルシートへの記述は以下のようになりました。

[css]
/*————————————–
1024px ナビゲーション
————————————–*/
@media screen and (min-width : 1024px) {

/* ナビの背景色をグラデェーション表示 */
.togmenu {
display: block;
color: #fff;
background: -moz-box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
box-shadow: 0px 0px 10px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#00FFFF’);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#4169e1’, endColorstr = ‘#00FFFF’)”;
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #4169e1, #00FFFF);
background-image: -ms-linear-gradient(top, #4169e1, #00FFFF);
background-image: -o-linear-gradient(top, #4169e1, #00FFFF);
background-image: -webkit-gradient(linear, center top, center bottom, from(#4169e1), to(#00FFFF));
background-image: -webkit-linear-gradient(top, #4169e1, #00FFFF);
background-image: linear-gradient(top, #4169e1, #00FFFF);
/*–IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS–*/
}

/* カーソルをのせると親のメニュー背景色のグラデェーション表示 */
nav#menu ul li:hover,
nav#menu ul li ul.sub-menu li {
border-bottom: 2px solid #ff7ddf; /* 下線の色を指定 */
background: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#0000cd’, endColorstr = ‘#00FFFF’);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#0000cd’, endColorstr = ‘#00FFFF’)”;
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #0000cd, #00FFFF);
background-image: -ms-linear-gradient(top, #0000cd, #00FFFF);
background-image: -o-linear-gradient(top, #0000cd, #00FFFF);
background-image: -webkit-gradient(linear, center top, center bottom, from(#0000cd), to(#00FFFF));
background-image: -webkit-linear-gradient(top, #0000cd, #00FFFF);
background-image: linear-gradient(top, #0000cd, #00FFFF);
/*–IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS–*/

/*–徐々に色を変更させる–*/
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;}

/* ナビサブメニュー(子)にカーソルをのせるとナビサブメニュー(子)のテキスト色と背景をグラデーションに変更 */
nav#menu ul li ul.sub-menu li a:hover {
color: #ff7ddf;
background: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #00BFFF”, endColorstr = ‘#000080’);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#00BFFF’, endColorstr = ‘#000080’)”;
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #00BFFF, #000080);
background-image: -ms-linear-gradient(top, #00BFFF, #000080);
background-image: -o-linear-gradient(top, #00BFFF, #000080);
background-image: -webkit-gradient(linear, center top, center bottom, from(#00BFFF), to(#000080));
background-image: -webkit-linear-gradient(top, #00BFFF, #000080);
background-image: linear-gradient(top, #00BFFF, #000080);
/*–IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS–*/
/*–徐々に色を変更させる–*/
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

/* 親のナビメニューにカーソルをのせるとナビサブメニュー(子)の背景色をグラデェーション表示 */
nav#menu ul li:hover ul.sub-menu li {
overflow: hidden;
min-height: 40px;
background: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#0000cd’, endColorstr = ‘#00FFFF’);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr = ‘#0000cd’, endColorstr = ‘#00FFFF’)”;
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #0000cd, #00FFFF);
background-image: -ms-linear-gradient(top, #0000cd, #00FFFF);
background-image: -o-linear-gradient(top, #0000cd, #00FFFF);
background-image: -webkit-gradient(linear, center top, center bottom, from(#0000cd), to(#00FFFF));
background-image: -webkit-linear-gradient(top, #0000cd, #00FFFF);
background-image: linear-gradient(top, #0000cd, #00FFFF);
/*–IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS–*/
}
}
[/css]

 

まとめ

ナビメニューのグラデーションは、テキスト色と背景色のバランスが大事です。

普通のカラー色を使用する場合は、特に迷わずインスピレーションで決定できたが、グラデーションの場合、テキストが読みづらいような配色だとブログの質が落ちると思います。

現在の私のナビメニューのカスタマイズは、まだまだ発展途上国です。100%気に入ってません。少し派手なような気がします。

上をめざしてカスタマイズしていきます。

その都度また等ブログにて解説していきます。