Twenty Thirteenのメニューをカスタマイズ

「Twenty Thirteen」のメニューをカスタマイズします。

はじめに

「Twenty Thirteen」のメニューをカスタマイズします。

メニューの高さを変更

スタイルシート(style.css)でメニューの高さを変更します。以下の例では、デフォルトの45pxから30pxに低くしています。

<変更後>

.main-navigation {
	clear: both;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 30px;
	position: relative;
}

メニューのリンクの文字色を変更

メニューのリンクの文字色を変更します。

<変更後>

.nav-menu li a {
	color: #209020;
	display: block;
	font-size: 14px;
	font-weight: bold;
	line-height: 2;
	padding: 3px 10px;
	text-decoration: none;
	background-image: -moz-linear-gradient(top, #ccc 0%, #bbb 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(1, #bbb));
	text-shadow: 3px 6px 6px rgba(0,0,0,0.2), 0px -5px 16px rgba(255,255,255,0.3);
}

フォーカス時のメニューの背景色を変更

フォーカス時のメニューの背景色を変更します。

<変更後>

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
	background-color: #209020;
	color: #fff;
	background-image: -moz-linear-gradient(top, #aaa 0%, #999 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(1, #bbb));
}

サブメニューのリンクの文字色を変更

サブメニューのリンクの文字色を変更します。

<変更後>

.nav-menu .sub-menu,
.nav-menu .children {
	background-color: #707070;
	border: 2px solid #f7f5e7;
	border-top: 0;
	padding: 0;
	position: absolute;
	left: -2px;
	z-index: 99999;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

サブメニューのリンクがフォーカス時の文字色を変更

サブメニューのリンクがフォーカス時の文字色を変更します。

<変更後>

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
	background-color: #209020;
}

現在表示中のメニューのリンクの文字色を変更

現在表示中のメニューのリンクの文字色を変更します。

<変更後>

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	background-color: #209020;
	color: #ffffff;
	font-style: normal;
}

メニューの背景色を変更

メニュー(ナビゲーションバー)の背景色を変更します。

<変更後>

.navbar {
	background-color: #e0e0e0;
	margin: 0 auto;
	max-width: 1600px;
	width: 100%;
}

おわりに

「Twenty Thirteen」のメニュー(メインナビゲーション)をカスタマイズしました。

関連記事(Twenty Thirteenの共通エリアの表示をカスタマイズ)

  1. Twenty Thirteenのヘッダーをカスタマイズ
  2. Twenty Thirteenのメニューをカスタマイズ
  3. Twenty Thirteenのサイドバー(右)をカスタマイズ
  4. Twenty Thirteenのサイドバー(下)をカスタマイズ
  5. Twenty Thirteenのフッターをカスタマイズ
  6. Twenty Thirteenで記事の高さをカスタマイズ

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)