[ 解決済 ] outerの全幅設定が壊れてしまった
[ 解決済 ] outerの全幅設定が壊れてしまった
- このトピックには25件の返信、4人の参加者があり、最後に
により2年、 5ヶ月前に更新されました。
-
投稿
-
■ 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で背景の青が全幅になっていたのですが…コード状態が把握できないので、該当URLを貼り付けるか、
該当URLのページの内容をコードビューにして表示されるコードをテキストファイルに貼り付けてアップロードいただけると検証しやすいです。取り急ぎ、添付した画像のページはこちらです。
<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>ありがとうございます。
そのまま貼ると自動で変換されるので、お手数ですが一旦テキストファイルに貼り付けて添付いただけると助かります。ありがとうございます。確認・検証の上追って返信させていただきます。
一番外側の
<!-- wp:vk-blocks/outer {"outerWidth":"full","clientId":"efdc21e4-e9bf-497c-90bc-45c960bf73ab"} -->
と
<!-- /wp:vk-blocks/outer -->が含まれていなかったので設定は破損していますが、全幅設定は効くようになりました。
ありがとうございます。
このソースを入れると「このブロックには想定されていないか無効なコンテンツが含まれています」となり強制的に「ブロックのリカバリーを試行」のボタンがでてきます。
編集画面内のプレビューでは前から全幅で表示されているのですが、公開画面では変わらないです。
新規で単純な設定をしてみましたが、同じ表示です。「ブロックのリカバリーを試行」すると、元にもどってしまうんです。
HTMLで編集で一番上に
<!– wp:vk-blocks/outer {“outerWidth”:”full”,”clientId”:”efdc21e4-e9bf-497c-90bc-45c960bf73ab”} –>と
一番下に<!– /wp:vk-blocks/outer –>をいれても、いれた瞬間に「ブロックのリカバリーを試行」が表示されます。
送っていただいたテキストファイルをそのまま入れても、同じでした。ブロックエディタのコードエディタにしてから貼り付けていますか？
（Classic Editor を使ってで貼り付けることは絶対にしないでください。）
VK Blocks Pro のバージョンが本当に 1.2.0 の場合ブラウザキャッシュを削除してみてください。
あと、ExUnit の VK Blocks は無効化されていますか？
- このトピックに返信するにはログインが必要です。
