「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマGalleryでアイキャッチ表示サイズを変更する方法

Q.アイキャッチ画像の大きさは変更できますか?

Galleryの記事ページに表示されるアイキャッチが正方形(縦470px×横470px)なのですが、縦長や横長にするすることはできますか?大きさを変更する方法も併せて教えてください。

A.以下のcssファイル、phpファイルの該当箇所をご編集ください

①CSSファイルを修正する(縦横比の設定)
編集するファイル:style_pc.css
編集する箇所:

#slider { position:relative; width:470px; z-index:0; }

※「width:470px;」をご希望の幅(例:650px)に変更してください。

編集するファイル:nive-slider.css
編集する箇所:

.nivoSlider { position:relative; width:100%; height:auto; overflow:hidden; }

※「height:auto」を希望の高さ(例:300px)に変更してください。
nive-slider.cssは管理画面では表示されません。
テーマフォルダ内の「js」フォルダの中に「nive-slider.css」が格納されています。
ローカルで編集していただいた後にFTPで当該箇所にアップロード(上書き)してください。

②【テーマのための関数(functions.php)】の下記部分を修正する
編集するファイル:functions.php
編集する箇所:

// サムネイルの設定 --------------------------------------------------------------------------------
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
add_image_size( 'large_size', ●●●, ●●●, true );
add_image_size( 'mid_size', 319, 180, true );
add_image_size( 'small_size', 64, 64, true );
}

※「large_size」がスライダー用のサイズなので、この部分の●●●の数値を適宜ご変更下さい。

また、すでにアップしトリミングされている画像のサイズを一括変更したい場合は、「Regenerate Thumbnails」というプラグインが便利です。

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

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

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