elementor atomicエディターのカスタムCSS
elementorのウィジェットに適用できるカスタムCSS
elementorのウィジェットには高度な設定というタブがあって、そのウィジェットに対して個別のCSSを記述することが可能です。
例えば、テキストウィジェットでハイパーリンク部分の文字の色を変えたい場合は
selector a {color:#xxx;}
のようにselectorというステートメントでそのウィジェットを宣言する方法がとられています。
elementor ver4.xで新たに採用されたatomicエディター対応のウィジェットではこの作法に変化がありました。
elementor v4.xでのカスタムCSS
elementor v4.xではすべてのウィジェットのスタイル設定が完全に統一され、これらの新しいウィジェットはatomicエレメントと呼ばれるようになりました。
これらatomicエレメントのスタイル項目にはver3.xと同様にCustom CSSというセクションがあります。
ところがここにはあらかじめ入力された
element.style{
}
という記述があり、削除もできないし、上記記述の括弧内にしか入力することができません。
これはelement.styleを宣言することで、そもそもこのウィジェット領域が選択されているという意味になり、新たにカスタムCSSをこの中で宣言するには少し記述の方法が変化します。
element.style{& a { color: #ff0000;}}
以上のように要素の前に”&”を追加することで、ネスト化されたCSSの子要素であるということを宣言する必要があります。
-
elementor atomicエディターのカスタムCSSの関連リンク
