Jetpackの人気の投稿とページウィジェットの画像を大きく見やすくする

「最近の投稿を画像付きで表示したい!プラグインRecent Posts Widget With Thumbnailsで実現しました。」で最近の投稿を画像付きでウィジェットに表示できるようになりました。ウィジェットにはJetpackで人気の投稿を表示しているのですが、このウィジェットの画像はちょっと小さいので大きく見やすくできるようにしてみました。

Jetpackの人気の投稿とページウィジェットの表示

プラグインJetpackをインストールすると

プラグイン 外観>ウィジェット から人気の投稿とページを追加できるようになります。

先日

このブログではWordPressに付属している「最近の投稿」ウィジェットで最近の投稿を表示してきました。タイトルだけでなく、投稿にある画...

で追加した、最近の投稿

こんな感じに表示されているので同じように画像付きで人気の投稿を表示したいと思って、

このように設定してみました。表示すると、

画像付きで表示されるのですがちょっと画像が小さいのが残念です。この画像を大きくしてみたいと思いました。

子テーマのfunctions.phpとstyle.cssで指定をする

検索するとJetpackのページにそのカスタマイズ方法が書いてありました。

https://developer.jetpack.com/hooks/jetpack_top_posts_widget_image_options/

こちらに方法が書いてあったのですが、そのままだとなぜかうまく動かないところもあったので少し変えてみました。

まず子テーマのfunctions.php

このコードを追加します。

の行で表示する画像のサイズを100pxに指定しています。

次に子テーマのstyle.cssにコードを追加します。
※ 今回はSimplicityの子テーマで行っています。テーマによってはこのCSSを若干変更しないとうまい感じに表示できないことがあるということが後でわかりました。

これでカスタマイズができました。

画像が大きく表示されるかどうか確認する

修正が終わったら表画面で確認してみます。

画像が大きくなりました(^^)/。

おまけ:Saitamaでのstyle.cssの指定方法

こちらのブログでうまくできたので ゆうそうと のページの人気の投稿のウィジェット画像も大きくしてみようと全く同じカスタマイズをしたところ、うまくいきませんでした。

こんな感じに画像とタイトルがくっついて左側がだいぶ空いてしまいます。いろいろ調べてみてSaitamaの子テーマのstyle.cssは

このようにしてみました。

Simplicityのcssと違う箇所は上記のmargin-leftを0pxにするところだけです。

これで、

こんな感じの表示になりました(^^)/。もしかすると他のテーマを使うときもこの辺の修正が若干必要になってくるかもしれません。

木曜日はIT相談の日 でご相談いただいた

right × write

さんにも早速「人気の投稿の画像大きくできますよ~」と適用させていただきました。小さいお子さんを持つお母さんと起業というテーマでいろいろ書いていらっしゃいます!よろしければ是非ブログを読んでみてください!

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る