絞れば、出てくる、アイディア。

Elementorで壊れた表示を直す方法

Elementorで壊れた表示を直す方法

ワードプレスのページビルダープラグイン「Elementor」を使っていると、稀に表示が壊れたり、崩れたりしてしまうことがあります。
weblemonも、もちろんElementorを使って制作していますが、実際にフッターのメニュー部分の表示が壊れてしまうという事がありました。

今回の記事では、Elementorで表示が壊れたり、正しく表示されない場合の対処法を紹介します!

1. Elementorの表示が壊れる原因

①キャッシュの問題

②プラグインの競合

③テーマの互換性の問題

Elementorの表示が壊れる原因は、上記の3つに起因するものが多くなっています。

①のキャッシュの問題は、ブラウザに残るキャッシュ(アクセスしたウェブページのデータを一時的に保存しておく仕組み)に起因するものです。
更新した最新のデータがキャッシュにより反映されずに、正しい表示がなされなかったり、表示崩れが起きてしまうことがあります。

また、②のプラグインの競合では、JavaScriptやCSSを多用するプラグインは、Elementorの機能と干渉することがあります。
Elementor自体がページビルダープラグインのため、同じようなページビルダー系のプラグインとは相性が悪く、表示崩れが起きる可能性があります。

③のテーマ互換性の問題も考えられます。
Elementorはコンテナを使って自由自在に画像やテキストなどの要素を組み立てる事ができるため、既にページレイアウトやスタイルが定まっているテーマには適さない場合があります。

フッター部分が、本来は左の画像の赤枠の中のようにメニューが横並びで表示されるはずですが、なぜかハンバーガーメニューのようなものが表示されてしまっています。(右の画像)

↑weblemonで表示が壊れた一例です。

フッター部分が、本来は右の画像の赤枠の中のようにメニューが横並びで表示されるはずですが、なぜかハンバーガーメニューのようなものが表示されてしまっています。(左の画像)

普通にハンバーガーメニューが表示されるだけであればまだ良いのですが、サイズもかなり大きく表示が壊れてしまっていました。

ほんの一例ですが、このようにWEBサイトの一部の要素が極端に大きくなってしまったり、フォントが崩れたりしている場合は、キャッシュプラグインテーマのどれかに問題がある場合が多いです。

2. 壊れた表示を直す方法

壊れたり崩れたりしたままではサイトの見た目が悪くなるだけでなく、SEOにも影響します。
もし壊れた表示を発見したら、出来るだけ早く直す事が大切です。

◇キャッシュの問題の場合

表示が壊れている場合にまず疑いたいのが、キャッシュによる問題です。
ElementorにはキャッシュをクリアしてCSSなどサイトの見た目に関わる部分のデータを再生成できる機能があり、これを行うことで表示が直る場合があります。

↑ワードプレスのメニューからElementorツールをクリックします。

「一般」タブの一番上にある「Regenerate CSS & Data」がElementorのキャッシュクリアをする事ができるという意味です。
横の「Regenerate Files & Data」をクリックして、再度表示が壊れていた箇所を確認します。

◇プラグインの競合の問題の場合

キャッシュをクリアしても表示が直らない場合は、プラグインの競合が原因である可能性もあります。

もしElementorと同じようなページビルダー系のプラグインを有効化している場合は、一度プラグインを無効化して確認してみます。

もし無効化したことによって表示が改善されたら、プラグインの競合による表示崩れという事になります。

◇テーマの互換性の問題の場合

テーマがElementorと相性が悪い場合も、表示崩れや思ったような表示にならない場合があります。

Elementorはコンテナやセクションといったものを用いて画像やテキストをなどの要素を組み合わせていくテーマビルダープラグインのため、あらかじめレイアウトやスタイルが決まっているテーマとは合わない場合があります。
(CocoonやSWELL、AffingerなどのテーマはElementorなどのページビルダー系プラグインを使用しなくても整ったレイアウトでサイトが作れます)

そのため、Elementorを使って自由にレイアウトやスタイルを決めてWEBサイトを制作したい場合は、Hello ElementorAstraといったElementorと相性の良いテーマを使用する事をおすすめします。

表示崩れが発生している場合は、使用しているテーマも確認してみましょう。

↓Elementorの公式テーマ「Hello Elementor」についてはこちら↓

まとめ😺

今回の記事では、Elementorで表示崩れや表示が壊れてしまったときの原因と対処法をご紹介しました。

Elementorのキャッシュをクリアする事によって解決する場合が多いのではないかと思いますが、プラグインやテーマによっても思うような表示にならないときがあります。

表示崩れや表示が壊れてしまったときは、ぜひ今回の記事を参考にしてみてください。