グローバルナビ・メニューを上に固定、CSSだけで実現する方法＠AFFINGER

---

---

グローバルナビをサイト上部に固定することで、ユーザビリティが向上するとともに、ユーザーのサイト内の回遊率アップも期待できます。

AFFINGER では、標準でグローバルナビを固定する機能が無いため、CSSで簡単に実現する方法を紹介します。

グローバルナビを固定するメリット

グローバルナビ（サイト上部のメニュー）を、画面上部に常に固定して表示します。

記事をスクロールしても常に上部に表示されていることにより、多くのメリットがあります。

• ユーザーが常にメニューから他の記事に移動できる（サイト内回遊率が上がる）
• 上部に横に一本、線ができるので、見た目がかっこいい

グローバルメニューを固定する方法

■ グローバルナビを固定する場合の画面の種類

グローバルナビのクラス名は「gazou-wide」です。基本的には、「position: fixed」を指定して固定化します。

ただし、AFFINGER の場合、記事の横幅によってグローバルナビの形状が変わります。

■ ブラウザの横幅が 960 px 以上の場合

グローバルナビ（メニュー）を表示します。

■ ブラウザのサイズが 959 px 以下の場合

タブレット、スマホ用のグローバルナビを表示します。

959 px 以下のタブレット、スマホ用では、文字メニューリンクが表示されないため上部に固定するメリットは殆どなく、また、画面を狭くしてしまうため、固定化しないほうが好ましいです。

そのため、960 px 以上の場合のみ固定化するように CSS を記載します。

■ 記事全体の開始位置を下げる

グローバルナビを "fixed" 固定化すると、最初に記事を表示した場合に記事の上側がグローバルナビの下に隠れます。

そのため、グローバルの高さ分だけ、記事の上部に「空きスペース」を CSS で指定します。

body に対して 「padding-top: 20px」を指定することで記事上部に空白を作り、記事全体を下にずらします。

「20px」は自身のグローバルナビの高さに合わせて調整してください。

■ グローバルナビを固定する CSS のサンプル

グローバルナビを固定する CSS のサンプルです。

@media screen and (min-width: 960px) {
    #gazou-wide {
        position: fixed;
        z-index: 10001;
        top: 0;
        width: 100%;
        background-color: #775555;
    }
    body {
        padding-top: 20px;
    }
}

@media screen and (min-width: 960px)	表示エリアの横幅は 960 px 以上の場合のみ実行する指定です。
gazou-wide	グローバルナビを指定します
position: fixed	グローバルナビを固定します
z-index: 10001	グローバルナビを最上位（最前面）に表示します。 指定しない場合、グローバルナビが、記事の下に隠れる場合があります。
top: 0 / width: 100%	グローバルナビの位置、幅を指定します。
background-color: #775555	グローバルナビの背景色を指定します。指定しない場合、左右に空白ができ横幅 100% のグローバルナビになりません。 背景色 「＃775555」は、自身のサイトのグローバルナビの背景色に変えてください。
padding-top: 20px	body （記事エリア）に対して、上に 20px の余白を入れています。 「20 px」は自身のサイトのグローバルナビの高さに合わせて変えてください。

■ WordPress の「追加 CSS」に追記する

グローバルナビは、サイト内のどの記事ページでも表示するため、サイト全体に CSS を適用する必要があります。

WordPress の「追加CSS」に記載します。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

CSS を追加して完成です。

まとめ

WordPress のテーマ「AFFINGER」で、グローバルナビを上部に固定する方法です。

• グローバルナビの固定は CSS で行う
• 本文箇所（ body ）は上部に余白を作る
• グローバルナビは最上位（最前面）に表示する
• ブラウザの横幅によって固定 / 非固定を切り替える

AFFINGER を使って、どんどんサイトをオシャレにしてくださいね。

WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック！

 

Presented By Boon Boon Blog .Com