エレメンターの標準のアコーディオンウィジェットで、アイコンの位置が中央配置になっているのが気になったりしたことありませんか？(このトピック自体かなりマニアックかもしれませんが、備忘録として。)
標準の場合
そのままウィジェットを入れると、アイコンが中央揃えになります。背景がある時はそんなに違和感はないのですが、アンダーラインだけの装飾だと、タイトルが複数行になった時に違和感を覚えました。特にスマホ表示の時に気になります。
タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
テストアコーディオンです。
テストアコーディオンです。
テストアコーディオンです。
タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
テストアコーディオンです。
テストアコーディオンです。
テストアコーディオンです。
下記のコードを入れると、アイコンが一列目に並びます
カスタムCSSに下記のコードを入れると、アコーディオンのアイコンが一列目に移動します。もしElementor PROを使用されていない場合は、外観→カスタマイズにCSSを入れてみてください。
.elementor-element summary {
align-items: baseline!important;
}
コードを入れ上揃え(baseline)にした時
タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
テストアコーディオンです。
テストアコーディオンです。
テストアコーディオンです。
タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
テストアコーディオンです。
テストアコーディオンです。
テストアコーディオンです。
実際に今回のコードを使用して構築しているページも掲載しておきます。
https://pocketsfornoto.online/faq/
アイコンによって中央揃え、上揃え(一行目揃え・baseline)どちらの方がバランスが良いか変わってきますので、もし気になったときは試してみてくださいね。