THE THORWordPress

【THE THOR】ナビゲーションメニュー枠のカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

The main blog of masaa powered by WordPress.
スマホ、ガジェット、食玩などの記事をWordPressブログに毎日更新中!中の人はこれでもパパ。

WordPressテーマ THE THOR(ザ・トール)の「ナビゲーションメニュー」に関するカスタマイズとして、

【THE THOR】ナビゲーションメニューのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「ナビゲーションメニュー」のカスタマイズについてまとめてみました。今回の「ナビゲーションメニュー」のカスタマイズは、全体的にコンパクトにしてみました。
404 NOT FOUND | MASAa.net
Blog site specialized in personal computers provided by masaa

の二つのエントリー記事をこれまでアップしてきました。

今回は、その二つのエントリー記事では触れていなかったWordPressテーマ THE THOR(ザ・トール)の「ナビゲーションメニュー枠」に関するカスタマイズについてまとめてみました。

WordPressテーマ THE THOR ナビゲーション枠

WordPressテーマ THE THOR(ザ・トール)の「ナビゲーションメニュー枠」の表示は次の様になっています。

【THE THOR】ナビゲーションメニュー枠のカスタマイズ

今回「ナビゲーションメニュー枠」の気になる点として、枠の表示がないことです。

これを改善するカスタマイズを行ってみました。

ナビゲーションメニュー枠のカスタマイズ

「ナビゲーションメニュー枠」のカスタマイズを行います。

カスタマイズ内容

「ナビゲーションメニュー枠」のカスタマイズは、下記の通りです。

このカスタマイズ内容をthe-thor-childフォルダ内の「スタイルシート(style-user.css)」に追記します。

.menu-headermenu-container { /*ナビゲーションメニュー枠線設定*/
	border:1px solid #fe619a; /*枠線設定*/
}

カスタマイズ後のナビゲーション枠

今回の「ナビゲーションメニュー枠」のカスタマイズによって、「ナビゲーションメニュー枠」の表示は次の様になりました。

【THE THOR】ナビゲーションメニュー枠のカスタマイズ

今回の「ナビゲーションメニュー枠」のカスタマイズで、ナビゲーションメニューに枠を表示してみました。

最後に

これで全ての「ナビゲーションメニュー」に関するカスタマイズが完了しました。

「ナビゲーションメニュー」のカスタマイズは、今回のエントリー記事を含めて3つに分かれていますが、これらをまとめたカスタマイズは下記の通りです。

/************************************
** ■ナビゲーションメニューカスタマイズ
************************************/
.menu-headermenu-container.widget.widget_categories ul .children a,
.widget.widget_nav_menu ul.menu .sub-menu a { /*サブカテゴリー位置調整*/
	margin: 0 10px 0 18px; /*外側余白設定*/
}
.menu-headermenu-container { /*外枠調整*/
	padding: 2px 2px 2px 2px; /*内側余白設定*/
}
.menu-headermenu-container.widget.widget_categories ul li a,
.widget.widget_nav_menu ul.menu li a { /*縦幅調整*/
	padding: 8px 8px 8px 8px; /*内側余白設定*/
}
.menu-headermenu-container { /*ナビゲーションメニューフォント調整*/
	font-size: 15px; /*フォントサイズ*/
	font-weight: 700; /*フォント太さ*/
}
.menu-headermenu-container { /*ナビゲーションメニュー枠線設定*/
	border:1px solid #fe619a; /*枠線設定*/
}

コメント