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

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

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

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

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

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

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

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

今回もやり方や変更に至る経緯を
中心にまとめてみました。(。+・`ω・´)キリッ

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

目次

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

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



1. 経緯:画像ちっさ

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

・Newpost catch
・Jetpack

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

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

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

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

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

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

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

(o;ω;o)ウゥ

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

▲ TOPへ戻る

2. やり方:画像設定

次はやり方です。

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

○編集対象
・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。

▲ TOPへ戻る

3. まとめ:改善された点

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

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

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


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

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

▲ TOPへ戻る