WordPress個別サポート

投稿や固定ページに追加できるアイキャッチ画像は、多くのテーマでは特に何もしなくてもそれなりのサイズで表示されますが、Twenty Twelveなどでは大きすぎることもあるので、自由に変更したいこともあります。

大きすぎるアイキャッチ画像

Twenty Twelveの大きすぎるアイキャッチ画像

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

表示するアイキャッチ画像のサイズを変更する

アイキャッチ画像のサイズを変更するには、アイキャッチ画像を表示しているテンプレートファイルを開いてアイキャッチ画像を表示する命令the_post_thumbnail()のカッコ( )の中に「array(100, 100)」のように幅と高さを指定する方法があります。

たとえば、Twenty Twelveなどではcontent.phpを開いてthe_post_thumbnailの部分を次のように変更します。

<?php the_post_thumbnail(array(100, 100)); ?>

これにより、アイキャッチ画像が幅100px、高さ100pxというサイズで表示されます。

アイキャッチ画像の表示サイズを変更

アイキャッチ画像の表示サイズを変更

ここでは幅100px、高さ100pxを指定しましたが、代わりに次のように指定することもできます。

  • the_post_thumbnail('thumbnail') --- サムネイル画像を表示
  • the_post_thumbnail('medium') --- 中サイズ画像を表示
  • the_post_thumbnail('large') --- 大サイズ画像を表示
  • the_post_thumbnail('post-thumbnail') --- アイキャッチ画像を表示
  • the_post_thumbnail() --- アイキャッチ画像を表示(上と同じ)

サムネイル、中サイズ、大サイズについてはそれぞれ、画像アップロード時に作成された各種サイズの画像が表示されます。これは「設定」‐「メディア」メニューで設定されているサイズです。

ちなみに、サイズを指定してアイキャッチ画像を表示した場合、そのサイズに近い画像が使われます。たとえば、the_post_thumbnail(array(100, 100))と指定すると、幅150px高さ150pxのサムネイル画像が幅100px高さ100pxで縮小表示されることになるでしょう。

アップロードするときにアイキャッチ画像のサイズを変更する

the_post_thumbnail()のように、カッコ( )の中に何も指定しなかった場合は、そのテーマで「アイキャッチ画像のサイズ」として設定されているサイズで表示されます(the_post_thumbnail('post-thumbnail')と同じ)。

この「アイキャッチ画像のサイズ」は、たとえば、functions.phpの中でset_post_thumbnail_sizeという命令によって指定されています。Twenty Twelveでは次のように設定されています。

set_post_thumbnail_size( 624, 9999 );

これにより、アイキャッチ画像などに使う画像をアップロードすると、幅が624pxという画像が作成されます。結果としてアイキャッチ画像のサイズを明示的に指定しなかった場合は幅624pxの画像(Twenty Twelveの場合)が表示されます。

大きすぎるアイキャッチ画像

大きすぎるアイキャッチ画像

そのようなわけで、Twenty Twelveのデフォルトの状態で投稿を一覧表示すると、幅624pxという大きすぎるアイキャッチ画像が表示されるのです。

このset_post_thumbnail_sizeのサイズ設定を変更すれば、画像アップロード時にアイキャッチ画像のサイズを変更することができます。

set_post_thumbnail_size( 250, 9999 ); 

これで投稿や固定ページにアイキャッチ画像を設定すると、uploadsフォルダには幅250pxのアイキャッチ画像が作成されます。

幅250pxのアイキャッチ画像が作成される

幅250pxのアイキャッチ画像が作成される

また、set_post_thumbnail_size( 250, 250, true )のように3番目のパラメータにtrueを指定すると、指定サイズで切り抜きが行われます。

幅250px高さ250pxのアイキャッチ画像が作成される

幅250px高さ250pxのアイキャッチ画像が作成される

これで、the_post_thumbnail()のように、カッコ( )の中に何も指定しなかった場合でも、それなりのサイズのアイキャッチ画像が表示されるようになります。

幅250pxのアイキャッチ画像が表示されるようになる

幅250pxのアイキャッチ画像が表示されるようになる

まとめると、アイキャッチ画像のサイズを変更するには、次のいずれかの方法があるということです。

  • the_post_thumbnailで表示するときの画像サイズを設定する
  • set_post_thumbnail_sizeを使ってアップロード時の画像サイズを設定する

set_post_thumbnail_sizeでアイキャッチ画像のサイズを設定せず、表示するときもthe_post_thumbnail()のカッコ( )の中に何も指定しなかった場合は、単純にオリジナルの画像が表示されます。画面での見え方は、style.cssなどのスタイル指定に従うことになります。

アイキャッチ画像がうまく表示できないときは以下のページも参考にしてください。

the_post_thumbnailで表示したアイキャッチ画像のサイズがおかしいとき

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

関連記事

BizVektorのカスタマイズ

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

WordPressプラグイン

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