[TarCoon☆CarToon]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。
【お使いの Snow Monkey のバージョン】v5.0.8
【お使いのブラウザ】macOS Safari12.0.2、Google Chromeバージョン: 71.0.3578.98（Official Build） （64 ビット）

---

子テーマ環境で追加CSSを追記し

ヘッダーを透明、スクロール中のヘッダーは半透明の白にしておりました。now Monkey のバージョンをv5.0.8にしたところ、ヘッダーが真っ白になってしまいました。

追加CSSの記述が間違っているのか？
それとも仕様が変わったのか教えていただきたく思います。よろしくお願いします。

 

/*ヘッダーの背景カラー
———————————————– */

.l-header{
background-color:rgba( 255, 255, 255, 0.9 );
}

/*ヘッダーシャドゥ
———————————————– */

.c-page-header__content {
text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

 

 

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

仕様を変えたのかどうかちょっとハッキリ覚えていないのですが、もしかしたら 4.4 と 5 では変わっているかもしれません。スクロールしたときにでてくるメニューについては、次の CSS で色を変えれます。

.l-header__drop-nav {
  background-color: rgba(255, 255, 255, 0.9);
}

♥ 0

いいねをした人: 居ません

[TarCoon☆CarToon]

ありがとうございます。スクロールしたときにでてくるメニューは、.l-header__drop-navで無事半透明の白になりました。

 

希望としましては、スクロールしていない時のヘッダー背景は完全な透明にしたいのです。
スマホやタブレット表示だと透明になっているのですが、PCで見たときには白になってしまいます。

ホームページ上部は、ウィジットでショーケースを使っています。
ショーケースの画像がヘッダーの背景の下に表示されている形になるのですが、
PCの場合のみ白になってしまいます。

よろしくお願いします。

https://tarcoon.me

♥ 0

いいねをした人: 居ません

[TarCoon☆CarToon]

（追記）スクロールしたときにでてくるメニュー表示ですが、

スマホやタブレットで試した場合、スクロールしたときに白になってしまいます。

 

ヘッダー

ヘッダーレイアウト PCでの、ヘッダーレイアウトを設定できます。 ヘッダーレイアウトで使用したいレイアウトを選…

snow-monkey.2inc.org

こちらの記事にあるように、

・オーバレイ（コンテンツの上に重なる形で表示）

にしているのですが反映されません。

 

PC、スマホ、タブレットでも

・ヘッダーは透明

・スクロールしたときは半透明の白

にしたいです。よろしくお願いします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

ありゃほんとですね。こんな感じに書き直すとどうでしょう？

.l-header__drop-nav {
  background-color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1023px) {
  [data-scrolled=true] .l-header[data-l-header-type=overlay] {
    background-color: rgba(255, 255, 255, 0.9);
  }
}

♥ 0

いいねをした人: 居ません

[TarCoon☆CarToon]

ありがとうございます。PC、スマホ、タブレットちゃんとスクロールしたときにでてくるメニューは、半透明の白になりました。

しかし、残念なことに、スクロールしていない時のヘッダー背景が透明ではありません。

・オーバレイ（コンテンツの上に重なる形で表示）

にしているのですが、白背景のヘッダーが表示されています。
こちらもスマホやタブレット表示で透明になっているので、PCで見たとき透明であってほしいと思います。（ムズカシ〜ッ＞＜！！！）

ページを開いたときは、こんな感じで透明になってほしい。
以前はこうなっていたのですが、v5.0.8にした時に白背景になったことに気づいた。

お手数おかけしますがどうぞよろしくお願いします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

こちらもスマホやタブレット表示で透明になっているので、PCで見たとき透明であってほしいと思います。（ムズカシ〜ッ＞＜！！！）

あ、これは設定でできますね。オーバレイだとかの「ヘッダー位置」の設定は、デフォルトだと PC には適用されないようになっています。PC にも適用するには「ヘッダー位置設定をモバイルのみに適用」にチェックしてください。

追記：あ！これは説明が逆でした。PC にも適用するには「ヘッダー位置設定をモバイルのみに適用」のチェックを外してください。

ヘッダー

ヘッダーレイアウト PCでの、ヘッダーレイアウトを設定できます。 ヘッダーレイアウトで使用したいレイアウトを選…

snow-monkey.2inc.org

♥ 0

いいねをした人: 居ません

[TarCoon☆CarToon]

やっぱり反映されませんね。

以前はここで設定して透明にしていたのですが、v5.0.8へのアップデート後にオーバレイの「ヘッダー位置」が適応されていない状態になってしまいます。

追加CSSが悪さしているか？
子テーマが悪さしているのか？
等も可能性があるかな？と思ったので、追加CSSを削除したり、子テーマではなく、snowmonkeyの親テーマに切り替えたりしましたが、やはりオーバーレイにはなりませんでした。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

追加CSS、子テーマまで試してもらってありがとうございます！となると何らかバグがあるのかもしれません。改めて調べてみますのでしばしお待ちください！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

ちょっと修正をいれてみました。v5.0.9 にアップデートして試してみてください><

• 「ヘッダー位置」をオーバレイ
• 「ヘッダー位置設定をモバイルのみに適用」のチェックを外す

♥ 0

いいねをした人: 居ません

[TarCoon☆CarToon]

v5.0.9 にアップデートして、無事に透明になりました！！！ありがとうございます。

ちなみに、スクロールしたときにでてくるメニューは「ヘッダー位置設定をモバイルのみに適用」にチェックを入れた時ないと表示されません。

チェックを外している状態だと、メニューがそのまま表示されます。

個人的にはこの状態でも構わないのですが、仕様としてはどちらが正しいのか気になったもので報告させていただきました。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

v5.0.9 にアップデートして、無事に透明になりました！！！ありがとうございます。

良かったです！

個人的にはこの状態でも構わないのですが、仕様としてはどちらが正しいのか気になったもので報告させていただきました。

これは仕様通りとなります！

♥ 0

いいねをした人: 居ません

[投稿者]

投稿