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

Simplicityサムネイルサイズ変更アイキャッチ

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

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

この「人気記事ウィジェット」、「表示タイプ」項目でサムネイルの表示方法をカスタマイズできます。デザインは三通り。

Simplicityサムネイル設定_表示タイプ

一番上の「デフォルト」を選ぶと、オーソドックスな正方形。サムネイルサイズは75×75。

Simplicityサムネイル設定_デフォルトPC

「大きなサムネイル」を選ぶと、このようなカード型デザインに。

Simplicityサムネイル設定_大きめPC

「タイトルを重ねた大きなサムネイル」にすると、カード型サムネイルの上に記事タイトルのキャプションが乗ります。

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

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

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

Simplicityサムネイル設定_大きめ

次に、以下コードを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に切り替えています。

パソコン表示

Simplicityサムネイル設定_PC8565

モバイル表示

Simplicityサムネイル設定_モバイル10080

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

ADVERTISEMENT