【Twenty Eleven】グローバルメニューの色を変える!

WordPlessでホームページを作るのに大事なのが

テンプレート選び!

特に初心者なもんですから、htmlの知識
ましてやcss、phpのだって言葉くらいで、
どんな仕組みなんてまるっきり分からない訳ですよ。

こりゃぁ自分でカスタマイズは大変!
(デザイン上、どうしても必要に迫られる訳ですが・・・)

なので、テンプレート選びは作りたいサイトのイメージに
なるべく近くて使いやすいものが良いなぁ〜と思う訳です。

結論
そんな都合のいいテンプレートは無い!

だからと言って、すぐにhtmlもcssもphpも覚えれる訳ないんだし、
やってみなきゃはじまんねーよ!

ってな事なんです。(そうだよね?)

今回、ホームページを作成する事になったuhaneさんは
エステサロンと言う事もあり、綺麗な感じがいいかな?と思っていました。
どんなサイトにしたいかなどイメージを伺い
「こんな感じで」と教えられたサイトが白っぽい感じだったので

シンプルで行こう!

と自分の中で決めたのです。
(決してシンプルが楽とかじゃないからね!)

で、「お前にきめたぁ!」

ポチッ

とTwenty Elevenを選んだ訳ですが

まぁ、シンプル!

黒と白であっさり味に仕上がってます。

あっさりは好きだけど、
エステサロンに黒は頂けない・・・

そこで!
仕方が無くCSSをいじくる事を決意した訳です。

・グローバルメニューの背景色の変更

参考にさせて頂きましたサイト様=初心者に優しいWPカスタマイズ

uhaneさんに貰っていたロゴのデータがゴールドっぽい色だったので
style.cssの中の

/* =Menu
-------------------------------------------------------------- */

以下を丸っとコピペ
そして色の部分はホームページに合う様に多少変更。

#access {
  background: #daa520; /* Show a solid color for older browsers */
  background: -moz-linear-gradient(#b8860b, #daa520);
  background: -o-linear-gradient(#b8860b, #daa520);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8860b), to(#daa520)); /* older webkit syntax */
  background: -webkit-linear-gradient(#b8860b, #daa520);
  -webkit-box-shadow: rgba(255, 102, 102, 0.4) 0px 1px 2px;
  -moz-box-shadow: rgba(255, 102, 102, 0.4) 0px 1px 2px;
  box-shadow: rgba(255, 102, 102, 0.4) 0px 0px 0px;
  clear: both;
  display: block;
  float: left;
  margin: 0  auto 6px;
  width: 100%;
}

#b8860bが濃い目のゴールドで
#daa520が薄い目のゴールド(Web色見本

手探り手探りで色を変えましたが
この2色でグラデーションが出来るんですね!
すごい!(まだ理解はしてません・・・)

検索すれば色んな先生がいるので助かります。

続いて

・ロールオーバーの色変更

マウスを乗っけたら色が変わるあれですね!
スタイルシート(style.css)の中から、先ほどと同じく

/* =Menu
-------------------------------------------------------------- */

の中に

#access li:hover > a,

というコードがマウスオーバーの色変更の部分です。

このコードがある場所を書き換えます。

#access li:hover > a,
     #access a:focus {
	background: #daa520; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#fff, #ffffe0);
	background: -o-linear-gradient(#fff, #ffffe0);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ffffe0)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#fff, #ffffe0);
	color: #b8860b;
}

マウスオーバーなんで、背景とは対称的な色にした方が良いと思います。

私は、ゴールドベースだったので、淡い黄色と白のグラーデーションに
color:の部分が文字色の設定なので、文字色がゴールドになる様にしました。

とりあえず、これでグローバルメニューの背景色は様になったかな?どうですかね?


Leave a comment

Your email address will not be published.


*