Jetpackの人気記事ウィジェットの画像サイズを変更 してボヤけないようするにはフィルターフックでカスタイズする

Jetpackプラグインで使える 人気記事ウィジェット をサイドバーに配置して使ったときに、サムネイル画像が小さく控えめに表示されます。

標準では小さすぎ、、な 40px の四角形です。

これは大きくできるはず、とCSSをガリガリカスタマイズしましたが、出力されている画像データ自体が小さく、ボヤけて表示されます。

うーん、、どうしたらいいのか？と、調べてみたら、フィルターフックが用意されてました。さすが、JetPack。

フィルターフックはこちら。

jetpack_top_posts_widget_image_options

ということで、子テーマの functions.php に以下のコードを追記し、style.css にも追記をしたらバッチリでした。このサンプルでは、90 PX に設定しました。

functions.php

//Jetpack 人気記事のサムネイルサイズ変更
function my_custom_thumb_size( $get_image_options ) {
  $get_image_options['avatar_size'] = 90; // ココが画像サイズ（単位不要）
  return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'my_custom_thumb_size' );

style.css

 img.widgets-list-layout-blavatar {
    height: 90px !important;
    width: 90px !important;
    max-width: 90px !important; /* この数字を画像サイズに */
}

実は、Macで作業を行なっていたら、CSSの修正だけで、なぜかボヤけずにキレイに表示され、気づいていませんでした。Windows では、ボヤけるとクライアントさんから、画像がボヤけていると教えてもらって、あれ？と気づけました。感謝です。

謝辞

参考になった記事はこちら。

✓ あわせて読みたい

Jetpackの人気記事をカスタマイズ。サムネイル画像のサイズやCSSを変更する方法