WordPressテーマTCDのカスタマイズを研究するサイト

サムネイルの縦横比率の調整

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(自動)に編集しています。
ただし、当該変更により写真の天地はデフォルトよりもやや小さくなります。

The following two tabs change content below.

tcd

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。