WordPress個別サポート

SEOに強いWordPressテーマStinger3で投稿一覧時に使用するアイキャッチ画像のサイズを変更する方法を紹介します。次のようなイメージで大きいアイキャッチ画像を使用したいときの参考にしてください。

Stinger3で大きなアイキャッチ画像を表示したい

Stinger3で大きなアイキャッチ画像を表示したい

デフォルトのレイアウトイメージは次のようになります。投稿一覧では幅150px、高さ150pxのアイキャッチ画像が表示されます。

Stinger3で投稿一覧のデフォルトのアイキャッチ画像

Stinger3で投稿一覧のデフォルトのアイキャッチ画像

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

好きなサイズのアイキャッチ画像の設定

まず、大きなサイズのアイキャッチ画像を使用可能にします。それには、Stinger3のfunctions.phpに「add_image_size('thumb500',500,200,true);」の1行を追加します。

add_image_size('thumb100',100,100,true);
add_image_size('thumb110',110,110,true);
add_image_size('thumb500',500,200,true);

幅500px、高さ200pxのカスタム画像を登録し、後で呼び出せるように「thumb500」という名前を付けておくという意味です。最後の「true」はサイズが違うときに切り取るかどうかの指定(trueは切り取る)ということです。

「thumb100」や「thumb110」はStinger3のfunctions.phpに最初から記述されているカスタム画像です。記述を参考にして新たなカスタム画像を登録することができます。

※「thumb500」という名前や、幅500px、高さ200pxというサイズは自由に決めてください。

これで、投稿を入力するときにアイキャッチ画像を設定すると、幅500px、高さ200pxの「thumb500」が作成されます。

新たなサイズのアイキャッチ画像が作成されるようになる

新たなサイズのアイキャッチ画像が作成されるようになる

※既存投稿について一括で新たなサイズのアイキャッチ画像を作成するには、Auto Post Thumbnailプラグインが便利です。

【関連記事】すべての投稿のアイキャッチ画像を一括設定する

登録したサイズのアイキャッチ画像を画面に表示する

次に、画面に表示するアイキャッチ画像のサイズを指定します。

home.php(投稿のトップページ)の例では、最初の方にある「サムネイルを持っているときの処理」の次の部分を変更します。

・現在
the_post_thumbnail(array( 150,150 ),

・変更後
the_post_thumbnail('thumb500',

幅150px、高さ150pxで表示していたアイキャッチ画像の部分に、さきほど設定した「thumb500」の画像を表示するということです。

レイアウトの修正

幅500px、高さ200pxのアイキャッチ画像の登録と表示はできましたが、この時点でのレイアウトは次のようになります。少しレイアウトの修正が必要です。

アイキャッチ画像まわりのレイアウト変更が必要

アイキャッチ画像まわりのレイアウト変更が必要

デフォルトのレイアウトではアイキャッチ画像を左寄せにするレイアウトになっているので、そのあたりを修正します。

便宜上、親テーマを直接修正し、後ですぐに直せるようにコメントアウト(/* … */)する形で作業します。

まず、style.cssを開いて、sumboxのfloatやサイズ指定を解除します。

.sumbox {
/*
	float: left;
	height: 150px;
	width: 150px;
*/
}
…略…
.entry .sumbox {
/*
float: left;
height: 150px;
width: 150px;
*/
}

次に、投稿タイトルや抜粋の右寄せを解除します。

.post .entry .entry-content {
/*
float: right;
width: 380px;
padding-left: 20px;
*/
}

これで、大きなアイキャッチ画像が表示されるようになります。タイトルや抜粋と合わせて表示イメージは次のようになります。

大きなアイキャッチ画像が表示されるようになる

大きなアイキャッチ画像が表示されるようになる

Stinger3でアイキャッチ画像を幅150px、高さ150pxで表示するコードは次のテンプレートに記述されています。必要に応じて修正してください。

  • index.php
  • home.php
  • archive.php
  • search.php
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート