ブロックを充実させるプラグインSpectraのcarouselで高さが揃わない件
ブロックエディターとの付き合いにもだいぶ慣れてきて、カスタムブロックなら「LazyBlocks」、溺愛のブロックを追加するなら「Spectra」と使い分けしている今日この頃。「Spectra」は無料でも使い勝手はかなり良いのですが。コンテンツcarouselの各スライド背景に背景色を入れると、高さが不揃いになってしまうのが難点。
ということで、この高さをCSSで揃える方法を考えてみました。
carouselは、実際にはSlickslideで作られています。Slickslideの高さ揃え用のCSSを使えば良いと思いましたが、若干タグが複雑なようで、追加のCSSが必要でした。以下で揃いました。
/*Spectraのcarousel高さ不揃い*/
.slick-track {
display: flex!important;
align-items: stretch;
}
.slick-slide {
height: auto !important;
}
.slick-slide > div{
height:100%;
}
.slick-slide > div >article{
background:#FFF;
height:100%;
}
#FFFの箇所は、ご利用の背景色を入れてください。
- 前の記事
連日chatGPTと仲良く、all in one SEOのキーワードを半角スペース区切りでタイトルに反映させる 2023.11.04
- 次の記事
ACFのthe_field()でエラーメッセージ 2024.03.08
コメントを書く