[キタジマ タカシ]

以下教えてください！

– ヘッダーレイアウトの設定は何になっていますか？
– このメニューはグローバルナビゲーションに割り当てられていますが？
– ナビゲーション周りになにか独自のカスタマイズをしたり、ナビゲーションに影響がありそうな何か他のプラグインを入れていますか？

♥ 0

Who liked: No user

[キタジマ タカシ]

これまでは問題なかったが、今回のアップデートで競合してしまったのでしょうか？

ちょっとそれはわかりませんが、技術的には同じライブラリのバージョン違いを2つ読み込むということは一般的には競合が発生するものだと思うので、もしこれまで動いていたとしたら、それは偶然運が良かったのかなぐらいの感覚ですね…。Snow Monkey に限らず他の jQuery に依存しているプラグインや機能も同様なので、WordPress コアの jQuery で正しく動くように調整するのが良いと思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

なるほど！ まーちゅうさんが書いてくれた CSS、取り込むようにします！

♥ 2

Who liked:

[キタジマ タカシ]

独自の jQuery を読み込まれているからだと思います。Snow Monkey / Snow Monkey Blocks は WordPress コアが持っている jQuery を使いますが、独自に jQuery を読み込むと競合して正しく動かなくなってしまいます。独自に読み込んでいる jQuery を外してみてください！

♥ 0

Who liked: No user

[キタジマ タカシ]

何か画像に影響を与えるようなプラグインを入れられたりしてますかね？

♥ 1

Who liked:

[キタジマ タカシ]

Snow Monkey Forms は基本的に入力画面と確認画面で同じレイアウトを使い回すので、ちょっとこの形は実現できないのではないかなと思います…。

♥ 0

Who liked: No user

[キタジマ タカシ]

確認したところ、「パララックス」の設定に不具合があるようです。後日確認しようと思いますが、基本的にはこの設定はページの表示速度が遅くなる非推奨の古い機能なので、例えばカバーブロックと組み合わせるのはどうかなと思いました。

カバーブロックは「背景固定」の設定があるので、カバーブロックに背景画像と背景固定を設定して、その中に普通のセクションブロックを入れると背景画像があるセクションを擬似的に再現できるかなと思います。

♥ 3

Who liked:

[キタジマ タカシ]

CSS でやる方法も試してみたのでおいておきますね。
ビューポートが 1024px 未満は min-height を 50vh にする例です。

@media not all and (min-width: 1024px) {
  .smb-section--wide {
    --smb-section--min-height: 50vh;
  }
}

♥ 0

Who liked: No user

[キタジマ タカシ]

フルサイズで記事に入れた時に 2800×1400px になるなら問題はない気がします。だとしたらなにか Snow Monkey に不具合がある可能性もあるかもしれません。

こちらでも試してみたいのですが、その2枚の画像を頂くことってできますかね？

♥ 0

Who liked: No user

[キタジマ タカシ]

xlarge が確か 1920px？かその前後くらいの大きさだったと思いますが、それより小さい画像の場合は xlarge は表示されません。大きさはどんな感じでしょう？

♥ 0

Who liked: No user

[キタジマ タカシ]

アクツさんありがとうございます！

ひげがーるさん
.c-navbar__submenu に min-width が適用してあり、それでデフォルトの幅が決まっているので、0 にしてしまえば親と同じ大きさになると思います。

.c-navbar__submenu {
    min-width: 0;
}

♥ 2

Who liked:

[キタジマ タカシ]

CSS で消すのが簡単ではないでしょうか。

入力画面は .snow-monkey-form[data-screen="input"]
確認画面は .snow-monkey-form[data-screen="confirm"]

のセレクタで判別できます。

表示・非表示を切り替えたいブロックに適当な追加 CSS クラスを設定（例：input-screen-only）して、

.snow-monkey-form[data-screen="confirm"] .input-screen-only {
  display: none;
}

のようにすればどうでしょうか。

♥ 0

Who liked: No user

[キタジマ タカシ]

あ、なるほど！すみません、見逃していました。
えっと、

今回CONTACTのみ、CSSにて背景を同じ青色のアクセントカラーにしています。

とのことですが、Snow Monkey にはアクセントカラーでベタ塗りして白文字にする設定があります。ダッシュボード→メニューを開き、「お問い合わせ」のメニュー項目の「このメニュー項目を強調する」にチェックを入れて保存してください。追加されている CSS は消して大丈夫です。

♥ 0

Who liked: No user

[キタジマ タカシ]

ただいま確認したところ下記のように白文字になっていましたが、もう修正済みですかね？

♥ 0

Who liked: No user

[キタジマ タカシ]

こんな感じでどうでしょう？

.p-global-nav .c-navbar__submenu {
  background-color: red;
}

.p-global-nav .c-navbar__item[aria-haspopup=true]:before {
  border-bottom-color: red;
}

♥ 0

Who liked: No user

[投稿者]

投稿