スマホサイト制作日誌（６）カテゴリメニューを見やすくする

Tweet

前の記事：スマホサイト制作日誌（５）WPTouchテーマのTOP画面に任意のコンテンツを配置する

ここまで来ると、「もうWPTouchじゃなくね？？」」位の変貌をとげていますが、まだまだ直したいところはたくさん。
今回は、ヘッダー右端にあるメニューボタンから開くカテゴリメニューや、ヘッダー下のサブメニューのカスタマイズのお話。

管理画面でヘッダーの背景色を変更することはできますが、カテゴリーメニューは黒いまま・・・では、統一感がないので、ここも「家電女子.net」のテーマカラーに変更していきます。
　

カテゴリメニューをサイトに最適化する

メニューの設定は、style.css　のクラス「dropper」です。
background-color　で背景色、color で文字色、font-size で文字サイズを任意に変更します。

「家電女子.net」の場合は下記の通り（変更点のみを記述）
背景色：#ff3399、文字：#ffffff、文字サイズ：16px

.dropper {
	background-color: #ff3399;
}

.dropper a {
	color: #fff;
    　font-size:16px;
	}

同時に、タブメニューも変更します。タブメニューは ID「tabnav」です。
アクティブになっているタブは上の設定と同じなので、選択されていない状態の色設定も色バランスを考えて変更します。

・#tabnav {　の　background-color →タブの薄い色
・#tabnav a {　の　color　→タブの文字
・#tabnav a.selected {　の　background-color →選択されているタブの色
・#tabnav a.selected {　の color　→選択されているタブの文字　

「家電女子.net」の場合は下記の通り（変更点のみを記述）

#tabnav {
	background-color: #ffccff;
}

#tabnav a {
	color: #660033;
}

#tabnav a.selected {
	background-color: #FF3399;
	color: #fff !important;
}

サブメニューの文字・高さを変える

ヘッダーの下にあるTwitterや検索メニューが出てくるサブメニューバーですが、デフォルトだと幅が狭くてタッチしにくいので、文字サイズ・高さなどを調整します。
サブメニュー関連は、style.css　の ID「drop-fade」で設定します。

#drop-fade a.top {
	color: #666;
 	font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
	height: 20px;
}

「家電女子.net」では、文字を11px→14px、高さを18px→20px、文字色を#666666に変更しました。
高さはもう少し欲しいところですが、ヘッダーとのバランスを考えて微増に。
ちなみに、サブメニューバー自体の色は、管理画面から変更可能です。

メニューの出現位置を調整する

サブメニューバーの高さを変えたので、その下にメニューが出るように出現位置を変えてみました。
これは好みですね(笑)。
#wptouch-menu の「top」の数字を変えると、上からの位置を指定できます。

#wptouch-menu {
	position: absolute;
	z-index: 2;
	top: 65px;
	-webkit-box-shadow: #333 -6px 6px 6px;
	display: none;
}

デフォルトの45px→65pxに変更。　検索バーを隠さないようにしました。
「カテゴリから探すより検索した方が早いかなぁ~」と思った時にすぐに検索バーをタッチできるように。
それ以外の意味はあまりなし(笑)。

次はいよいよ制作日誌としてはラスト、ヘッダーをオリジナル画像に変更します。

次の記事：スマホサイト制作日誌（終）WPTouchのヘッダーを任意の画像にする

【過去記事】
・スマホサイト制作日誌（５）WPTouchテーマのTOP画面に任意のコンテンツを配置する
・スマホサイト制作日誌（４）WPTouchの記事リストのデザインを変更する
・スマホサイト制作日誌（３）WPTouchのオリジナルテーマを作る
・スマホサイト制作日誌（２）WPTouchカスタマイズ＜管理画面編＞
・スマホサイト制作日誌（１）スマートフォン対応って何？

Tweet