記事一覧ページのサムネイルサイズを変更

記事一覧ページのサムネイル用画像

サムネ用の画像選びは注意が必要

デザインテーマ「JOURNAL.」の記事一覧ページ（トップページもですが）のサムネイルは横長の画像になっています。

このサイズというか形のサムネイルはあまり見なかったので、珍しくていいかなと思ったのですが、サムネイルにする画像を選ぶ際、多少注意が必要です。

画像の中央辺りがサムネになるので、サムネだけみると、「何の画像･･･？」みたいになることがあります。

元々のコード

サムネサイズを指定している元々のコード
.page-archive .entry-thumb {
width: 100%;
height: 150px;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
float: left;
margin: 0 0 1em 0;
}

サムネサイズ変更のコード

上記コード内にある幅や高さなどの数値を変えることにより、サムネサイズを変えることができます。

例えば、正方形で小さいサイズにする場合：

サイズ小さめ＆正方形
/*-----------------------------------
 記事一覧サムネサイズ変更
-----------------------------------*/
.page-archive .entry-thumb {
width: 120px;
height: 120px;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
float: left;
margin: 5px 10px 0px 0px;
}

ピンクマーカー部分が変更した箇所です。
記事一覧ページにはこんな感じで表示されます（↓）

元々のコードだとこんな感じ（↓）
「なに、これ？」といったサムネになります。

120pxだと結構小さめのサムネになります。
あちこち、数値を変えて、自分の気に入ったサイズに変えてみるのもいいかもしれません。

ちなみに、当サイトでも何通りかサイズを変えてみたのですが、現時点ではとりあえず元のままにしてあります。
その代わり、画像を選ぶ際には、画像の中央辺りだけでも何の画像か分かるようなものを選ぶようにしています。