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

目次

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

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;
}

スマホ表示のCSS

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

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

投稿記事のアイキャッチ画像を標示しない

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


.thumbnail2 img{
display: none;
}



よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次