Astra 投稿アイキャッチの縮小表示

Astraでは、投稿アイキャッチ画像の表示比率を1：1などに設定できますが、小さく表示するために画像サイズを「サムネイル」などに変更すると、表示がぼやけることがあります。

そのため、画像サイズは「大」のままにして、CSSで表示幅を400pxに指定する方法があります。

1. CSSで幅を400pxに指定する

レカム名古屋では、次のシンプルなCSSで表示幅を400pxに指定できました。

/* 投稿アイキャッチサイズ */
.single-post img.wp-post-image {
    width: 400px;
    height: auto;
}

ところが、別のテスト環境では、この指定だけでは幅が変わりませんでした。

同じAstraを使用していても、テーマ設定やテンプレート、ほかのCSSの影響などにより、指定がそのまま効かない場合があります。

2. 幅の指定が効かない場合

別の環境では、!important を追加することで幅400pxが適用されました。

/* 投稿アイキャッチサイズ */
.single-post img.wp-post-image {
    width: 400px !important;
    height: auto;
}

!important は、ほかのCSSによる指定よりも優先して適用させたい場合に使用します。

3. 画像が中央に表示される場合

幅400pxになっても、画像が中央に表示されることがありました。その場合は、左寄せの指定を追加します。

/* 投稿アイキャッチサイズ・左寄せ */
.single-post img.wp-post-image {
    width: 400px !important;
    height: auto;
    display: block;
    margin-left: 0 !important;
    margin-right: auto !important;
}

この指定では、画像をブロック要素として扱い、左右のマージンを指定して左寄せにしています。

4. CSSが効かない場合は画像のクラスを確認する

今回のテスト環境では、F12の開発者ツールでアイキャッチ画像を調べ、画像のクラスに wp-post-image が含まれていることを確認しました。

画像そのもののクラスと、画像を囲む親要素のクラスは異なります。親要素のクラスだけを指定しても、画像の幅や配置を直接変更できるとは限りません。

CSSが効かない場合は、開発者ツールで実際の img 要素を確認し、画像に付いているクラス名を使って指定します。

なお、同じAstraでも、導入したテンプレートや設定、ほかのCSSによって表示結果が異なる可能性があります。テンプレートの種類だけが原因とは限らないため、実際のHTMLと表示状態を確認して調整します。