Elementorのウィジェットの微調節

ウィジェット単位のスタイルシート!
elementor_カスタムCSS
Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加

Elementorのウィジェットの微調節

細かな調節もできるElementor

 すっかりElementor に頼りっきりのWordPressを使っての最近のWebデザインです。

 ウィジェットで情報を並べていく基本設計はウェブサイト構築において非常にマッチングしている考え方ですが、たまにこの部分だけは違うデザインにしたい!といったようなことがあります。

 そういうところは画像を作って貼ってしまえ!など乱暴な方法もありますが、もっとスマートに処理していきたいものです。

 Elementorウィジェットには個々のウィジェットエリアだけ有効なCSSを入力することができるので、細かな文字処理も行えます!

例えばlist-typeを変えたい

 よくあるのが、テキストウィジェットで配置するli要素。デフォルトだと当然こんな感じになります。

  • リスト1
  • リスト2
  • リスト3
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</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部分をターゲットしていることになります。

 さきほどのリスト部分に上記を適用してみると、

  • リスト1
  • リスト2
  • リスト3

 デフォルトの中黒が消えました。