WordPressテーマTwenty Elevenでグローバルナビゲーション部の表示エリアを広げる方法

Pocket
LINEで送る

本投稿記事の内容は、「WordPress3.3.1」のテーマ「Twenty Eleven1.3」での話であり、バージョンが大きく異なると動作しない場合があります。
2012/06/03追記 「WordPress3.3.2」での動作を確認しました。
2012/06/20追記 「WordPress3.4」テーマ「Twenty Eleven1.4」での動作を確認しました。

WordPress3.3.1テーマTwenty Elevenの設定において、グローバルナビゲーション部の表示エリアが中央に寄りすぎて、狭くなっているのが気になっていた。

グローバルナビゲーション部の表示エリアの左右の余白を減らし、広げる事が出来たのでその方法を説明します。(左側余白しか確認していませんが、右側余白も同様に出来ると思います。)

グローバルナビゲーション部の表示エリアを広げる方法

まず
/wp-content/themes/twentyeleven内にある
「style.css」の「=Menu」の「#access ul」の箇所
を変更するだけです。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更します。

例)「style.css」


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


|4行目の「margin:」の「-0.8125em」の箇所を-(マイナス)側に
∨増やすことにより、左側余白が減って行きます。


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -2em;
	padding-left: 0;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これでグローバルナビゲーション部の左側余白を減らし、表示エリアを広げることが出来ます。

「margin:」の数値は順番に上、右、下、左のマージン量なので、2番目の数値を変えることにより、右側の余白を広げる事が出来るはずです。左のマージン量を「-2em」と設定したのは、スマートフォンでの表示を考えて設定しました。

Pocket
LINEで送る

スポンサーリンク

2 thoughts on “WordPressテーマTwenty Elevenでグローバルナビゲーション部の表示エリアを広げる方法

  1. お世話になっています。

    お陰さまで
    Header画像のサイズ変更が出来ました。
    有難うございます。

    実は
    グローバルナビゲーションに加えた
    固定ページを削除したいのですができません。

    参考にできるサイトをご存知でしたら
    ご教示ください。

    よろしくお願いします。

    • 田中さん、初めまして。

      少しでも当ブログが役に立てて嬉しいです。

      グローバルナビゲーションに加えた固定ページの削除の件ですが、
      グローバルナビゲーションに固定ページを加えたと言うことは、
      管理画面の「外観」-「メニュー」で固定ページを加えられたのでは
      ないかと思います。
      同じ管理画面の「外観」-「メニュー」で消したい固定ページを
      「除外」すれば消えないでしょうか?

      もし、私が意味を取り違えているのならすみません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



スポンサーリンク