WordPressテーマSANGOの質問

人気記事のアイキャッチサイズを大きくしたい

アバター
hibiseiten

こちらのヘルプに掲載されているコードを追加して、
人気記事のアイキャッチ(サムネイル)画像を横長表示にしています。

横長のまま、もっと大きく表示することはできますか?
Youtubeのように文字をいれたアイキャッチにしているので、大きくして読み取れるようにしたいです。
横に来るタイトル文字の、範囲が狭くなっても構いません。

sango快適に使わせていただいています。いつもありがとうございます。

SANGO
SANGO 質問ガイドライン
コメントへの回答
サルワカくん
サルワカくん
2020/05/11

お世話になっております。
なるほど、人気記事というのは、サイドバーやフッターウに配置される「人気記事」のウィジェットという認識で合っておりますか?
また、画像を横長にするためにfunctions.phpに貼り付けたコードを教えていただけますか?

アバター
hibiseiten
2020/05/11

ご返信ありがとうございます。

はい、サイドバーやフッターに配置される「人気記事」のウィジェットのことです。
画像を横長にするためにfunctions.phpに貼り付けたコードは下記のとおりです。
—————————————————————
function my_change_thumb_size() {
add_image_size( ‘thumb-160’, 160, 92, true );
}
add_action( ‘after_setup_theme’, ‘my_change_thumb_size’, 11);
—————————————————————
素人考えで、 2行目「160, 92, 」の数字を大きくすればいいのか?と
試しに「170, 102, 」としてみたのですが、エラーになり、
これ以上のことは思いつきませんでした(;^_^A

サルワカくん
サルワカくん
2020/05/11

ありがとうございます。

①まず、サムネイル画像ファイル自体のサイズなのですが、現状の「160 x 92」というサイズだと画質が荒いので、以下のように書き換えて2倍の大きさにすると良いかもしれません。

function my_change_thumb_size() {
add_image_size( 'thumb-160', 320, 184, true );
}
add_action( 'after_setup_theme', 'my_change_thumb_size', 11);

↑「thumb-160」はそのままにして、その次の2つの数字(幅, 高さ)だけを書き換えます。

②そのうえでCSSで人気記事ウィジェットの画像の表示サイズを変えます。

.my-widget li a .my-widget__img {
   width: 180px; /* ここが横幅に */
   height: auto;
}

↑ダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS]もしくは子テーマのstyle.cssなどに貼り付ければOKです。

よろしくお願いします。

アバター
hibiseiten
2020/05/11

なるほど。親切に教えていただき、ありがとうございます。
おかげさまで、大きく出来ました!

んが、画質が荒くなります・・。
教えていただいたコードに対するエラーは出ておらず、
処理は受け付けられていると思うのですが。
また人気記事以外の、通常の記事一覧の画質はきれいです。

①「thumb-160」の次の数字をさらに大きくすればよいのか?
と「480,276,」にしてみましたが、変化なしです。

たびたびで恐縮ですが、ご教授いただけましたら幸いです。

サルワカくん
サルワカくん
2020/05/11

あ、サムネイルサイズを変えたときは再生成が必要です。
Regenerate Thumbnailというプラグインを使ってサムネイルの再生成をお願いします!

アバター
hibiseiten
2020/05/12

再生成したら出来ました!

たいへん助かりました。ありがとうございます(*´▽`*)