ワードプレステーマTwentyTwelveで、グローバルナビゲーションの上部余白をなくす方法です。ヘッダー部分の配置(タイトル/ヘッダー画像/グローバルナビゲーション)の変更方法はこちらをご覧下さい。
テーマTwentyTwelveは、デフォルトですとそんなに違和感はないのですが、ヘッダー画像をアップロードした途端に余白が気になり始めました。これは、グローバルナビそしてヘッダー画像の上部に’margin’が指定してある為です。
この値を0にすれば余白はなくなりますので、以下を参考に編集してみて下さい。
グローバルナビ上部の余白をなくすのはココ!!
それでは、管理画面より「外観」⇒「テーマ編集」より’スタイルシート’を開き、以下の部分を見つけて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)
/* Navigation Menu */
.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover {
color: #21759b;
}この部分ですね。これが、グローバルナビの上部に余白を作っています。これをそのままそっくり削除してもOKです。または、値を0にすればOKです。
/* Navigation Menu */
.main-navigation {
margin-top: 0;
text-align: center;
}
.main-navigation li {
margin-top: 0;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover {
color: #21759b;
}こんな感じです。この様に編集することで、ヘッダー画像の真下(余白がなく)にグローバルナビゲーションが表示されるハズです。
デフォルトですと、ヘッダータイトル(サイトタイトル)の真下になりますか。配置については、サイト構成やお好みに応じて編集する様にしてみて下さい。
