[ 解決済 ] X-T9 琶句酒造 ナビゲーションメニュー サイトエディター側では縦中央ぞろえ、表示上は縦上ぞろえ

[genepinefield]

■ WordPress のバージョン
WordPress 7.1

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

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

■ テーマの種類
X-T9

■ テーマのバージョン
1.42.3

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

■ プラグインの種類・バージョン
Plugin Name Description
Age Gate
A customisable age gate to block content from younger people
Version: 3.7.2 | Author: Phil Baker
Category Order and Taxonomy Terms Order
ドラッグ & ドロップで並べ替えを可能にする JavaScript の機能を使って、カテゴリーとすべての (階層的) カスタムタクソノミーと子タームを並べ替えます。
Version: 2.0 | Author: Nsp-Code
Simple Page Ordering
ドラッグ & ドロップを使用して、選択したページや階層化された投稿タイプをビルトインページリストで並び替えます。 詳細な手順については、固定ページの画面で「ヘルプ」タブを開いてください。
Version: 2.8.0 | Author: 10up
Snow Monkey Forms
Snow Monkey Forms はブロックエディターのためのメールフォームプラグインです。
Version: 13.0.0 | Author: inc2734
VK All in One Expansion Unit
このプラグインは、Webサイトを強力にするさまざまな機能を備えた統合プラグインです。 多くの機能は個別に停止できます。 Facebookページプラグインやソーシャルブックマーク、OGタグ、Twitterカードタグ、Google Analyticsタグなどの出力や、最新記事投稿ウィジェット、関連する投稿の挿入、各種ブロックなどがあります。
Version: 9.123.1 | Author: Vektor,Inc.
VK Block Patterns
独自のブロックパターンを作成して登録する事ができます。
Version: 1.39.1 | Author: Vektor,Inc.
VK Blocks Pro
ブロックエディタを拡張するプラグインです。
Version: 1.127.0 | Author: Vektor,Inc.
VK Dynamic If Block
VK Dynamic If Block は、現在のページがフロントページまたは単一の投稿であるか、投稿タイプやカスタムフィールドの値などの指定された条件に基づいて、そのインナーブロックを表示します。
Version: 1.6.1 | Author: Vektor,Inc.
VK FullSite Installer
選んだデモサイトデータを数ステップでインポートして再現できるプラグインです。
Version: 0.6.0.0 | Author: Vektor,Inc.
WooCommerce
だれもが自由に商品やサービスを販売するための eコマースツールです。 しかも、自由なデザインで。
Version: 11.1.0 | Author: Automattic
WP Multibyte Patch
WP Multibyte Patch は、本家版、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。 » 詳しい説明を読む
Version: 2.9.3 | Author: Seisuke Kuraishi

■ 期待する動作
ナビゲーションメニュー
サイトエディター側では縦中央ぞろえになっているので縦中央ぞろえ
または
縦上ぞろえのどちらかにしたい。

■ 自分で試した事
該当部分のカスタムCSSが操作できなかったので未実施

■ 症状が発生するブラウザ
Google Chrome 149.0.7827.157

■ 実際の症状
X-T9 琶句酒造 ナビゲーションメニューで、
サイトエディター側では縦中央ぞろえ、実際の表示上は縦上ぞろえになっています。
本来はどちらなのでしょうか。

Attachments:

You must be logged in to view attached files.

---

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

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

[うなこ]

genepinefield 様

お問い合わせいただきありがとうございます。ご報告いただいた事象について確認いたしました。

結論から申し上げますと、フロント側の表示（縦上ぞろえ）が本来意図した挙動です。サイトエディター側で縦中央ぞろえに見えているのは、エディターのプレビュー特有の表示のズレによるもので、実際にサイトを訪問した際の見た目（フロント表示）には影響ございません。

原因は、ナビゲーションの入れ子になっている項目コンテナ（.wp-block-navigation__container）の align-items が、フロント側では flex-start（上ぞろえ）になっている一方、サイトエディターのプレビュー内では初期値の center（中央ぞろえ）のまま適用されてしまっているためでした。ナビゲーション本体（.vkp-is-vertical）に対する上ぞろえの指定だけでは、この一段内側のコンテナまでは効いていない状態でした。

サイトエディター側の見た目もフロントに合わせる場合は、該当ブロックの「カスタムCSS」に1行追加していただくことで解消します。

【1】サイトエディターで「ヘッダー」テンプレートパーツを開く
【2】「ナビゲーション」ブロックを選択
【3】右側の設定パネルの「カスタムCSS」を開く
【4】既存の /* 縦書きナビ 上部揃え */ のコード内、@media (min-width: 992px){ ... } の中に以下を追加

.vkp-is-vertical .wp-block-navigation__container {
  align-items: flex-start;
}

追加後の全体は以下の形になります。(添付画像参照)

/* 縦書きナビ 上部揃え */
@media (min-width: 992px){
  .vkp-is-vertical {
    align-items: flex-start;
  }
  .vkp-is-vertical .wp-block-navigation__container {
    align-items: flex-start;
  }
  .vkp-is-vertical .wp-block-navigation-item__content:not(.wp-block-navigation-submenu-container .wp-block-navigation-item__content){
    writing-mode: vertical-rl;
    padding-top:0 !important;
  }
}

この度はご報告ありがとうございました。
どうぞよろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[genepinefield]

うなこ様
提示いただいた箇所sの修正でサイトエディターと表示側が同じになりました。
カスタムCSS欄の選択箇所が難しかったですが
ありがとうございました。

[Vektor,Inc]

genepinefieldさま

ご連絡ありがとうございます、解決した様で安心いたしました。

> カスタムCSS欄の選択箇所が難しかったですが

確かにそうですね…。
「カスタムブロック設定」からの設定のほうが触りやすいのかもしれません。この辺りは今後の検討材料とさせていただきます。

この度はご報告ありがとうございました。

[投稿者]

投稿