Y.INABA
フォーラムへの返信
-
投稿
-
satoruh 様
確認させていただいたところ、VK Blocks Proの以下仕様変更の影響によるものと思われます。
（HTMLを確認する限り、「アウターエリア内に余白を追加する」が有効になっているようです）今現在、パターンライブラリにて用意されているコードを改めて貼り直したら、崩れることなく正常に表示されております。
恐れ入りますが改めてご確認のほどよろしくお願いいたします。
VK Blocks Pro 1.119.2 において、ブロックエディター使用中に「パンくずリスト」ブロック内でリンクが無効化されていることを確認いたしました。
早急にご対応いただきありがとうございました。検証中に追記があったようなので。
ちなみに現状 エディタでは編集エリアの 80% をコンテンツエリアとして上書きしているのは、
そうしないと幅が狭い時に要素が左右ベタ付けになったり、それを防止するために余白を設けるとそれによってマイナスオフセット処理している幅広や全幅のレイアウトがくずれる弊害が発生するためです。上記承知しました。
ただ、視認性が良くないのは確かなので、自己責任でCSSで解消することにします。本件解決としてクローズとさせてください。
石川 様
改めて確認ですが、問題視されているのは、
エディタの幅が広いとコンテンツ幅（デフォルトでは1100px）を越えて広がる
という事でしょうか？
おっしゃるとおりです。
インストール時点でこれなので、CSSやSCSSの記述の方法に問題があると思われます。なお、他テンプレートでも検証してみましたが、「観光ブログ」では記事タイトルのみがずれており（1枚目）、「プレーン」（2枚目）や「採用サイト ものづくり系」（3枚目）では「ビジネス（無料版）」と同様の事象となっておりました。
テンプレートの記述の方法によって違いがで出るものなのでしょうか。—-
なお、試しにTwenty Twenty-Fiveに切り替えてみましたが、同様の現象は発生せず、Twenty Twenty-Fiveのデフォルト幅645pxがブロックエディターにもきちんと適用されます（4枚目）。
私としてはTwenty Twenty-Fiveと同様のスタイルになることが理想です。
よろしくお願いいたします。
取り急ぎ、以下CSSをfunctions.php経由で編集画面に読み込ませることによって解決しました（幅の値は一例です）。
/* 通常のブロック（コンテンツ幅：900pxに強制固定） */ .wp-site-blocks .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)), .editor-styles-wrapper .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; } /* 「幅広」に設定したブロック（ワイド幅：1200pxに強制固定） */ .wp-site-blocks .is-layout-constrained > .alignwide, .editor-styles-wrapper .is-layout-constrained > .alignwide { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; } /* 公開画面と編集画面のタイトルブロック */ .wp-block-post-title, .editor-styles-wrapper .wp-block-post-title, /* 古いエディタ環境や特殊な入力欄用のフォールバック */ .editor-post-title__input, .wp-block-post-title .editor-post-title__input { max-width: 900px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }ただし、このような解決方法は初級者にはなかなかたどり着けないと思いますし、根本的な解決とはほど遠いので、できれば根本から解決されることを望みます。
石川 様
ご確認ありがとうございます。
コンテンツ幅よりも広い “全体の80%” が上書きするという症状の事でしょうか？
確認したところ、ブロックエディター内で読み込まれるCSS内で該当箇所が見当たらなかったのですが、theme.jsonの方で設定されている以下記述のことでしょうか？
"layout": { "contentSize": "1100px", "wideSize": "calc( var(--wp--style--global--content-size) + ( 100vw - var(--wp--style--global--content-size) ) / 2 )" },"custom": { "width": { "wrapper": "100dvw", "content": "min( var(--wp--style--global--content-size), 90vw )", "wide": "min( var(--wp--style--global--wide-size), 95vw )", "sidebar": "220px" },だとすれば、編集画面用CSSで上書きするなどの設定が必要と思います。
—-
「全体の80%が上書きする」という症状は意図的ということでしょうか。
それならば、以前の画面の方が見やすかったユーザー（私含めて）にとってはなおのこと問題だと思っています。もちろん、エディター＞設定などで上書きし、改善できるようにしてしまえば話は早いのですが……。
（ちなみに、添付箇所がデフォルト時空欄になっておりましたが、値を埋めて設定反映しても改善はされません）ご担当者 様
ご確認ありがとうございます。
1点確認ですが、画面は最大化していますか？
添付のとおり、画面幅が広いと正常にコンテンツ幅が反映されず、意図通りの表示（1.37.2以前の縮まったコンテンツ幅：1,100px程度）となりません。当方、FullSite Installerからテンプレートをインストールした状態でこのような状態になっており、それ以外には何もしていません。
改めてご確認いただけますと幸いです。WEB００１ 様
X-T9でもアップデート対応され、1.38.0にて事象が解消されました。
お手すきの際に上記追加CSSを消していただき、ご確認のほどよろしくお願いいたします。石川 様
ご多忙の中、アップデートご対応ありがとうございました。
WEB001 様
本件、以下の不具合解消により「発生」した事象になります。
v15.35.1 / 2026.5.5
[ G3 ][ 不具合修正 ] appearance: none で消えた select の矢印アイコンを SVG で復元 by @kurudrive in #1323—–
▼【対応中】になっておりますが、お急ぎでしたら以下のCSSを追加CSS欄に記載お願いいたします。
（Lightning側の矢印を消す処置になります。X-T9でも問題ないと思います）select.smf-select-control__control { background-image: none !important; appearance: none !important; -webkit-appearance: none !important; }橋本滋 様
回答ありがとうございます。
ご共有いただいているURLをもとに、こちらで正常だった頃のアーカイブを確認し、ソースの比較をさせていただきました。結論、「グローバルナビスクロール時のレイアウト」に何らかの値がセットされてしまっているので、「固定しない」に設定変更のほどお願いいたします。
これで解決するはずです。https://lightning.vektor-inc.co.jp/lightning-g3-pro-unit/header-setting/
◆補足
本件とは直接関係ありませんが、追記いただいているCSSに一部脱字や混入等の構文エラーがありましたので、修正しています。
こちらも念のためご確認ください（txtファイルになります）。SUGI 様
スクリーンショットも含めてありがとうございます。
何が問題になっている（と感じていらっしゃるか）がようやく分かりました。
私は引きつけるのを下方向にばかり考えていたのですが、上方向に引きつけることができるのを問題とされていたのですね。
（通常、上の方向に引きつけて更新できる機能は当たり前のように使っており、SUGI様のような考え方には至りませんでしたので……）結論、想定通りの動作で何ら問題ありません。iOSの仕様です。
というか、ほとんどのページで、ご共有いただいているスクリーンショットのような動作をすると思います。
試しにYahoo!やGoogle、もしくは当フォーラムで確かめてみてください。同じような画面になりませんか？むしろ、海上保安庁様のサイトでは、ページを上に動かして更新できないよう、意図的にJavaScriptか何かで制御しているのだと思います。
つまり、厳密には当フォーラムでは該当トピックが存在しない内容になります。これを実現しようと思うと、JavaScriptやCSSで追加コードを書く必要があり、検証も丁寧に行う必要があるため、当フォーラムでサポートできる範疇を明らかに超えると思います。
他の有志が書いてくださるという方はいらっしゃるかもしれませんが、万全を期していただくには、やはり有償でご依頼いただくのが無難かな、と思います。SUGI 様
ご確認ありがとうございます。
念のため私の手元のAndroidでもアクセスしてみましたが、ブレも含めて該当の事象の確認をすることはできませんでした。ご共有いただいている状況からしても、もはやWordPressやプラグイン、テーマ側の問題とは考えにくく、通信環境か閲覧環境のどこかに問題があってトラブルが生じているものと考えられますが………。
①回線や環境を変更することがもし可能であれば、全く別の回線や端末からアクセスいただくことは可能でしょうか？
回線内でフィルター等がかかったり低速だったりでデザインが崩れるということは割とよくある話ではあります。②念のため確認ですが、iPhone・iOSのバージョンは最新版をご利用でしょうか？
iOSのバージョンが古いと、Chrome等も含め最新版が使えないため、正常に表示されない等のことは十分あり得る話だと思います。
（なお、私のiPhoneは最新版iOS 26.4.2にて確認しています）③こちらも念のための確認になりますが、ログアウト時、かつPCでウインドウの幅を狭めた状態で、正常に動作するかご確認いただくことは可能でしょうか？
（余談ですが、海上保安庁様のサイトでブレやデザイン崩れ等が起こっていないのは、どんなに制限のある環境であっても目立った崩れが起きないように対策されているためであり、私のような一般ユーザー・小規模企業等が利用するのとは比べものにならないほどの工数がかかっているものと思います。もちろん有償案件になります）
SUGI 様
お忙しい中ご提示いただきありがとうございます。
変更いただいているのはトップページのみでよろしいでしょうか？私のiPhone実機で確認しましたが、特に問題は無いように思います。
ご参考までに、ページ途中で止めた状態のスクリーンショットも添付させていただきます。iPhone Safari以外、たとえばChrome等で問題なく動作するかご確認いただけますでしょうか？
また、もし広告ブロッカー等の拡張機能を入れておりましたら、いったん全てOFFにしてみてはいかがでしょうか？パターンライブラリから「ヘッダー_お問い合わせ_スクロール時に追従」については、WordPressをアンインストール後、X-T9テーマをインストールしてから上記パターンを貼り付けたのですが、こちらも思っていたとおりの結果はでませんでした。
こちら私の方でも動作確認しましたが、添付のとおりの配置にしたところ（スライダーを消してメニューの内容を入れ替えただけですが）、おそらくSUGI様の意図通りになりそうな挙動の確認できました。
（ログイン時だとヘッダーが下にずれているように見えますが、ログアウト時は正常に動作します）※必要に応じて、レスポンシブスペーサーを挿入いただいて調整いただけますと幸いです（スクリーンショット2枚目）。
こちらでうまく動かないようだと、いよいよ実際に動作しないページを直に確認するしかないと思います。
◆補足
実際の海上保安庁様のサイトでは、PCからだとヘッダーが固定されませんので、そちらもご希望であればPC用ヘッダーのみ「固定表示」ブロックの外に出していただいた上で、「固定表示」ブロックの非表示設定も調整いただければ問題ありません。SUGI 様
確認事項の [解決済] ヘッダーとグローバルメニューの固定については、CSSを追加することは試してみましたが、変化はありませんでした。
CSSの追加だけでなく、以下もお試しいただいていますか？
2. 外観 > エディタ > パターンの下の方のテンプレートパーツ > ヘッダー で ヘッダーの編集画面に移動し、２段になっているヘッダーの下の段（スクロールしたら落ちてくる部分）を削除
3. 外観 > エディタ > テンプレート からヘッダーのある全てのテンプレートで、ヘッダーテンプレートパーツをグループブロックでラップする > ラップしたグループブロックに貼り付け指定
3番までやらないと、この手法は意味がありません。
添付スクショもご確認いただけますと幸いです（日本語だと「位置」＞「張り付き」の箇所になります）。
