[ 解決済 ] outerの全幅設定が壊れてしまった

[mamikawata]

■ WordPress のバージョン
5.8.2

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

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

■ テーマの種類
Lightning Pro

■ テーマのバージョン
8.12.9

■ スキンの種類
Pale

■ スキンのバージョン
8.1.7

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

■ プラグインの種類・バージョン
■ 利用テーマとバージョン :　WordPress 5.8.2（Lightning Pro 8.12.9）
■プラグイン：Lightning Skin Pale 8.1.7、VK Blocks Pro 1.20.0

■ 期待する動作
元のように背景が全幅で、中にいれているコンテンツが標準のサイズで見られるようにしたいです。

■ 自分で試した事
全幅を解除し標準にするとコンテンツサイズは戻りました。
そこで、現在はouterレイアウト設定を、全幅のままこちらの設定にしました。
・余白（左右）アウターエリア内に余白を追加する
・余白（上下）標準の余白を使用しない

実際の画面では全幅設定が効いていない状態ですが、コンテンツが小さくなるよりはマシなので、至急直しました。

■ 症状が発生するブラウザ
Chorme、Edge（いずれもWindows）

■ 実際の症状
outerブロックを全幅で背景として使用していました。今朝ページを見たら、背景はそのままで中のコンテンツ（画像やテキストなど）の部分が幅が小さくなっていました。余白の設定はこちらです。
・余白（左右）コンテンツエリアに合わせる
・余白（上下）標準の余白を使用しない

■ その他特記事項
画像は001がコンテンツが小さくなっているところで、002は実際のサイズです。どちらも背景の全幅は効いていません。金曜日までは002で背景の青が全幅になっていたのですが…

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

コード状態が把握できないので、該当URLを貼り付けるか、
該当URLのページの内容をコードビューにして表示されるコードをテキストファイルに貼り付けてアップロードいただけると検証しやすいです。

Attachments:

You must be logged in to view attached files.

[mamikawata]

取り急ぎ、添付した画像のページはこちらです。

<div class=”wp-block-vk-blocks-outer vkb-outer-f31727c5-66bb-4804-919b-4498aab2638f vk_outer vk_outer-width-full vk_outer-paddingLR-none vk_outer-paddingVertical-none vk_outer-bgPosition-normal”><style>.vkb-outer-f31727c5-66bb-4804-919b-4498aab2638f{background: linear-gradient(rgba(50, 82, 134, 1), rgba(50, 82, 134, 1)); }</style><div><div class=”vk_outer_container”><!– wp:vk-blocks/spacer –>
<div class=”wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top”><div class=”vk_block-margin-md”></div></div>
<!– /wp:vk-blocks/spacer –>

<!– wp:image {“align”:”center”,”id”:14548,”sizeSlug”:”full”,”linkDestination”:”none”} –>
<div class=”wp-block-image”><figure class=”aligncenter size-full”></figure></div>
<!– /wp:image –>

<!– wp:vk-blocks/spacer –>
<div class=”wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top”><div class=”vk_block-margin-md”></div></div>
<!– /wp:vk-blocks/spacer –>

<!– wp:columns {“verticalAlignment”:”top”} –>
<div class=”wp-block-columns are-vertically-aligned-top”><!– wp:column {“verticalAlignment”:”top”} –>
<div class=”wp-block-column is-vertically-aligned-top”><!– wp:image {“id”:14326,”sizeSlug”:”large”,”linkDestination”:”none”} –>
<figure class=”wp-block-image size-large”></figure>
<!– /wp:image –></div>
<!– /wp:column –>

