• このエントリーをはてなブックマークに追加

賢威7のグローバルナビを最上部に固定・追従表示させる方法

どうも。葉です。

この記事では、賢威7のグローバルナビ(グローバルメニュー)を最上部に固定し、追従表示させる方法を解説していきます。

1.この記事を読んでできるようになること

まずは、この記事を読んでできるようになることを確認してください。

下図の「変更前」→「変更後」のように、グローバルナビ(グローバルメニュー)を最上部に固定させて、追従表示させることができるようになります。

変更前

ブログの最上部

グローバルナビがブログタイトルの下に表示されている

下にスクロールした時

画面上からグローバルナビが消える

変更後

ブログの最上部

グローバルナビを最上部に固定

下にスクロールした時

スクロールしてもグローバルナビが最上部に固定されている

では、実際に、CSSコードを編集して、グローバルナビ(グローバルメニュー)を最上部に固定させていきましょう。

2.賢威7のグローバルナビを最上部に固定し、追従表示させる手順

WordPress管理画面の左メニューより「外観→テーマの編集」をクリックしてください。

賢威7のグローバルナビを最上部に固定し、追従表示させる方法1

「base.css」をクリックしてください。

賢威7のグローバルナビを最上部に固定し、追従表示させる方法2

「base.css」の最下部に次のコードを記述してください。

/*-------------------------------------
グローバルナビを最上部に固定
-------------------------------------*/
.global-nav {
   position: fixed;
   top: 0px;
   left: 0;
   right: 0;
   z-index: 999;
}

賢威7のグローバルナビを最上部に固定し、追従表示させる方法3

これで、グローバルナビ(グローバルメニュー)が最上部に固定されたはずです。

補足1:ヘッダー上部のマージンを調節

ただ、このままでは、下図のように、ブログタイトルにグローバルナビ(グローバルメニュー)が被さってしまいます。

賢威7のグローバルナビを最上部に固定し、追従表示させる方法4

そこで、賢威7のヘッダー上部のマージンを調節してください。やり方は、次の記事を参考にしてください。

すると、下図のようにブログタイトルとグローバルナビ(グローバルメニュー)が被らなくできます。

賢威7のグローバルナビを最上部に固定し、追従表示させる方法5

補足2:グローバルナビの上下幅を調整

ここから更に、グローバルナビ(グローバルメニュー)の上下幅を調節してください。やり方、次の記事を参考にしてください。

賢威7のグローバルナビを最上部に固定し、追従表示させる方法6

これで、グローバルナビ(グローバルメニュー)をきれいに記事最上部に固定することができたはずです。

3.まとめ

この記事では、賢威7のグローバルナビ(グローバルメニュー)を記事最上部に固定する方法を解説しました。

この他にも、賢威7のグローバルナビ(グローバルメニュー)のデザインを変更したい場合は、次の記事を参考にしてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

WordPress 賢威カスタマイズ