エラーログで書かれていることがよくわからなかったので、chat GPTに確認してもらいました。
以下の回答をいただきました。
Snow Monkey Blocks が出力する background-parallax.js に “変数の宣言より前に参照してしまう” バグ（TDZ Temporal Dead Zone）が残っているため、JavaScript が途中で落ちて Snow Monkey Forms も実行されなくなっている。
詳しく分解すると
1.スクリプトの中身
js
コピーする編集する
r(/*中略*/){
d.forEach(/*…*/); // ← ここで d を参照
}
let d = document.querySelectorAll(‘[data-bg-parallax]’); // ← まだ初期化されていない
let d は 宣言より前にアクセスすると ReferenceError になる仕様（TDZ）。
2.その結果
- background-parallax.js が最初のフレームでクラッシュ
- 同じファイル内にバンドルされている Snow Monkey Forms の初期化関数 も実行されず、フォームが HTML に描画されない
- ブラウザ Console には
pgsql
コピーする編集する
Uncaught ReferenceError: Cannot access ‘d’ before initialization
とだけ表示される。
3.なぜ残っている？
- 古い Snow Monkey Blocks (〜v17.3.1) に含まれていたミニファイ手順のバグ。
- 最近のバージョンでは let → var へ置き換え、または宣言位置を先頭に移動して修正済み。
- キャッシュ系（Autoptimize／LiteSpeed Cache／Cloudflare Rocket-Loader）が古いままの JS を配信しているケースもある。
つまり
- 原因そのもの → プラグイン側のコードミス（変数スコープ・宣言順の誤り）
- 症状が出る条件 → 該当 JS が旧バージョンのまま or キャッシュが古いまま配信されている
- フォームが消える理由 → 同一ファイル内の後続処理が全部スキップされるため
アップデート（またはキャッシュ完全消去）で直ることがほとんどです。それでも残る場合は、子テーマで該当スクリプトを dequeue して差し替える応急処置が必要になります。
Snow Monkey Forms は REST API でフォームの表示をおこないますが、（Snow Monkey Forms に限らず）PHP でエラーが発生すると REST API 通信が失敗するために、そのエラーメッセージが表示されてフォームが表示されません。
サーバーのエラーログを確認していただくと多分その日時に何かエラーメッセージが出力されていると思うので、一度確認してみてください！
【お使いの Snow Monkey のバージョン】 バージョン: 29.1.4
【お使いの Snow Monkey Blocks のバージョン】 バージョン 24.1.1
【お使いの Snow Monkey Editor のバージョン】 バージョン 11.0.2
【お使いの PHP のバージョン】8.2.28
【お使いのブラウザ】Safari、Chrome
【当該サイトのURL】https://tarcoon.me/jp/info/contact/
### 発生している問題
予期しない問題が発生しました。 後でもう一度やり直すか、他の方法で管理者に連絡してください。
(status: SyntaxError: The string did not match the expected pattern.)
と表示が出てフォームが表示されない。
確認できました。ありがとうございます！
div や ul も選べるようにしてくださったのですね
お客さんにも喜んでいただけます！ ご対応ありがとうございました。
ここにお知らせするの忘れてました！
先日 Snow Monkey Blocks v24.1.0 で機能を追加しています。
アップデートして確認してみてください！
↑の修正で、width から max-width に変えたみたいです。
My Snow Monkey 内の CSS で、
.smb-section__contents-wrapper {
max-width: 100%;
}
を追加されていて、それで上書きされてしまっているので、Snow Monkey Blocks の min(100%, var(--smb-section--contents-wrapper-width)) が効かなくなっています。ただ、Snow Monkey Blocks の --smb-section--contents-wrapper-width のデフォルト値が auto で、min(100%, auto) = none になってしまうので、デフォルト値を 100% に変更するアップデートはしようと思います。
ということで、とりえあずは
My Snow Monkey 内の CSS を下記に変更してもらうと良いのかなと思います。
.smb-section {
--smb-section--contents-wrapper-width: 100%;
}
早速のご検討ありがとうございます！
はい、その構造が選べたら嬉しいです。
smb-step__item__title の選択肢は Snow Monkey Blocks の他のブロックのようなイメージでした。
その場合、下記のような HTML 構造になったら良さそうですかね？
ol.smb-step__body
li.smb-step__item
h2.smb-step__item__title // ここは h2〜h6を選べるようにしたい
div.smb-step__item__body
li.smb-step__item
h2.smb-step__item__title // ここは h2〜h6を選べるようにしたい
div.smb-step__item__body
ご回答、ありがとうございます！
仰る通り、難しそうだったので、
①header要素にmix-blend-mode←これは効く
②bodyにrelative、ロゴにfixedをかけてheader要素から外す
これで、見た目ではロゴにはmixblendがかからないようにできました。
ありがとうございます。
北島さま
ありがとうございます！
「Popup Builder」というプラグインをOFFにしたら、デベロッパーツールで見えるエラーが消えました。
iPhoneでスクロールしてエラーすることも無くなったようです。
下記のページのみで、Instagramの投稿をポップアップで開くという表示にしか使用していないのですが、
フッターか何かにスクリプトが書き込まれるようで、全ページに反映されてしまうのですね。。。
他のプラグインを試してみます。
「問題が繰り返し起きました」というのが気になりますね。パソコンのデベロッパーツールで確認すると、JavaScript のエラーが100個以上発生していたので、もしかしたらそれが原因なのかもしれません。
エラーの URL を見ると Instagram？関係に見えるので、Instagram 関係の何かを使われているなら、それを止めるとどうなるか試してみるのが良いのかなと思います。
僕もあんまり理解できていなくて申し訳ないのですが、多分これの関係かなと思います。
ヘッダーをオーバーレイにした段階でスタッキングコンテキストが形成されちゃう気がするので、ロゴだけというのは難しいのかな？という気がしました。
【お使いの Snow Monkey のバージョン】29.1.4
【お使いの Snow Monkey Blocks のバージョン】24.0.4
【お使いの Snow Monkey Editor のバージョン】11.0.2
【お使いのブラウザ】chrome
### 実現したいこと
ヘッダーロゴにmix-blend-modeをかけたい
### 発生している問題
.custom-logoにmix-blend-mode: difference;を指定しましたが、反映しないので実現させる方法をご教示いただきたいです。
カスタマイザーの設定は以下にしております
ヘッダーレイアウト：1行
グローバルナビゲーションの配置：右
グローバルナビゲーションを縦書きにする：なし
モバイル用ヘッダー位置：オーバレイ（上部固定）
PC 用ヘッダー位置：オーバレイ（上部固定）
### 試したこと
l-headerにmix-blend-mode: difference;を指定すると、実現はできましたが、メニューにはボタンも設置する予定で、ボタンにまでmix-blend-mode: difference;がかかってしまいます。
ボタンにはmix-blend-mode: difference;はかけたくないので、ロゴのみにかける方法をご教示いただけますと幸いです。
よろしくお願いいたします。
基本的には、カスタム投稿のアーカイブページも詳細ページもデフォルトではシンプルな表示になります（カスタマイズしやすくするため）。
カテゴリーラベルを表示する等、投稿のアーカイブページと同じ形で表示したい場合は、デザイン > [カスタム投稿タイプ名]アーカイブページ設定 > ビューテンプレート、とすすみ、投稿のビューテンプレートを選択してください。
さらに高度なカスタマイズが必要な場合は、基礎的な情報を下記のページにまとめているので確認してください。
出来ました！ありがとうございました(*´ω｀)
/* aicon */
.fa-trophy,
.fa-star,
.fa-book,
.fa-bullhorn,
.fa-web-awesome,
.fa-user{
font-size: 2.2rem;
color: #d27aa5;
margin-bottom: -100px;
position: relative;
z-index: 2;
}
.fa-trophy{
margin-bottom: -70px;
}
.fa-book{
margin-bottom: -130px;
}
