AFFINGER

【AFFINGER】グローバルナビ(グローバルメニュー)を上部に固定する方法( CSS だけで実現 )


パソコンを使う女性

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

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

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

パソコンでのグローバルナビの例

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

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

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

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

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

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

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

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

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

PCでのグローバルナビの例

■ ブラウザのサイズが 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」に記載します。

追加CSSを書く場所

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

CSS を追加して完成です。

まとめ

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

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

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

アフィリエイトを戦うなら「AFFINGER」

「AFFINGER TAG MANAGER プラグイン」では、コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「AFFINGER TAG MANAGER プラグイン」のご利用も是非ご検討ください。

  • 複数のページで同じことを書く場合、一か所にまとめられる「コード一括管理機能」
  • リンクがどのページでクリックされたかを計測できる
  • クリック数をランキングで確認できる

本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。

AFFINGER TAG MANAGER 紹介ページへ

AFFINGER 便利すぎる!コードを一括管理(STINGER タグ管理プラグイン)のすごさと使い方

WordPress で同じ広告を複数のページに貼っていて、広告が終了になり一気にすべて変えたいと思った時ありませんか?AFFINGER6の無料特典サービスプラグイン「STINGER タグ管理プラグイン2」 を使うことで、共通する広告やコードを一括してまとめて管理できます。詳しく紹介します。

続きを見る

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










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com