<!– wp:column {“verticalAlignment”:”top”} –>
<div class=”wp-block-column is-vertically-aligned-top”><!– wp:vk-blocks/heading {“align”:”left”,”titleStyle”:”plain”,”titleColor”:”#f6cd18″,”titleMarginBottom”:0.2,”subTextFlag”:”on”,”subTextColor”:”#ffffff”,”fontAwesomeIconBefore”:”\u003ci class=\u0022fas fa-check-square\u0022\u003e\u003c/i\u003e”} –>
<div class=”wp-block-vk-blocks-heading”><div class=”vk_heading vk_heading-style-plain”><h2 style=”color:#f6cd18;margin-bottom:0.2rem;text-align:left” class=”vk_heading_title vk_heading_title-style-plain”><i class=”fas fa-check-square”></i><span>防錆性に優れています</span></h2><p style=”color:#ffffff;text-align:left” class=”vk_heading_subtext vk_heading_subtext-style-plain”>一般的な防錆塗料と比較して抜群の防錆力を発揮します。</p></div></div>
<!– /wp:vk-blocks/heading –>

<!– wp:vk-blocks/heading {“align”:”left”,”titleStyle”:”plain”,”titleColor”:”#f6cd18″,”titleMarginBottom”:0.2,”subTextFlag”:”on”,”subTextColor”:”#ffffff”,”fontAwesomeIconBefore”:”\u003ci class=\u0022fas fa-check-square\u0022\u003e\u003c/i\u003e”} –>
<div class=”wp-block-vk-blocks-heading”><div class=”vk_heading vk_heading-style-plain”><h2 style=”color:#f6cd18;margin-bottom:0.2rem;text-align:left” class=”vk_heading_title vk_heading_title-style-plain”><i class=”fas fa-check-square”></i><span>サビの上からでも施工可能</span></h2><p style=”color:#ffffff;text-align:left” class=”vk_heading_subtext vk_heading_subtext-style-plain”>多少のサビであれば、そのまま施工でき、サビの進行を抑制することができます。</p></div></div>
<!– /wp:vk-blocks/heading –>

<!– wp:vk-blocks/heading {“align”:”left”,”titleStyle”:”plain”,”titleColor”:”#f6cd18″,”titleMarginBottom”:0.2,”subTextFlag”:”on”,”subTextColor”:”#ffffff”,”fontAwesomeIconBefore”:”\u003ci class=\u0022fas fa-check-square\u0022\u003e\u003c/i\u003e”} –>
<div class=”wp-block-vk-blocks-heading”><div class=”vk_heading vk_heading-style-plain”><h2 style=”color:#f6cd18;margin-bottom:0.2rem;text-align:left” class=”vk_heading_title vk_heading_title-style-plain”><i class=”fas fa-check-square”></i><span>自己修復性があります</span></h2><p style=”color:#ffffff;text-align:left” class=”vk_heading_subtext vk_heading_subtext-style-plain”>乾燥後、軟質塗膜を形成するため、飛び石などによるワレがおきません。また、小さなキズであれば自己修復性があり、サビの進行を抑制します。</p></div></div>
<!– /wp:vk-blocks/heading –>

<!– wp:vk-blocks/heading {“align”:”left”,”titleStyle”:”plain”,”titleColor”:”#f6cd18″,”titleMarginBottom”:0.2,”subTextFlag”:”on”,”subTextColor”:”#ffffff”,”fontAwesomeIconBefore”:”\u003ci class=\u0022fas fa-check-square\u0022\u003e\u003c/i\u003e”} –>
<div class=”wp-block-vk-blocks-heading”><div class=”vk_heading vk_heading-style-plain”><h2 style=”color:#f6cd18;margin-bottom:0.2rem;text-align:left” class=”vk_heading_title vk_heading_title-style-plain”><i class=”fas fa-check-square”></i><span>防振・防音効果があります</span></h2><p style=”color:#ffffff;text-align:left” class=”vk_heading_subtext vk_heading_subtext-style-plain”>音の吸収がよく、石跳ねなどの打撃音を和らげます。</p></div></div>
<!– /wp:vk-blocks/heading –></div>
<!– /wp:column –></div>
<!– /wp:columns –>

<!– wp:vk-blocks/spacer –>
<div class=”wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top”><div class=”vk_block-margin-md”></div></div>
<!– /wp:vk-blocks/spacer –></div></div></div><style type=”text/css”>
.vkb-outer-f31727c5-66bb-4804-919b-4498aab2638f .vk_outer_container{
padding-left:0px;
padding-right:0px;
}
@media (min-width: 577px) {
.vkb-outer-f31727c5-66bb-4804-919b-4498aab2638f .vk_outer_container{
padding-left:0px;
padding-right:0px;
}
}
@media (min-width: 769px) {
.vkb-outer-f31727c5-66bb-4804-919b-4498aab2638f .vk_outer_container{
padding-left:0px;
padding-right:0px;
}
}
</style>

[石川＠Vektor,Inc.]

ありがとうございます。
そのまま貼ると自動で変換されるので、お手数ですが一旦テキストファイルに貼り付けて添付いただけると助かります。

[mamikawata]

何度もすみません。こちらでどうでしょうか。

[mamikawata]

エラーになってしまいましたので再アップします。

[石川＠Vektor,Inc.]

zip に圧縮するとアップできますか？

• この返信は3年前に石川＠Vektor,Inc.が編集しました。

[mamikawata]

圧縮してみました。だめならもう一度方法を考えます。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

ありがとうございます。確認・検証の上追って返信させていただきます。

[DRILL LANCER]

一番外側の
<!-- wp:vk-blocks/outer {"outerWidth":"full","clientId":"efdc21e4-e9bf-497c-90bc-45c960bf73ab"} -->
と
<!-- /wp:vk-blocks/outer -->

が含まれていなかったので設定は破損していますが、全幅設定は効くようになりました。

Attachments:

You must be logged in to view attached files.

[mamikawata]

ありがとうございます。
このソースを入れると「このブロックには想定されていないか無効なコンテンツが含まれています」となり強制的に「ブロックのリカバリーを試行」のボタンがでてきます。
編集画面内のプレビューでは前から全幅で表示されているのですが、公開画面では変わらないです。
新規で単純な設定をしてみましたが、同じ表示です。

[DRILL LANCER]

おそらく情報が合致していない部分があるので「ブロックのリカバリーを試行」を実行してください。

[mamikawata]

「ブロックのリカバリーを試行」すると、元にもどってしまうんです。
HTMLで編集で一番上に
<!– wp:vk-blocks/outer {“outerWidth”:”full”,”clientId”:”efdc21e4-e9bf-497c-90bc-45c960bf73ab”} –>と
一番下に<!– /wp:vk-blocks/outer –>をいれても、いれた瞬間に「ブロックのリカバリーを試行」が表示されます。
送っていただいたテキストファイルをそのまま入れても、同じでした。

[DRILL LANCER]

ブロックエディタのコードエディタにしてから貼り付けていますか？
（Classic Editor を使ってで貼り付けることは絶対にしないでください。）
VK Blocks Pro のバージョンが本当に 1.2.0 の場合ブラウザキャッシュを削除してみてください。
あと、ExUnit の VK Blocks は無効化されていますか？

[mamikawata]

ありがとうございます。
ブロックエディタのコードエディタにしてから貼り付けたところ、コードの読み込みはできました。
そもそも、001.txが私のミスで一部分だけのコードを送っていたようで、もともと<!– wp:vk-blocks/outer {“outerWidth”:”full”ではじまる部分は含まれていたようです。すみませんでした。
VK Blocks Pro のバージョンは 1.2.0 でしたので、ブラウザキャッシュを削除しましたが、変わらずです。
あと、ExUnit の VK Blocks は無効化されています。

[投稿者]

投稿