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

ワードプレステーマ別

TCDテーマCORE:サムネイルの縦横比率の調整をする方法

Q.サムネイルの歪みを修正したい

他テーマからCOREに切り替えたところ、サムネイルが上下や左右にひずんで表示が崩れてしまいました。
サムネイルサイズを一括変更するプラグインもありますが、サイズを変更するというより、ひずみを解消する方法はありますか?

A.下記のcssファイルの該当箇所を編集します

テーマの仕様でそれぞれのページでのサムネイルサイズを、CSSでサイズをピクセル指定しており、縦横比が異なる部分があるため、ひずみが生じているものと考えられます。
テーマファイルを以下のように編集していただくことで、ひずみを解消することができます。

編集するファイル:style.css
編集する箇所:

#archive_post_list .post_type2 .image { margin:0 0 15px 0;
display:block; width:318px; height:172px; overflow:hidden; }

   ↓

#archive_post_list .post_type2 .image { margin:0 0 15px 0;
display:block; width:318px; height:156px; overflow:hidden; }

#archive_post_list .post_type2 a.image img {
  width:318px; height:172px;
  -webkit-transition: all 0.35s ease-in-out; -moz-transition: all
0.35s ease-in-out; transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}

   ↓

#archive_post_list .post_type2 a.image img {
  width:318px; height:auto;
  -webkit-transition: all 0.35s ease-in-out; -moz-transition: all
0.35s ease-in-out; transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1); -moz-transform: scale(1);
-ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}

※該当箇所のheight(高さ)をピクセル指定からauto(自動)に編集しています。
ただし、当該変更により写真の天地はデフォルトよりもやや小さくなります。

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

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

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