【Manablog Copy】記事の先頭のアイキャッチ画像を小さくする

2022年11月5日

Manablog Copyの投稿記事の先頭のアイキャッチ画像は消してはいけません。

先頭のアイキャッチ画像がないとmanablog らしくないです。

でも、ちょっと大きすぎません？

そんな人にスタマイズの仕方を紹介します。

※ カスタマイズをやめて元に戻しています。

追加CSSにコピペすることでアイキャッチ画像サイズを指定できます。


.thumbnail img{
height: 250px!important;
margin: 0px!important;
padding: 0px 0px 20px 0px;
object-fit:cover!important;
}

※横幅を指定してもOK

上記では全てのアイキャッチ画像が対象になっちゃいます。

下記のように

single.phpのthumbnailをthumbnail2に変更しました。


<!-- サムネイルの表示 -->
<?php if ( has_post_thumbnail() ) { ?>
<figure><div class="thumbnail2">

CSSも上記と同じthumbnail2に変更しています。


.thumbnail2 img{
height: 250px!important;
margin: 0px!important;
padding: 0px 0px 20px 0px;
object-fit:cover!important;
}

スマホ表示は150pxにしています。

250pxを150pxに変更しているだけです。

上記と組み合わせることでスマホ（pc）だけ非表示にできます。


.thumbnail2 img{
display: none;
}