目次
記事一覧ページのアイキャッチ画像が大きすぎるUnderStrap
英語圏のテーマに多い気がしますが、さすがにアイキャッチ画像サイズが大きすぎるのでCSSで修正します。
understrap-childはテーマ直下のstyle.cssを読み込まないと言う設定になっているので、style.cssを読み込ませたい場合は以下の記事を参照してください。
WordPressテーマUnderStrapの寸詰まりなUIを改善するCSS
記事一覧ページのアイキャッチ画像のサイズを修正
body:not(.single) .entry-header ~ img.wp-post-image {
max-width: 200px;
max-height: 150px;
object-fit: cover;
}
記事一覧ページも個別記事ページもHTML構成がほぼ同じですが、bodyタグのclassが異なります。
上記のCSS指定で『クラス名singleを含まないbodyタグ』の下にあるアイキャッチ画像のサイズを指定することが可能になります。
object-fit属性は画像の縦横比をいい感じに調整してくれます。
個別記事ページの先頭に表示されるアイキャッチ画像を非表示にする
body.single .entry-header ~ img.wp-post-image {
display: none !important;
}
個別記事ページでも記事一覧ページと同じようにアイキャッチ画像が先頭に表示されますが、ほとんどの場合アイキャッチ画像は本文に含まれるので少々くどいです。
上記CSSで『クラス名singleを含むbodyタグ』の下にあるアイキャッチ画像を非表示にすると言う指定をします。
