ナビゲーション部分の変更

[tag:テーマクッキング]

今回はナビゲーション部分の変更をします。
サイトデザインで目を引きやすい部分なのでがんばりましょう。

以下の画像は解りやすいようにナビゲーション部分を黒枠で囲んでいます。

 ナビゲーションに背景画像を指定します。
PtextbookLCR/custom.cssの

/* グローバルナビゲーションコンテナ */

div#container div#navigation {
  top: 0;
（TOPからの位置）
  left: 0;
（leftからの位置）
  width: 940px;
（ナビゲーションの幅）
  margin: 0 0 5px 0;
（外側余白）
  padding: 0.5em 10px;
（内側余白）
  background: #ffffff;
（背景の指定）
  border-top: 1px solid #cccccc;
（ボーダー線の上の指定）
  border-bottom: 1px solid #cccccc;
（ボーダー線の下の指定）
  color: #000000;
（文字の色）
  text-align: left;
（文の開始位置）
}

 background　を以下のように書き換えます。

background: #ffffff url(images/custom/bnavi.png) repeat-x top left;

これは「背景色を白色に指定しbnavi.pngを左上から横に繰り返して表示する。」です。

背景画像は表示されましたが調整が必要です。
Headerのように白い余白を使いたいのでmargin値を修正します。
上の余白はheader.pngで下の部分に5px指定してるので残り左右下を指定します。

margin: 0 5px 5px 5px;

さらにナビゲーションの高さを大きめにしたいのでpaddingでその領域を確保します。

padding: 15px 10px;

これらにあわせてナビゲーションの幅も修正します。
このサイズの出し方は＜＜フッターの画像サイズの決め方の目安＞＞と同じです。

width: 928px;

黒い背景なので文字色を白色に、ダークグレイでナビゲーションを囲みます。

color: #ffffff;
border: 1px solid #333333;

ここまで修正したCSSと画像は以下の通りです。

/* グローバルナビゲーションコンテナ */

div#container div#navigation {
  top: 0;
  left: 0;
  width: 929px;
  margin: 0 5px 5px 5px;
  padding: 15px 10px;
  background: #ffffff url(images/custom/bnavi.png) repeat-x top left;
  border: 1px solid #333333;
  color: #ffffff;
  text-align: left;
}

次にナビゲーションの文字リンクを修正します。
PtextbookLCR/custom.cssの

/* ナビゲーションメニューリスト */
div#container div#navigation ul {
  list-style-type: none;
（リストマークの修正）
  margin: 0;
（外側の余白）
  padding: 0;
（内側の余白）
  background: transparent;
（背景の指定）
  border: 0px solid transparent;
（ボーダー線の指定）
  color: #000000;
（！削除する）
}

div#container div#navigation ul li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  background: transparent;
  border: 0px solid transparent;
  color: #000000;
（！削除する）
}

/* ナビゲーションメニュー(通常) */
div#container div#navigation ul li.menuitem {
  margin: 0;
  padding: 0 0 0 10px;
  background: transparent;
  border: 0px solid transparent;
  color: #000000;
（！削除する）
}

div#container div#navigation ul li.menuitem a,
div#container div#navigation ul li.menuitem a:link,
div#container div#navigation ul li.menuitem a:visited {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0px solid transparent;
  color: #333333;
}

div#container div#navigation ul li.menuitem a:hover,
div#container div#navigation ul li.menuitem a:focus,
div#container div#navigation ul li.menuitem a:active {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0px solid transparent;
  color: #ff6600;
}

ナビゲーションの文字色を白色に変更したのに文字色が変わらなかったのは
ナビゲーションメニュー本体はリストの並び替えをCSSで変えたものだからです。
この方法はスタンダードな手法なので情報は豊富です。

まず必要の無い　color　を削除します。
上記CSSの（！削除する）の上の　color　を削除します。
これは私のミスです、申し訳ございませんm(＿ ＿)m

次に残ったリンク文字色を修正します。
ここではリンクの下線も消すようにします。

color: #ffffff;
text-decoration: none;

さらにリンクをクリックする時に効果を出す修正をします。
a:link　と a:hover　についての解説は省略します。

background: #ffffff url(images/custom/bnavihov.png) repeat-x top left;
color: #cccccc;

 これは「hover時に背景にbnavihov.pngを左上から横に繰り返して表示する」です。
このままではリンク文字の周りにしか画像が表示されないので同様に　padding　を修正します。

ここまで修正後のCSSと画像です。

 /* グローバルナビゲーションコンテナ */

div#container div#navigation {
  top: 0;
  left: 0;
  width: 928px;
  margin: 0 5px 5px 5px;
  padding: 15px 10px;
  background: #ffffff url(images/custom/bnavi.png) repeat-x top left;
  border: 1px solid #333333;
  color: #ffffff;
  text-align: left;
}

/* ナビゲーションメニューリスト */
div#container div#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0px solid transparent;
}

div#container div#navigation ul li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  background: transparent;
  border: 0px solid transparent;
}

/* ナビゲーションメニュー(通常) */
div#container div#navigation ul li.menuitem {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0px solid transparent;

}

div#container div#navigation ul li.menuitem a,
div#container div#navigation ul li.menuitem a:link,
div#container div#navigation ul li.menuitem a:visited {
  margin: 0;
  padding: 15px 10px;
  background: transparent;
  border: 0px solid transparent;
  color: #ffffff;
  text-decoration: none;
}

div#container div#navigation ul li.menuitem a:hover,
div#container div#navigation ul li.menuitem a:focus,
div#container div#navigation ul li.menuitem a:active {
  margin: 0;
  padding: 15px 10px;
  background: #ffffff url(images/custom/bnavihov.png) repeat-x top left;
  border: 0px solid transparent;
  color: #cccccc;
}

/* ナビゲーションメニュー(最後) */
div#container div#navigation ul li.last-child {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0px solid transparent;
}

div#container div#navigation ul li.last-child a,
div#container div#navigation ul li.last-child a:link,
div#container div#navigation ul li.last-child a:visited {
  margin: 0;
  padding: 15px 10px;
  background: transparent;
  border: 0px solid transparent;
  color: #ffffff;
  text-decoration: none;
}

div#container div#navigation ul li.last-child a:hover,
div#container div#navigation ul li.last-child a:focus,
div#container div#navigation ul li.last-child a:active {
  margin: 0;
  padding: 15px 10px;
  background: #ffffff url(images/custom/bnavihov.png) repeat-x top left;
  border: 0px solid transparent;
  color: #cccccc;
}

独り言(´･д･｀)ﾎﾞｿｯ

＜＜見せる演出＞＞
ナビゲーション部分は動きのある部分なので色々試してみる価値はあります。
WEB上で色々なCSSナビゲーションデザインもあるので参考にすると
悩む時間が少なくなります、参考URLを紹介しておきます。
CSS Menu Generator（　http://www.cssmenumaker.com/　）