【Twenty Ten】グローバルナビゲーションのスタイル変更

TwentyTen1.2には、管理画面から使える機能「背景、メニュー、ヘッダー、ウィジェット」など用意されているので、それらを管理画面から使えるように配慮しながらテーマをカスタマイズしていきます。

グローバルナビゲーション機能が、ヘッダー画像下にあります。標準ではリンクされている文字の大きさに合わせて横幅が決まるようになっていますが、それを固定の幅にします。また、文字の横に区切りのラインを入れますので、以下のコードをstyle.cssに追加します。
style.css

#access ul li {
  width: 135px;
  text-align: center;
  border-right: solid 1px #FFF;
  padding-right: 0px;
  padding-left: 0px;
}

それから個人の好みになるのですが、フォントの大きさの変更やグローバルナビ（メニュー）のリンク文字に設定されいるpaddingなどを変更します。

【例：文字の大きさやマージン設定（変更前）】

#access .menu-header,
div.menu {
  font-size: 13px;
  margin-left: 12px;
  width: 928px;
}

以下の文を上記に設定します。
margin-left: 0px;
fontを14px;

【例：パディング設定（変更前）】

#access a {
  color: #aaa;
  display: block;
  line-height: 38px;
  padding: 0 10px;
  text-decoration: none;
}

以下の文を上記に設定します。
padding 0 2px;

さらにフォーカスされているリンク文字を見やすいように太字にしてみます。

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
  color: #fff;
  font-weight: bold;
}

上の表示のようにfont-weight: bold;を追加。

スタイル変更後、以下の画像のようになります。