グローバルナビゲーションの上下にCSS編集だけで余白を設定

グローバルナビゲーションの余白調整方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. グローバルナビゲーションの上下に余白を設定します。CSS編集だけで、HTMLは編集しません。

メリット

  1. 余白を増やすことで視認性が上がるかもしれません。

テンプレートのCSSを編集

  1. CSS編集で次のコードを探します。

    #nav-wrapper{min-height:24px;}
    valid-seo-3c-112-nav-padding-1.png
  2. 次のコードに変更します。赤の部分が追加したコードです。30を加減することで余白の幅を調整できます。

    #nav-wrapper{min-height:24px;padding:30px 0;}
  3. 変更前後を比較すると下図のとおりです。

    valid-seo-3c-112-nav-padding-2.png

以上です。

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