Elementorのウィジェットの微調節
細かな調節もできるElementor
例えばlist-typeを変えたい
よくあるのが、テキストウィジェットで配置するli要素。デフォルトだと当然こんな感じになります。
- リスト１
- リスト２
- リスト３
<ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul>
テキストウィジェットで配置したら、高度な設定タブへ移動します。
要素を指定する
高度な設定ではセクションのマージンやッパディング、z-indexの設定などができますが、下のほうにカスタムCSS というエリアが用意されています。
初期状態だと内容が閉じた状態になっているので、カスタムCSS と表示されている部分をクリックします。
この部分も完全に翻訳が終わっていませんが、
Use “selector” to target wrapper element. Examples:
selector {color: red;} // For main element
selector .child-element {margin: 10px;} // For child element
.my-class {text-align: center;} // Or use any custom selector
の部分は “selector”を使って内包エレメントを指定することができます。といった意味合いです。
例：
selector {color: red;}
で、メインを指定
selector .child-element {margin: 10px;}
で、子要素を指定
.my-class {text-align: center;}
で、あらゆるカスタムクラスを選択することができます。
liを指定する
つまり、今回のように編集中のリストスタイルを変更したい場合は
selector li {
list-style: none;}と、すれば編集中のウィジェットのli部分をターゲットしていることになります。
さきほどのリスト部分に上記を適用してみると、
- リスト１
- リスト２
- リスト３
デフォルトの中黒が消えました。
-
Elementorのウィジェットの微調節の関連リンク
