[ 対応中 ] Smaveksiveサンプル工務店のテーマにおいてナビゲーションオーバーレイの設定について

[webfactoryjp]

■ WordPress のバージョン
wordpress7.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
その他

■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
VK FullSite Installer導入直後他プラグインインストールなし

■ 期待する動作
ナビゲーションオーバーレイでの変移先ボタンというかメニューなどの設置

■ 自分で試した事
外観＞エディター＞パターン＞テンプレートパーツ一覧＞ヘッダーメニュー
でナビゲーションブロックにて歯車＞ナビゲーションオーバーレイ作成＞反映

■ 症状が発生するブラウザ
chrome

■ 実際の症状
オーバーレイの背景が透明且つ、背景が全面ではなく途中で切れていて、後ろのコンテンツが見えている

■ その他特記事項
メニューは大事なのでできればXT-9のようにオーバーレイテンプレートを早急に実装希望です
それか、どのように設定すればXT-9のようにオーバーレイメニューにおいて、ロゴや電話番号などのコンテンツをブロックしていけるのか教えてください

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[対馬 俊彦]

オーバーレイメニューとして表示するブロックをグループブロックに入れて、
グループブロックを以下のように設定すれば、期待する状態に近づけることができます。

1. 背景色を設定
2. コンテント幅を使用するインナーブロック 有効
3. 最小の高さ 100vh

添付画像をご参照ください。

Attachments:

You must be logged in to view attached files.

[webfactoryjp]

お世話になっております
ご教授くださいまして誠にありがとうございます
こちらの案内の通りに操作いたしましたところ、問題の部分(背景が透明・背景がしたまで伸びていない)は解決しましたが、実機(iPhone16)で確認したところ、オーバーレーの背景部分を指で上下にスワイプするとオーバーレイの背景がビヨーンと動き、隠れていなければならないコンテンツが見え隠れする状態です。PCブラウザでみるとそうはなりません。スマホの実機で確認してみていただけますでしょうか。当方の固有の問題かわかりません。

[対馬 俊彦]

100vh だとそうなっちゃいますので、100svh にする必要がありますね。

現状、SmaVeksive は最小の高さの単位として 100svh を選べないので、
コードエディターに切り替えて、100vh を 100svh に書き換えてください。

書き換えるところは2箇所あります。（添付画像参照）

Attachments:

You must be logged in to view attached files.

[Y.INABA]

横からすみません。

単位 svh を追加するにはテーマ内 theme.json の編集が必要となります（子テーマご利用の場合は新規作成が必要になります）。
ただ、一度 theme.json を編集したからといっても、新規で使用したのでも無い限り、即座に反映されない可能性がございます。

▼参考（WordPressサポートフォーラム）
https://ja.wordpress.org/support/topic/theme-json%e3%81%ae%e4%b8%80%e9%83%a8%e3%81%8c%e5%8f%8d%e6%98%a0%e3%81%95%e3%82%8c%e3%81%aa%e3%81%84/

念のため、該当箇所を記載します。
"units": ["px", "em", "rem", "vh", "vw", "%", "svh"]
（188行目あたり、末尾に, "svh"を追記します）

theme.json を編集したくない場合、よく分からない場合は、子テーマの functions.php または Code Snipetts 等のプラグイン、もしくは自作プラグイン等で以下のコードを記載してください。

add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) {
    return $theme_json->update_with(
        array(
            'version'  => 3,
            'settings' => array(
                'spacing' => array(
                    'units' => array(
                        'px', 'em', 'rem', 'vh', 'svh', 'vw', '%',
                    ),
                ),
            ),
        )
    );
} );

どうぞよろしくお願いします。

※補足
WordPress6.3 時点ではsvhは公式に使用可能ではなかったのですが、その後追加対応され、少なくとも6.5以降では公式に使用可能になっています。
https://github.com/WordPress/gutenberg/pull/54415

[石川＠Vektor,Inc.]

対応中ですので暫くお待ちください。

[投稿者]

投稿