SWELLフルワイドブロックで背景画像や境界線の形状が反映されない

記事作成をしている固定・投稿ページの画面では表示できているのに公開したら反映されていなかたり、表示するたびに反映されたりできなかったりの繰り返しになって悩んでいませんか?

SWELLフルワイドブロックで背景画像や境界線の形状が反映されないのは、あのプラグインが原因なのです!

目次

EWWW Image Optimizerプラグインが原因

PageSpeed Insightsでいつも「次世代フォーマットでの画像の配信」が改善項目に指摘されるので、EWWW Image Optimizerプラグインで「WebP変換」すれば解決します。

特にワードプレス上で画像がたくさん使用されていればかなり効果があるのですが、SWELL公式サイトでは推奨していませんが、使用してもトラブルは無いのですがフルワイドブロックとは相性が悪いようです。

以下のような症状が見られた場合は、EWWW Image Optimizerプラグインを無効化だけすれば解決します。

境界線の形状がサイト上での表示が不安定

フルワイドブロック境界線波
境界線を波線

普通は各ブロックごとの上下の境界は直線が当たり前ですが、SWELLテーマならば簡単に曲線にできるのですが画像のように固定・投稿ページを書いている画面上は綺麗に設定どおりに波線になるのに、記事公開したページ上では反映されない。

または、ページ更新するたびに反映されたりされなかったり・・・

フルワイドブロック背景画像のサイト上での表示が不安定

フルワイドブロックで背景画像を設定してダッシュボード上では設定どおりに表示されているのに、記事公開したら背景画像が反映されてなくて真っ白。

または、ページ更新するたびに背景画像が表示されたり消えたり・・・

これらの症状はすぐ解決!

EWWW Image Optimizerプラグインを無効化だけすれば解決します

PageSpeed Insightsで「次世代フォーマットでの画像の配信」が改善項目に指摘された時だけ、有効化して「WebP変換」したら無効化する使い方がベスト!

焦らなくてもOK

フルワイドブロックの中にフルワイドブロックを配置

フルワイドブロックの中にフルワイドブロック
フルワイドブロックの中にフルワイドブロック

このように分かりやすく色を付ければ気づくのですが、背景色を指定する前に見出しなど書いて進んでしまうとダブっていることに気づかないこともあります。

SWELLフルワイドブロックがダブっている場合は、境界線の形状の反映や背景画像は表示できませんのでフルワイドブロックを削除してやり直しましょう。

これでフルワイドブロックを使用した時に、境界線の形状や背景画像の繁栄が不安定な時の解決ができました。

よかったらシェアしてね!
目次
閉じる