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

TCDテーマAMORE:トップページ第4ブロックのアイキャッチ画像のサイズを変更する方法方法

Q.トップページ第4ブロックに表示される記事のアイキャッチ画像を大きくすることは可能ですか。

 
▼変更箇所イメージ
変更箇所イメージ

A.該当のファイルを下記の方法でカスタマイズしてください。

1. 表示したいサイズを追加する

編集するファイル: テーマのための関数 (functions.php)
編集する箇所: 507行目付近(追加)

add_image_size( 'size4', 200, 200, true );

「200」は出力したいサイズに変更してください。

 

2. 実際に出力されるサイズを変更する

編集するファイル: Welcome Screen 固定ページテンプレート (page-welcome.php)
編集する箇所: 121行目付近

<a href="<?php the_permalink() ?>"><div class="thumb blog-list-thumb"><?php if ( has_post_thumbnail()) { the_post_thumbnail('size3'); } else { echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image1.gif" alt="" title="">'; }; ?></div></a>

 ↓

<a href="<?php the_permalink() ?>"><div class="thumb blog-list-thumb"><?php if ( has_post_thumbnail()) { the_post_thumbnail('size4'); } else { echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image1.gif" alt="" title="">'; }; ?></div></a>

 

3. 余白等の調整

管理画面【外観】→【TCDテーマオプション】→【基本設定】→「カスタムCSS」の最下部に下記をコピー&ペーストして表示をお確かめください。 

#fourth .col-xs-30 {
    width: 40%;
}
#fourth .col-xs-90 {
    width: 60%;
}
.thumb {
    width: 200px;
}

ご希望の表示になるように数値は変更してください。

コード変更後は画像の再生成が必要となります。再度画像をアップロードし直すか、下記プラグインをご利用ください。
WordPressのサムネイル画像を一括で再生成できるプラグイン「Regenerate Thumbnails」
AMOREデモ

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

TCD LABO ご利用上の注意

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

またカスタマイズ内容は、バージョンにより異なる場合がございますこと予めご理解賜りますようお願いいたします。

お問合せ・ご要望

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