WordPressテーマUnderstrapの記事一覧のアイキャッチ画像を小さくし、記事個別ページではアイキャッチ画像を非表示にする

記事一覧ページのアイキャッチ画像が大きすぎるUnderStrap

英語圏のテーマに多い気がしますが、さすがにアイキャッチ画像サイズが大きすぎるのでCSSで修正します。

understrap-childはテーマ直下のstyle.cssを読み込まないと言う設定になっているので、style.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タグ』の下にあるアイキャッチ画像を非表示にすると言う指定をします。

海外FXキャッシュバックサイト

海外FX業者はキャッシュバックサイト経由が断然お得

Taritaliは1lotにつき最大9ドル還元

損切りやゼロカットをしても資金が残ります