【CSS備忘録】WordPressのLightningで記事一覧のサムネイル画像の縦横比を修正
Lightningのテンプレートだと、サムネが見切れていたので修正した。
サムネのサイズだけを直すと、「vk_post_imgOuter.media-img」で背景画像が指定されているところがダブって見えるのでその部分の背景画像を非表示にして対応。
結局Lightningのバージョンが変わったらクラス名が変わりそうだけど、サムネサイズ変更と背景画像を消すといういう考え方をメモ。
.vk_post_imgOuter_img.wp-post-image {
width: 100% !important; /* 画像の幅を親要素に合わせる */
height: auto !important; /* 高さを自動調整 */
max-width: 316px !important; /* 最大幅を指定 */
background-color: black !important; /* 背景色を黒に設定 */
}
.vk_post_imgOuter.media-img {
background-image: none !important;/* 背景画像を消す */
height: 100% !important;
max-height: 166px !important; /* サムネの縦サイズに合わせる */
background-color: black !important;
}