[ 解決済 ] パターンライブラリの「観光地_着物レンタル（旧JPNSTYLEスキン風）」横幅いっぱにならない件

[TOSHIOSAKUMA]

■ WordPress のバージョン
6.7.1

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

■ テーマの種類
Lightning ( G3 )

■ テーマのバージョン
15.29.3

■ スキンの種類
Origin III

■ 期待する動作
パターンライブラリのプレミアムの「観光地_着物レンタル（旧JPNSTYLEスキン風）」を使っています。その際に、横のレイアウトが全幅に（横幅）来て欲しいが来てくれない。

■ 自分で試した事
設定画面を一通り見てみました。

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

■ 実際の症状
添付写真のように右側に空きスペースができてしまう

■ その他特記事項

以前もこのようなことで思考錯誤し、フォーラムの履歴で検索をかけたのですが、みつけることができませんでした。
お手数をおかけしますが
よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

---

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

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

[対馬 俊彦]

theme.json を有効にすれば解決しそうです。

[TOSHIOSAKUMA]

対馬様

お教えいただき大変ありがとうございます。

行ってみたのですが、やはりまだ、広がってくれないです…。

原因特定が難しいです…

よろしくお願いいたします。m(__)m

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

いま私のサイトで試したところ、正常に表示されました。

他に思いつくことがないです。

WordPress、テーマ、プラグインを最新版にアップデートしてみたらいかがでしょうか。

[石川＠Vektor,Inc.]

VK Block Patterns をインストール・有効化してください。

[TOSHIOSAKUMA]

＠対馬様、＠石川様

ご連絡いただき、ありがとうございます。

VKパターンライブラリは入っております。プラグイン、テーマも最新版です。

またキャッシュをクリアすると一瞬全幅になるのですが、やはり元に戻ってならなくなります…。

よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

該当 URL のサイトで VK Blocks Pro のバージョンが 1.96.2.0 になっているようです。
最新版は 1.104.0.0 です。

[石川＠Vektor,Inc.]

弊社標準以外のよくわからないCSSが出力されているようです。

とりあえず意図しない状態の場合は

* プラグインなどが最新版かどうか？
* プラグインを順次停止して不具合が解消するかどうか？

を確認するようにしてください。

Attachments:

You must be logged in to view attached files.

[TOSHIOSAKUMA]

＠　石川様

ありがとうございます。

午後トライしてみます。

[TOSHIOSAKUMA]

お世話になります。

プラグインを停止してみましたが、添付のようなエラーとなりました。

やはり、改善しないようです。すみません。

このサイトはマルチサイトを使っているのですが、それが原因ということでしょうか？

よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

lightning_site_header_before のような赤い文字が表示されているのはエラーではありません。
カスタマイズの theme.json を有効化する画面で [アクションフックの場所を表示] のチェックをはずせばこの赤い文字は消えます。

プラグインの中にはマルチサイトに対応していないものがあるので、もしかしたらマルチサイトにしていることが原因なのかもしれません。

[石川＠Vektor,Inc.]

> プラグインを停止してみましたが、添付のようなエラーとなりました。

エラーではありません。

外観 > カスタマイズ > Lightning 機能設定 で

「アクションフックの場所を表示」にご自身でチェックを入れたのだと思います。

> このサイトはマルチサイトを使っているのですが、それが原因ということでしょうか？

関係ないと思います。

とりあえずマルチサイトはマルチサイトのプログラムしくみをある程度わかっている人でなければトラブルの原因となって自力解決ができない状態に陥るのでおすすめしていません。

とりあえず先ほど添付した画像にあるように

margin-left : calc(0px * -1);
margin-rignt: calc(0px * -1);

が出力されている事が原因ですが、これを出力しているのは弊社製品ではない（＝ご自身でインストールされたもの）ため、原因は存じかねます。

[TOSHIOSAKUMA]

お世話になります。
すみません

質問をお願いできますでしょうか？

Q1:
margin-left : calc(0px * -1);
margin-rignt: calc(0px * -1);

はソース元を見るとhttps://web-shindanshi.com/wp-content/themes/lightning/_g3/assets/css/style-theme-json.css?ver=15.29.9の中にあるようですが、どこか他のプラグインなどが吐き出していいるということでしょうか…？

Q2:
添付のように、各mediaQueryでのsizeのCHECKを外すと全幅にはなってくれます。
これもhttps://web-shindanshi.com/wp-content/themes/lightning/_g3/assets/css/style-theme-json.css?ver=15.29.9の中にあるようですが…これも他のプラグインなどVKシリーズ以外のものが吐き出しているということででしょうか？

あまり、よくわからない中での質問ですみません。因果関係等がわからないです。

よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

現状の 該当 URL を見たところ、
VK Blocks Pro の カスタム CSS が出力されていなかったり、
読み込まれるべき CSS が読み込まれていなかったりと、
まだいくつかの問題がありますね。

まだ作り始めたばかりのサイトのようなので、原因を探るよりも、
いったんサイトを削除してWordPress をインストールし直した方が
近道のように感じます。

【追記】
サイトを削除する前に、VK パターンライブラリから別の新規固定ページに
貼り付けてみたらうまくいくかもしれません。

Q2: は原因と関係ありませんし、
うまく表示できている私のサイトでも以下のコードが出力されていますので、
Q1: も関係なさそうです。

.wp-container-core-group-is-layout-d22ff40a > .alignfull {
    margin-right: calc(0px * -1);
    margin-left: calc(0px * -1);
}

[Vektor,Inc]

対馬 さま

いろいろ調査ありがとうございます。

TOSHIOSAKUMAさま

こちらで調査しましたところ、過去に似たような事例がありました。
https://github.com/vektor-inc/lightning/issues/1215

もしかすると、グループブロックの中に全幅グループブロックを入れるとどうやらWordPress本体で以下のCSSがついてしまうことがあるようです。

.wp-container-core-group-is-layout-d22ff40a > .alignfull {
    margin-right: calc(0px * -1);
    margin-left: calc(0px * -1);
}

いったんこのパターンをグループが入れ子にならないように調整しますのでしばらくお待ちいただけますと幸いです

[投稿者]

投稿