メインビジュアルと重なる間、ナビメニューのカラーを変えるカスタマイズ【PC表示限定】

フロントページかつPC表示（画面幅1024px以上）のとき限定のカスタマイズになります。

メインビジュアルにどんな画像を設定するかによってですが、その上に重なる間だけ、ナビメニューのテキストカラーや背景色を変えたいことがあると思います。

カスタマイズ対象：以下のナビメニュー

スクロールに連動して、メインビジュアルの表示が終わったら、通常のテーマカスタマイザーで設定しているカラーに戻るカスタマイズです。

子テーマのjavascript.jsとstyle.cssにちょこっと書くだけのカスタマイズです。

完成イメージ：当サイトのフロントページに適用中！

メインビジュアルと重なる間のナビメニューのテキストカラー（アイコンも同じ）を濃いめの紺色に変更し、背景色を透明に変更してます。
（以前との変化が分かりにくいかも・・・）

スクロールしてメインビジュアルの表示が終わったら、テーマカスタマイザーで設定したテキストカラー・背景色に戻ります。

【事前連絡①】カスタマイズは自己責任でお願いします

この記事のカスタマイズ用コードは参考用です。絶対に動作を保証します、というものではありません。

各自の環境（入れているプラグインなども含めて）によっては、同じ様に動作しないこともあると思います。ですが、その場合の解析は各自で行ってください。

当サイトのお問い合わせフォームの対象外とさせていただきますので、あらかじめご了承ください。

【事前連絡②】カスタマイズは必ず子テーマで行ってください

Cocoonテーマそのものをテーマファイルエディターで編集しないようにしてください。
カスタマイズは必ず子テーマで行ってください。

子テーマのダウンロード方法は、Cocoon公式サイトの以下記事をご参照ください。

子テーマでのカスタマイズ方法がよくわからない場合は、以下記事を事前にお読みください。

以下記事中でも触れていますが、必ず事前にバックアップを取ってください。

カスタマイズ手順

今回は、子テーマのjavascript.jsとstyle.cssを編集します。

１．javascript.jsに書く内容

以下コードをコピペして各自の子テーマのjavascript.jsに貼り付けます。

// FrontPage MV navi-color-change
const observeElementAttribute = (ChangeSelector, targetSelector, attributeName, options) => {
  const ChangeElement = document.querySelector(ChangeSelector);
  const targetElement = document.querySelector(targetSelector);

  if (!ChangeElement || !targetElement) return;

  const observeHandler = (entries) => {
    ChangeElement.setAttribute(attributeName, !entries[0].isIntersecting);
  };

  const observer = new IntersectionObserver(observeHandler, options);
  observer.observe(targetElement);
};
// PC
observeElementAttribute(
  '.front-top-page.skin-grayish #navi-in', // ChangeSelector
  '.front-top-page.skin-grayish .header-container', // targetSelector
  'data-navi-active', // attributeName
  {
    root: null,
    threshold: 0
  }
);

２．style.cssに書く内容

属性data-navi-activeが交差中の状態（false）のナビメニューの背景色と、テキストカラーを設定します。

以下コード内の黄色線部分を、各自の子テーマのstyle.cssに貼り付けます。

尚、以下コードの設定値は当サイトに適用しているものなので、適宜お好みのカラーコードに変更してご利用ください。

貼り付ける位置は、

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

が書いてある上になります。

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* FrontPage MV navi-color-change */
.skin-grayish #navi-in[data-navi-active=false] {
  background-color: transparent;
}

.skin-grayish #navi-in[data-navi-active=false]>ul.menu-top.menu-header.menu-pc>li>a,
.skin-grayish #navi-in[data-navi-active=false] [class^="icon-"],
.skin-grayish #navi-in[data-navi-active=false] .search-menu-icon span::before {
  color: #333a3f;
  filter: drop-shadow(0px 0px 4px white);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

ナビメニュー背景色の変更

ナビメニュー背景色は上記コードではtransparent：透明になっています。

以下黄色の下線部分をお好みで変更します。

.skin-grayish #navi-in[data-navi-active=false] {
  background-color: transparent;
}

透明ではない値を使用する場合、例えば赤にするなら↓のように書きます。（赤にはしないと思うけど）

.skin-grayish #navi-in[data-navi-active=false] {
  background-color: red;
}

カラーコードの参考サイトを見てお好みのカラーを探して決めてもいいですね。

ナビメニューのテキスト、SNSアイコン、検索アイコンのカラー変更

参考コードでは、テキストカラーは濃いめの紺色（#333a3f。以下コードの黄色線部分）にし、白色のドロップシャドウ（以下コードの赤色線部分）もつけています。

.skin-grayish #navi-in[data-navi-active=false]>ul.menu-top.menu-header.menu-pc>li>a,
.skin-grayish #navi-in[data-navi-active=false] [class^="icon-"],
.skin-grayish #navi-in[data-navi-active=false] .search-menu-icon span::before {
  color: #333a3f;
  filter: drop-shadow(0px 0px 4px white);
}

ドロップシャドウが不要の場合は以下を削除します。

  filter: drop-shadow(0px 0px 4px white);

ご参考：デモサイト

grayishのデモサイト２つにも、このカスタマイズを使用しています。

この記事は以上になります。