ワードプレスの記事一覧についている、小さなアイキャッチ画像が枠からはみ出してしまう場合の対処方法をご紹介いたします。
テーマの出力されている元々の画像が切れていないか確かめましょう
テーマで下記のようなコードが使われている場合、画像を出力する段階で正方形に切り抜かれているため、画像が切れてしまっている可能性があります。
get_the_post_thumbnail($post,'thumbnail');
wp_get_attachment_image_src( $id , 'thumbnail' );
‘thumbnail’と書かれている部分がサムネイル画像のサイズ指定となります。この場合画像は150PX×150PXとなり、正方形に切り抜かれてしまいます。
この部分を’medium’もしくは、それでも切り抜かれる場合は、’large’もしくは’full'(画像そのもののサイズ)と指定することで切り抜かれないようにすることができることがあります。(この場合大きな画像が出力されてしまいますのでページが重くなるというデメリットもございます)
cssで画像がサムネイルの表示領域に収まるようにする
ワードプレスの管理画面＞カスタマイザー＞追加ｃｓｓ より下記のスタイルシートのコードを追加します。
.アイキャッチの含まれるDIV要素のクラス img {
height: 100% !important;
width: auto !important;
margin: auto !important;
}
.アイキャッチの含まれるDIV要素のクラス の部分にはテーマでアイキャッチ画像が含まれている(はみ出してしまう)DIVのクラスを指定してください。
参考
ワードプレスの見た目を変えるための基本的なcssスタイルの指定方法
このスタイルのコードを解説いたします。
height: 100% !important; → 画像の高さがぴったりDIV要素の中に収まるようにします
width: auto !important; → 高さは横幅に応じて縦横比が変わらないように自動で表示します
margin: auto !important; → 画像を中央寄せにします
※ !important と書いてある部分はこのスタイルを最優先にせよ という意味となります。
※このスタイル指定はテーマによっては、そのテーマの様々な他のスタイル等が影響して必ずしも効くわけではございませんのでご注意いただけましたら幸いです。
