• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressでアイキャッチ画像のサイズを変更する方法

WordPressでアイキャッチ画像のサイズを変更する方法

最終更新日:2021年10月6日

この記事を読めば…
WordPressでアイキャッチ画像のサイズを変更する方法がわかります。

アイキャッチ画像のサイズがバラバラなんやけどきれいに揃える方法はないんか?
テーマのアイキャッチ画像の設定サイズより小さい画像を使用していると表示サイズがバラバラになることがあるよ
なるほど。でも画像サイズを揃えるのはめんどくさいな…
そんな時はアイキャッチ画像のサイズを小さめに設定したらいいよ

アイキャッチ画像のサイズを変更するのには、WordPressを構成するファイルを変更する必要があります。必ず変更する前には、バックアップをとっておきましょう。

アイキャッチ画像のサイズを変更する方法は2種類あります。

  1. set_post_thumbnail_size()で指定する方法
  2. the_post_thumbnail()に指定する方法

2つとも行った場合、the_post_thumbnail()に指定する方法が優先されます。サイズの変更がうまくいかない場合は確認してください。

この後の説明は、アイキャッチ画像の設定ができる前提で進めます。もし、アイキャッチ画像が表示されていない方は、WordPressでアイキャッチ画像が表示されない場合の対処法の記事を見て解決しておいてください。

目次 非表示
1 set_post_thumbnail_size()で指定する
2 the_post_thumbnail()に指定する
2.1 サイズを直接指定する方法
2.2 テーマに設定されている画像サイズを用いる方法
2.3 新たに画像サイズを追加する方法

set_post_thumbnail_size()で指定する

この方法は、functions.phpファイルを編集します。次のコードをfunctions.phpファイルに追加してください。

set_post_thumbnail_size( 100, 100 );

()の中に書いてある数字は任意で指定できます。前から順番にアイキャッチ画像の幅、高さになります。

また数字の後ろにtrueという単語を入れると切り抜きモードになります。

set_post_thumbnail_size( 100, 100, true );

切抜きモードは画像がサイズに合わせてリサイズされることなく、切り抜きが行われます。

the_post_thumbnail()に指定する

この方法は、the_post_thumbnail()の()の中にアイキャッチ画像のサイズを指定する方法になります。

いくつか指定する方法があります。the_post_thumbnail()の場所がわからない場合、WordPressでカスタマイズするテンプレートを確認する方法の記事を参考にして修正箇所を探してください。

サイズを直接指定する方法

まずアイキャッチ画像のサイズを直接数字で指定する方法です。()の中に次のように数字を指定してください。

the_post_thumbnail( array( 100, 100 ) );

array( 100, 100 )にある2つの数字は任意で指定できます。前から順番にアイキャッチ画像の幅、高さになります。好みのサイズに合わせて数字を入力してください。

テーマに設定されている画像サイズを用いる方法

テーマに設定されている画像サイズを用いる方法です。設定 ≫ メディアから確認できるように、WordPressではもともといくつかの画像サイズを生成します。

これらの画像サイズをアイキャッチ画像にも適用することができます。次のコードを参考に、アイキャッチ画像に設定したいサイズを選択してください。

the_post_thumbnail( 'thumbnail' );   // サムネイル
the_post_thumbnail( 'medium' );      // 中サイズ
the_post_thumbnail( 'large' );       // 大サイズ
the_post_thumbnail( 'full' );        // フルサイズ (アップロードした画像の元サイズ)

新たに画像サイズを追加する方法

自分で画像サイズを定義して、それを利用する方法があります。

注意
この方法を利用すると画像をアップロードする際に、そのサイズにあった画像が自動生成されます。たくさん定義しすぎると、サーバー上のディスク容量を圧迫しますので注意しましょう。

次のコードをfunctions.phpファイルに追加してください。

add_image_size( 'sample-thumb', 300, 9999 );

続いてthe_post_thumbnail()の記述を次のように変更してください。

the_post_thumbnail( 'sample-thumb' );

add_image_size()で最初に記載したキーワードをthe_post_thumbnail()に指定する形式をとります。

add_image_size()に設定するキーワードは好きなものを指定できます。また、その後に続く数字は任意のものを指定できます。数字は順番に画像の幅、高さを表します。

ポイント
数字に9999を指定すると、その幅・高さは無制限になります。幅に合わせてアイキャッチ画像のサイズをリサイズしたい場合は、高さを9999にしておきましょう。

特にこだわりがなければ、初心者にはサイズを直接指定する方法がおすすめだよ

参考

  • 関数リファレンス/set_post_thumbnail_size() – WordPress Codex
  • テンプレートタグ/the_post_thumbnail() – WordPress Codex

カテゴリー:WordPress タグ:アイキャッチ画像

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « WordPressでアイキャッチ画像が表示されない時の対処法
Next Post: WordPressでアイキャッチに動画を設定する方法 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
詳しく見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressのプラグインとは?初心者向けに使い方を解説
  • WordPressでアイキャッチ画像に説明文(キャプション)を追加する方法
  • Conoha WINGレビュー|実際に使ってみた感想
  • エックスサーバーレビュー|ページ表示速度や稼働率を検証してみた
  • 初心者向けにWordPressに最適なレンタルサーバーの選び方を解説

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2022 FOXWP All rights reserved.