Simplicity人気記事ウィジェットのサムネイルを長方形にする

先日、当ブログのサイドバーに設置している人気記事ウィジェットのサムネイルサイズを変更しました。使用しているテンプレートは、WordPressのSimplicity。サイドバーの一番上に設置している人気記事も、WordPress Popular Postsプラグインを利用したSimplicityの「人気記事ウィジェット」を使用し表示させています。

サムネイルを正方形から長方形に変更

当ブログは当初、「デフォルト」設定しにし、サムネイルを正方形（75×75）にしていました。しかし、インデックスページの記事サムネイルと同サイズにしたほうが見栄えがいいかと思い、先日、正方形から長方形に変更。やり方は以下。

まず、「人気記事プラグイン」のサムネイル設定を「大きなサムネイル」に変更。「デフォルト」のままCSSで画像サイズをいじると、解像度の問題で画像がぼやけてしまうからです。

次に、以下コードをCSSに追加。「人気記事プラグイン」のサムネイルを左寄せにし、記事タイトルを回り込ませてリストデザインにします。昨年のWordPress Popular postsアップデートでクラス名が一部変更されたため、「.widget_popular_ranking li」にoverflowを設定しておかないと、記事がきれいに並びません。

.widget_popular_ranking li {
overflow:auto;
display:block;
}
.wpp-thumbnail {
width:85px;
height:65px;
margin: 0 15px 0 0;
float: left;
}

このCSSを追加すると、サイドバーの「人気記事プラグイン」のサムネイルが長方形になります。サムネイルに使用される記事アイキャッチの画像比率をそのまま維持したいときは、「height:100%」に変更すればOK。

当ブログは、パソコン表示のときサムネイルサイズ85×65、モバイル表示のとき100×80に切り替えています。

パソコン表示

モバイル表示

CSS

.widget_popular_ranking li {
    overflow: auto;
    display: block;
}
.wpp-thumbnail {
    width: 85px;
    height: 65px;
    margin: 0 15px 0 0;
    float: left;
}
@media screen and (max-width:768px){
.wpp-thumbnail {
width:100px; 
height:80px;
}}

人気記事ウィジェットのサムネイル設定

サムネイルを正方形から長方形に変更