採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

TCDテーマCORE:記事ページのアイキャッチ画像の画質を調整する方法

Q.「小さいアイキャッチ画像」が引き伸ばして表示されて画質が荒くなるのを防ぎたい。

画像がメインカラム幅(660px)に引き伸ばされるので、CSSで調整します。
サイト内の全記事に反映させたい場合:外観>TCDテーマオプション>基本設定のカスタムCSSに入力
特定の記事のみに反映させたい場合:記事編集画面のカスタムCSSに入力

.post_image img { width: auto; }

Q.「大きいアイキャッチ画像」がトリミング表示されて画質が荒くなるのを防ぎたい。

この箇所では大きいサイズの画像を設定しても「横:660px 縦:400px」にトリミングされて表示されます。トリミング処理を外して、設定したアイキャッチ画像をフルサイズで表示させるためには、以下のカスタマイズが必要です。
編集するファイル: single.php
編集する箇所: 84行目

<?php if ( has_post_thumbnail() and $page=='1') { if ($options['show_thumbnail']) : ?><div class="post_image"><?php the_post_thumbnail('size2'); ?></div><?php endif; }; ?>

↓ ’size2’を’full’に変更

<?php if ( has_post_thumbnail() and $page=='1') { if ($options['show_thumbnail']) : ?><div class="post_image"><?php the_post_thumbnail('full'); ?></div><?php endif; }; ?>

表示される画像の大きさ自体は変わりませんが、トリミングを行わずフルサイズの画像を読み込むため、画質が落ちることなく表示されます。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事