今流行りのレスポンシブサイト。Wordpressの場合、色々テーマを使っているとアイキャッチのみがリサイズされないこともある。
PCだと問題なくても、スマホだとリサイズされずにアイキャッチだけ大きいままだったり。
とりあえず下記のブログを参考に、まずはfunction.phpにコードを追加。すごく参考になりました。
[WordPress] アイキャッチで出力される img タグ中のサイズやクラスを変更したり削除したりする ｜ memocarilog
サイズ指定を入れないためのコードを利用。
次に、投稿記事でアイキャッチを表示させたい場所に以下を追加。あくまで一例だけど、既にthe_post_thumbnailが挿入されてるテーマなら少し変更するだけでOK。
<?php the_post_thumbnail(‘full’); ?>
</p>
そしてスタイルシート(style.css)に次のコードを追加。
text-align:center;
}
.thumb img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
アイキャッチを中央に表示するためのtext-alignなので、不要な場合は不要。アイキャッチの幅と高さの最大値を画像サイズまでにする(max-width,max-height)。
次にwidth,heightで、画面サイズに合わせて画像サイズを自動調整。もちろんテーマがレスポンシブ対応じゃないと効果なし。PCで閲覧すると分かるけど、ブラウザの幅に合わせてアイキャッチのサイズも自動で変わると思う。
以上でアイキャッチもレスポンシブに対応。下記はぐーぱんの例。
PC表示だと大きいまま。そしてブラウザのサイズを変えるとアイキャッチもサイズが自動でリサイズされる。
こういう風に。要はアイキャッチのimgタグにデフォルトで挿入されるwidthとheightをPHPのコードで消し、CSSを弄れば大丈夫。
