グローバルナビゲーション内の各ボタン(項目)横幅を調整する方法

グローバルナビゲーション内の各ボタンの横幅をカスタムする方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. このページでは、グローバルナビゲーション内にある「HOME」や「サイトマップ」などの各項目のことを「ボタン」と呼称します。

  2. ボタン横幅を調整し、グローバルナビゲーション横幅ぴったりにボタンを配置するなどボタン横幅のカスタム方法です。

  3. HTML編集はありません。CSS編集だけです。

  4. このページでは customtemplate (ver1.1.1) で例示しますが、 valid-seo-3c (ver1.1.1) や valid-seo-2c (ver1.1.1) でも同じ要領でカスタムできます。

メリット

  1. グローバルナビゲーションの横幅ぴったりにボタンを配置できます。ボタンの外側にあたるグローバルナビゲーションにボタン横幅を合わせます。調整次第でグローバルナビゲーション内右端の隙間を解消できます。

  2. 横幅をボタン内側の文字列にあわせて伸縮できます。文字数を少なくすればするほどたくさんのボタンを設置できます。

ボタン横幅をグローバルナビゲーション横幅に合わせる

customtemplate (ver1.1.1) のデフォルトからのカスタム方法です。

CSS編集で調整する際の数値算出方法1

  1. グローバルナビゲーション横幅は祖先要素の #page に依存します。customtemplate の#page 横幅は 958px ですので、グローバルナビゲーション横幅も 958px です。

  2. 各ボタンの横幅を均等にするためには、 958px をボタン数の7こで割ります。

    • 958 ÷ 7 = 136 と余り 6
  3. それぞれのボタンにmargin-right:1px;がありますが、右端(7番目)のボタンのmargin-right:1px;を解除します。これで先ほどの計算で余りだった「6」を7番目のボタン以外のmargin-right:1px;として扱えます。次の式の数字をマウスオーバーすると解説が表示されます。

CSS編集で調整する際の数値算出方法2

  1. 上記ケースでは、margin-rightを適用するボタン「6こ」と、余っている横幅「6px」がたまたま合致しました。合致しないケースの方が多いので、次の条件だとどのように算出するかを以下で述べます。上記算出方法の方が概念を分かりやすいと思い載せました。しかし、下記算出方法の方が実用的かと思います。

    • #page 横幅: 1000px
    • ボタン数:8こ
    • (この条件はvalid-seo-3c のデフォルトと同じです)
  2. 横幅から、先にmargin-right:1px;をボタン7こ分引いてから、横幅を8こで割ります。

    • ( 1000 - 7 ) ÷ 8 = 124 と余り 1
    • 左7つのボタンは横幅124pxmargin-right:1px;
    • 右端(8番目)のボタンは横幅124pxに余りの1pxを横幅として加算
    • 逆算が成り立つか確認 → ( 124 + 1 ) × 7 + 124 + 1 = 1000
  3. 「余り」を最後のボタンの横幅に加算すれば、グローバルナビゲーション内部右端に隙間はできなくなる、という算段です。よって、各ボタン横幅を正確に均等割りできているわけではありませんが、グローバルナビゲーション内部右端に隙間があるよりも見栄えは良いです。

  4. ボタンの横幅を均等割にするために、#page自体の横幅を調整するというのも一方法ではあります。

CSS編集で調整する具体的な部分

  1. 次のコードを見つけます。下図で反転している部分です。

    
    #nav li{width:14%;float:left;background:#eee;margin:0 1px 0 0;position:relative;list-style-type:none;text-align:center;}
    
    customtemplate-111-buttons-in-nav-1.png
  2. 下記コードに入れ替えます。赤文字の部分が上記コードを修正した部分であったり、追加した部分です。

    
    #nav li{width:136px;float:left;background:#eee;margin:0 1px 0 0;position:relative;list-style-type:none;text-align:center;}
    #nav #nav-sitemap{margin:0;}
    
    customtemplate-111-buttons-in-nav-2.png
  3. 上記コードは customtemplate (ver1.1.1) のデフォルトからの設定例です。条件が変われば単純にコピペするだけではうまくいかないと思います。算出方法を参考いただければ幸いです。

  4. ボタン横幅均等割デモページです。

ボタン横幅を内側の文字に合わせる

  1. 下図で反転している部分を修正します。

    customtemplate-111-buttons-in-nav-3.png
  2. width:14%;は削除し、1px5pxに修正しました。なお、5pxの数字部分(5)を増減するとボタン内余白の横幅を調整できます。

    customtemplate-111-buttons-in-nav-4.png
  3. ボタン内文字列に横幅を合わせる場合のデモページです。

ボタン横幅のデフォルト設定について

  1. デフォルトでは、#pageの横幅を増減すると、それにあわせてボタンの横幅も連動して増減するようにしています。(パーセントで相対指定)

  2. その方がカスタムにあまり慣れていない方には都合がいいかな、と考えているからです。ボタン横幅を固定していて#page横幅を減らすと、グローバルナビゲーションが2段になってしまいます。カラム落ちのような状態です。

  3. #pageの横幅をデフォルト設定から変更しない方が多いようなら、最初からグローバルナビゲーション右端の隙間がない状態にしておいた方がいいかな、とも考えています。

  4. 今後のテンプレート改訂時(ver1.1.2以降)にここらへんも見直すかもしれません。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)