スマホ表示で記事一覧のサムネイル画像を変更する方法

今回は、スマホ表示でのサムネイル画像のカスタマイズです。

賢威８から、スマホファーストというだけあって、スマホでの表示が格段によくなった気がしますが、記事一覧のサムネイル画像が、若干大きく感じるのです。
画像の縦横のサイズにもよると思いますが、アイキャッチ画像のサイズによっては、以下のようにスマホ画面の半分近くが画像となってしまいます。

この画像をもう少し小さくならないかと思うのですよね。

そこで、以下のコードを子テーマのbase.cssに追加します。

/*スマホのサムネイルを小さくする*/
@media only screen and (max-width : 736px){
.entry-list .entry_thumb {
  width: 50%;
  margin: auto;
}
}

画像を画面幅の半分（50％）にしてみます。

プレビューで確認してみると・・・

かなりスッキリした感じになります。

「width: 50%」の数値を変更することで画像の大きさが変更されますので、サイトの雰囲気に合わせて調整してみてください。

以上、スマホ表示のサムネイル画像のカスタマイズでした。