ElementorでCSSを書く前に確認したいこと

Elementorでは、CSSを書かなくても多くのデザインを作れます。ただし、細かい調整をしたいときにCSSが必要になることもあります。問題は、何でもCSSで直そうとすることです。

CSSを書く前に、標準機能で対応できないか、影響範囲はどこかを確認します。

まず標準設定を見る

余白、文字サイズ、色、配置、幅、背景などは、Elementorの標準設定で対応できる場合があります。

標準設定でできることをCSSで上書きすると、後から管理しにくくなります。まずは設定項目を確認します。

CSSを書く場合は、どこに効くのかを絞ります。全体に効くCSSなのか、特定のセクションだけなのか、特定のウィジェットだけなのかを分けます。

影響範囲が広すぎると、別ページで予期しない崩れが起きることがあります。

CSSを書く場所も重要です。テーマの追加CSS、ElementorのカスタムCSS、子テーマなど、管理場所が分散すると後から探しにくくなります。

案件では、どこに何を書いたかをメモしておくと保守しやすくなります。

PCで効いたCSSが、スマホで崩れを起こすことがあります。幅固定、余白固定、position指定などは特に注意します。

CSSを書いたら、PCだけでなくスマホ表示も確認します。

CSSは便利ですが、構造の問題を無理に隠す道具ではありません。Elementorの構成が複雑すぎる場合は、CSSで直す前に作り方を見直します。

CSSの使いどころに迷う場合は、TOFUラボのような制作者向けの場で、標準機能とCSSの切り分けを相談すると判断しやすくなります。