WordPress

【AFFINGER5】スマホのアイキャッチを“少しだけ”大きくする方法

スマホで見たとき、リスト表示になっている記事一覧のアイキャッチ画像を少し大きくしたいんだけど…

この記事では、スマホ表示でリスト表示になっている記事一覧のアイキャッチ画像を“少しだけ”大きくするカスタマイズを紹介します。

なぜ“少しだけ”なのか

  • デフォルト

  • 今回のカスタマイズ

  • サムネイル画像を大きく

この記事を書いている時点(ver20200511)で、「AFFINGER5」には、すでにアイキャッチ画像を大きくする機能があります。「AFFINGER5 管理」「デザイン」の「スマホでもサムネイル画像を大きくする」にチェックを入れると大きくなります。

が、この方法だと画面の横幅いっぱいに大きくなっちゃうんですよね。リスト表示ではなくなってしまいます。

アイキャッチ画像にインパクトがあるというメリットがありますが、画面に表示される情報量が少ないというデメリットもあります。

この記事で紹介するのは、アイキャッチ画像を“少しだけ”大きくして、記事一覧はリスト表示のまま、という方法です。

アイキャッチ画像を“少しだけ”大きくする方法

CSS

@media print, screen and (max-width: 599px) {

.kanren dt {
width: 160px;
}
.kanren dt img {
width: 160px;
}
.kanren dd {
padding-left: 175px;
}

}

スマホ表示のときだけ、アイキャッチ画像のサイズが横幅160pxになります。

数値は変更しても大丈夫です。最後のpadding-leftには15足した値にしてください。横幅150pxならpadding-leftは165px、横幅120pxなら135pxです。

トップページの記事一覧だけではなく、ブログカードのアイキャッチ画像なども同じサイズになります。

カスタマイズは以上です。

よろしければ、会話アイコンを大きくするカスタマイズの記事もどうぞ。

関連記事
【AFFINGER5】会話ふきだしのアイコンを大きくするカスタマイズ

-WordPress

© 2020 MARKLOG