WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
previous arrowprevious arrow
next arrownext arrow

WordPressでアイキャッチ画像を設定する方法|注意点や便利なプラグインを徹底解説!

生徒

ペン博士!WordPressでアイキャッチ画像を設定したいのですが、やり方が分からなくて困っています…

ペン博士

WordPressでアイキャッチ画像を設定する方法じゃな!設定の注意点や便利なプラグインも紹介するから、しっかり覚えていくんだぞ!

生徒

ありがとうございます!

「アイキャッチ画像を設定したいけれど方法がわからない…」そんな悩みを抱えていませんか?本記事では、WordPressでのアイキャッチ画像の基本や設定手順に加え、注意点や便利なプラグインも解説します。

読み終える頃には、ご自身のブログに最適なアイキャッチ画像を設定し、記事の印象を高められるようになるでしょう。

「学習→収入」につなげた受講生のリアルな体験談も公開中!
働き方を変えたい方にも響くストーリーです。

片山さん
妊娠をきっかけに、子どものためにもどこでも働けるスキルを身に付けたいと考える。そこで、オンラインスクールのfammで1ヶ月間Web制作の勉強を開始。その後、独学で勉強に励むも限界を感じ、案件保証が魅力のWithCodeへ入学し、稼げる力を身に付けることができた。現在は副業として稼ぐ力を身に付け、10件以上の案件を担当するまでに成長した。

詳しくはこちらの記事をご覧ください。

あわせて読みたい
【子育てママさん必見】WithCodeに転校!?「子育て+在宅ワーク」両立の秘密に迫る! ペン博士!今回はどんな方がインタビューに応じてくださったんですか? 今回のインタビューに応じてくれたのは、子育てをしながら在宅ワークを続けているママさんじゃよ...

片山さんの主な制作実績はこちら

目次

WordPressのアイキャッチ画像とは?役割とメリット

アイキャッチ画像とは、ユーザーの視線を引きつけるために記事へ設定する画像です。WordPressでは記事一覧のサムネイルや、記事冒頭に大きく表示されます。
そのため、まさに記事の“顔”とも言える存在です。単なるデザイン性にとどまらず、記事内容を瞬時に伝える役割を果たします。

適切な画像を設定することで次の効果が期待できます。

  • 記事が目に留まりやすくなり、閲覧数が増える
  • 内容を直感的に伝えられるため、探している情報にアクセスしやすい
  • サイト内の回遊率や滞在時間が向上する

また、SNSで記事をシェアした際は画像が自動で表示されます。
文字だけの投稿に比べて視覚的に目立ち、拡散力やアクセス数の増加につなげることができるでしょう。

実際、多くのメディアサイトは記事の雰囲気を伝える専用のアイキャッチを用意しています。こうした工夫によって、サイト全体の統一感やブランドイメージを高めることができるので覚えておきましょう。

WordPressでアイキャッチ画像を設定する方法

ペン博士

ここからは、WordPressでアイキャッチ画像を設定する手順を解説するぞ!
記事編集画面での具体的な操作と、設定欄が表示されないときの対処法を紹介するからよーく聞いておくんじゃぞ!

アイキャッチ画像の設定手順

WordPressでは、記事作成時に簡単にアイキャッチ画像を設定できます。
手順は以下の通りです。

STEP
「投稿」パネルにある「アイキャッチ画像を設定」
をクリックする。
STEP
メディアライブラリから画像を選択し、
「アイキャッチ画像を設定」をクリックする。
STEP
アイキャッチ画像の設定完了

画像を選ぶ際は、記事内容と関連性が高いものを使用すると効果的です。
例えば、料理記事なら料理の写真、旅行記事なら風景写真が適しています。
このように記事に合った画像を設定することで、ユーザーの関心を引きやすくなります。

設定欄が表示されない場合の対処法

記事編集画面に「アイキャッチ画像」の項目が見つからないことがあります。その場合は、表示オプションを有効化することで簡単に解決できます。
手順は以下の通りです。

STEP
右上の「オプション」アイコンを開き、
「設定」をクリックする
STEP
「アイキャッチ画像」を有効化する

この操作で非表示だった設定欄が表示され、画像を登録できるようになります。

アイキャッチ画像を設定する際の注意点

ペン博士

アイキャッチ画像は、設定を誤ると表示が崩れたり、著作権トラブルになる恐れもあるんじゃ。
ここでは特に注意すべきポイントを教えてやろう!

アイキャッチ画像に適したサイズの選び方

WordPressで推奨されるサイズは 1200×630ピクセル(比率1.91:1) です。
この比率はX(旧Twitter)やFacebookなど、主要なSNSで広く採用されている表示規格であり、画像が途切れたりせず安定して表示されます。


