[WordPress]Jetpackの画像サイズを75pxに変更

WordPressトップページの
カスタマイズの番外編です。

番外編のテーマはこちら。

サイドバーの画像サイズを合わせる
Jetpackの画像を75pxに変更

第1弾：
トップページの記事を省略！続きを読むに変更

第2弾：
トップページの記事一覧の画像を綺麗に表示

トップページはイメージ通りの
デザインに変更できたので、
次はサイドバーを改善します。

今回もやり方や変更に至る経緯を
中心にまとめてみました。(｡+･`ω･´)ｷﾘｯ

テーマは「Twenty Seventeen」を
利用しております。

目次

WordPressカスタマイズ
〜サイドバーの画像サイズ合わせ〜

1.　経緯：画像ちっさ
2.　やり方：サイズ設定
3.　まとめ：改善された点

自分はサイドバーに2つの
プラグインを使用しています。

・Newpost catch
・Jetpack

Newpost catchは、
最近の投稿をサムネイルありで
載せてくれる優れものです。

Jetpackは直近のアクセス数が多い
人気の記事をサムネイルありで
載せてくれる超絶優れものです。

ただJetpackのサムネイルが
実はクセモノだったりします。

それは「画像ちっさ」ということ。

おそらく使ったことがある人なら
1度は思ったことがあると思います。

なんとサイドバーに表示される
Jetpackの画像サイズは25pxで
メチャメチャ小さいのです。

しかもNewport catchと違い、
設定で自由に画像サイズを
変更することができません。

(o；ω；o)ウゥ

そこで本ミッションが、
発令されました。

次はやり方です。

テーマの編集が必要ですが、
それほど難しくはありません。

○編集対象
・functions.php
・style.css

<functions.php追加コード>
function my_custom_thumb_size( $get_image_options ) {
	$get_image_options['avatar_size'] = 75;
	return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'my_custom_thumb_size' );

<style.css追加コード>
.widget_top-posts .widgets-list-layout img.widgets-list-layout-blavatar {
    max-width: 75px;
    width: 100%;
}

どちらも最後尾にコードを
追加すればオッケーです。

因みに「Newport catch」は
設定でサイズを指定すればOK。

Jetpackによる人気の記事一覧。
Newpostによる最近の記事一覧。

どちらも75pxの画像になり、
メリハリがついたと思います。

これにてミッションコンプリート。
結構な達成感がありました。

※画像クリックで詳細を確認できます。

やっぱり見た目が綺麗な方が
訪問者様も使いやすいですし、
自分自身も気持ち良いですね。