以下の画像のように高さが違い、困っている件。
コードはこちらです。⬇️
<a href="<?php the_permalink(); //記事のリンクを表示 ?>" class="entry-item">
<!-- entry-item-img -->
<div class="entry-item-img">
<?php
if (has_post_thumbnail() ) {
// アイキャッチ画像が設定されてれば大サイズで表示
the_post_thumbnail('large');
} else {
// なければnoimage画像をデフォルトで表示
echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
}
?>
</div><!-- /entry-item-img -->
画像サイズの指定方法が間違っているのでしょうかね？
以下の記事を読み試しました。
Markdown: fox-wp.com/
※記事の以下の内容を読みました。
新たに画像サイズを追加する方法
functions.phpファイルに追加してください。
add_image_size( 'sample-thumb', 300, 9999 );
続いてthe_post_thumbnail()の記述を次のように変更してください。
the_post_thumbnail( 'sample-thumb' );
数字に9999を指定すると、その幅・高さは無制限になります。幅に合わせてアイキャッチ画像のサイズをリサイズしたい場合は、高さを9999にしておきましょう。
わかなくなりました。とりあえず今は練習用として作業しているので進めます。。。
add_image_size( 'sample-thumb', 300, 9999 );
ですと、横300px固定の縦が無制限という状態なので、画像の比率に応じて高さが変わってしまうのではないかと推測されます。
例えば、
add_image_size( 'sample-thumb', 300, 300 );
のように、縦の長さも決めることで画像の大きさを固定できると思います。
または、entry-item-imgクラスに対してCSSであらかじめ高さを決める手法もあると思います。