多くのWordPressテーマもこの比率を前提に設計されているため、記事一覧などでもレイアウトが崩れにくいのが特徴です。記事数が多いサイトでは、サイズを統一することで全体に一貫性が生まれ、デザインの完成度も高まります。

ペン博士

記事一覧のサムネイルはテーマによって正方形にトリミングされることがある。そのため、重要な文字や被写体は中央に配置すると安心じゃ。記事ごとに構図が異なると統一感を欠きやすいため、中央寄せを意識して配置するのじゃぞ。

著作権への配慮と引用表記

アイキャッチ画像も著作権の対象です。
引用として利用する場合は、文化庁が示すとおり 公正な慣行・主従関係・明確な区別・出所の明示 といった要件を満たす必要があります。

特に注意すべきなのは「出所の明示」です。
ただし、出所を示せば自由に利用できるわけではありません。
通常の利用では、各素材サイトの利用規約やライセンス条件に従う必要があります。

出典表記の例

  • 引用:ページタイトル ― サイト名
  • 出典:ページタイトル|サイト名
  • 「○○○○」より引用

※法律で表記スタイルが固定されているわけではありませんが、題号・著作者名・サイト名などを特定できる形で示すのが望ましいです。

アイキャッチ画像設定に便利なプラグイン3選

ペン博士

WordPressではアイキャッチ画像を簡単に設定できるんじゃが、記事数が増えると手間や設定漏れのリスクも出てくる。

そこで役立つのが、これから紹介するプラグインじゃ!

どれも作業時間の短縮や設定漏れの防止に役立つから、必要に応じて導入を検討するといいぞ。

Quick Featured Images

Quick Featured Images」は、投稿一覧画面から直接アイキャッチ画像を設定・変更できるプラグインです。WordPress標準機能では記事ごとに編集画面を開く必要があり、大量の記事を管理するのは手間がかかります。

このプラグインを導入すると、一覧画面に記事ごとのアイキャッチが表示されます。
その場でクリックして変更できるため、編集画面を開く必要がありません。
結果として、作業効率が大きく向上します。

また、複数の記事をまとめて確認したい場合にも最適です。

Auto Featured Image

Auto Featured Image」は、アイキャッチ画像を自動で設定してくれるプラグインです。記事を投稿すると、本文内で最初に挿入した画像を自動的にアイキャッチとして登録します。

画像を入れる習慣があれば、設定忘れを防げるのが大きなメリットです。
さらに、過去記事に対しても一括設定が可能なので、未設定の記事をまとめて補完することも可能です。

ただし、自動設定されるのは本文内の最初の画像に限られます。
画像が含まれない記事にはアイキャッチが登録されないため、その場合は手動で補う必要があります。

PublishPress Checklists

PublishPress Checklists」は、アイキャッチ画像を設定しない限り記事を公開できなくするプラグインです。新規投稿画面でアイキャッチが未設定の場合、エディター上部に警告が表示され、「公開」ボタンも無効化されます。

この仕組みによって、アイキャッチの設定漏れを確実に防止できるのが大きなメリットです。複数人で記事を更新するサイトや、記事数が多いメディア運営において特に役立ちます。

また、条件を細かく指定できる点も便利です。例えば、「投稿記事のみ対象にする」「固定ページも含める」といった柔軟な設定が可能です。さらに、画像の最小サイズ(幅や高さ)を指定できるため、基準を満たさない画像では公開できないよう制御することもできます。

生徒

ペン博士、WordPressでアイキャッチ画像を設定する方法が理解できました!紹介してもらったプラグインも、ぜひ活用していこうと思います!

ペン博士

うむ、これらをしっかり理解して今後のWebサイト制作に生かすんじゃぞ!

生徒

ありがとうございます!この学びを今後のWebサイト制作に役立てます

まとめ

WordPressでアイキャッチ画像を設定する際の重要なポイントを以下にまとめます。

・アイキャッチ画像はユーザーの目を引き、記事やサイト全体の印象を高める
・編集画面から簡単に設定でき、表示されない場合はテーマや設定を確認する
・サイズや比率を最適化し、著作権を守った画像を使用することが大切
・専用プラグインを活用することで、効率的に設定できる

これらのポイントを押さえることで、WordPress記事がより魅力的に仕上がり、ユーザーに伝わりやすいブログを運営できるでしょう。

WithCodeを体験できる初級コース公開中!

初級コース(¥49,800)が完全無料に!

  • 期間:1週間
  • 学習内容:
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!

この記事を書いた人

WithCode(ウィズコード)は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。

– service –WithCodeの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう!

    詳細はこちら
  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう!

    詳細はこちら
  • WithCareer
    - ウィズキャリ -

    就転職サポート

    大手エージェントのサポート下で
    キャリアアップを目指そう!

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
予約!

目次