賢威のグローバルメニューの位置を固定する方法

※当サイトにはプロモーションが含まれています。

にゃテック

問い合わせをもらったにゃ

読者

賢威のカスタマイズ方法を無料で公開してくれて助かっています。
賢威のサポートでは、サポート対象外らしいので教えて下さい。

読者

グローバルナビが最上部にきたら、グローバルナビだけを固定する方法を教えて下さい。

にゃテック

おけまるだにゃ

ご自身のサイト状況によって、調整を加える必要がありますが、そんな悩みを解決するカスタマイズ方法を紹介します。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ：賢威８
WordPressバージョン：5.8.x
PHPバージョン：7.4.x
サーバー：さくらインターネット

※現在、WP：6.2.x、PHP：8.2.xでも動作しています

この記事の目次

ヘッダーのグローバルメニューの位置を固定する方法
- CSSについて説明
- JavaScriptについて説明
JavaScriptの記載箇所

ヘッダーのグローバルメニューの位置を固定する方法

賢威のグローバルメニューの位置を固定化するコードを先に記載します。

CSS

/* グローバルメニュー固定化 */
@media (min-width: 768px) {
.keni-gnav_wrap {
position: relative;
transition: background-color 0.3s, top 0.3s;
z-index: 9999;
width: 100%;
}
}

.nya-fixed {
position: fixed;
top: 0;
background-color: rgba(59, 70, 117, 0.8);
}

.nya-fixed .keni-gnav_cont {
background-color: rgba(59, 70, 117, 0.3);
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
const globalMenu = document.querySelector(".keni-gnav_wrap");
const offset = 140; // スクロール距離（px）

window.addEventListener("scroll", function() {
if (window.scrollY >= offset) {
globalMenu.classList.add("nya-fixed");
} else {
globalMenu.classList.remove("nya-fixed");
}
});
});

では、続いてこのコードについて説明していきます。

CSSについて説明

まず最初に、CSSのコードとその内容について説明します。

.keni-gnav_wrapについて

.keni-gnav_wrapは、賢威で使用されているクラスです。

@media (min-width: 768px)は、768px以上のデバイス（主にパソコンやタブレット）で表示された時にルールを適用するようにしています。

この中で大事な設定は、z-index: 9999;です。

この設定をしておくことで、スクロールした時に、グローバルメニューが前面に表示されます。

widthは幅に関する設定、positionは位置の設定、サイト状況によっては不要かもしれません。

transitionは、背景色を透明化する際のアニメーション設定の為、なくても構いません。

.nya-fixedについて

position: fixed;で、グローバルメニューを固定化します。

top: 0;で、スクロール最上部に位置を調整します。

background-color: rgba(59, 70, 117, 0.8);では、スクロールした時に、グローバルメニューの色を青の半透明にしたいので、設定しています。

その為、半透明にする必要がない場合は、削除しても構いません。

.nya-fixed .keni-gnav_contについて

こちらの設定も、グローバルメニューの色を半透明にするだけの設定なので、必要なければ.nya-fixed .keni-gnav_contごと削除しても問題ありません。

基本的にこれらの設定は、現在のグローバルメニューの見た目に影響を与えないはずです。

JavaScriptについて説明

このJavaScrptのポイントは、

const offset = 140;

の箇所です。

この設定では、140px下にスクロールすると、クラスnya-fixedが付与されます。

その事により、グローバルメニューが固定化されるのですが、問題はどれくらいスクロールすればいいのかが、サイト状況によって違うことです。

確認方法は、自分のサイトをブラウザで表示させ、ヘッダー画像を右クリックして、「開発者ツールで調査する」を選択します。

賢威のヘッダー画像を開発者ツールで調査する

すると、要素が表示されるはずなので、

<!--▼▼ ヘッダ ▼▼-->
<div class="keni-header_wrap">

と書かれている部分を探して、その部分を選択（クリック）します。

すると、ヘッダー幅の取られている数値が表示されると思います。

デベロッパーツールで高さの確認

この表示された値を、先程の

const offset = 140;

の数値部分に、半角で入力します。

つまり、高さが400pxだったら、

const offset = 400;

と記載します。

JavaScriptの記載箇所

グローバルメニューを固定化するには、JavaScriptを記載する必要があります。

賢威の設定 > 埋め込みコード設定

を選択。

「</body>直前に挿入するコード記入欄」に、JavaScriptのコードを記載して「変更を保存」ボタンで保存します。

<script>
document.addEventListener("DOMContentLoaded", function() {
const globalMenu = document.querySelector(".keni-gnav_wrap");
const offset = 140; // スクロール距離（px）
window.addEventListener("scroll", function() {
if (window.scrollY >= offset) {
globalMenu.classList.add("nya-fixed");
} else {
globalMenu.classList.remove("nya-fixed");
}
});
});
</script>

なお、<script>タグを忘れずに記載してください。

</body>直前に挿入するコード記入欄にJavaScriptを記載

あとは、CSSを「追加CSS」に記載すれば、グローバルメニューが固定化されたと思います。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

	Windows	Mac
Google Chrome	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Microsoft Edge	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Mozilla Firefox	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Safari(Mac)	‐	【Command＋Option＋R】