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 では、ボヤけるとクライアントさんから、画像がボヤけていると教えてもらって、あれ?と気づけました。感謝です。

謝辞

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

講座開催 ご案内
広告

この記事を書いた人

ものくろ(Webコーチ)

株式会社あみだす 代表取締役 / 博士課程中退(農学) / ブロガー / Web&Blogコーチ / 親指シフト orzレイアウト開発者 / 講師 / フリーランス / 旅人 / 民事裁判経験者 / 毎月どこかに出張

ブログは月間65万PVを記録(2016年1月)。 これまでに250回を超えるワークショップ開催・のべ1,200名のブログサポートに携わる。

WordPressが得意 / 好きなもの(無刻印キーボード・十割蕎麦・湯葉)/ あまり好みでないもの(ブロッコリー・値切り)

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

あわせて読みたい

記事のタイトルとURL をコピーする!

広告

新着記事

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

お申し込みはこちらのお問い合わせフォームからお願いします。

お申し込みはこちらのお問い合わせフォームからお願いします。

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告