WordPressアイキャッチ画像とは・アイキャッチの設定方法

WordPressのアイキャッチ画像は世間一般で言うサムネイル画像の役割を果たします。

テーマや環境によって変わりますが、記事一覧ページなどのアイキャッチ画像は、縦横比16:9(横幅1200pxの場合は縦幅675pxの画像)が比較的多いです。

本記事では、WordPressのアイキャッチ画像の役割やサイズの説明、およびアイキャッチ画像の作り方を説明します。

WordPressのアイキャッチ画像の役割と画像サイズ

WordPressのアイキャッチ画像の役割

アイキャッチ画像とは、Eye(読者の目)をCatch(惹きつける)させるための画像のことで、世間一般でいう「サムネイル画像」のことです。

ブログ記事一覧や関連記事のサムネイルとしてアイキャッチ画像が使われたり、TwitterやFacebookなどのSNSでシェアしたときのサムネイル画像として使われます。

下記の画像は、当サイト（WEBST8のブログ)の記事一覧のアイキャッチ画面です。

アイキャッチを設定することによって、記事をクリックして読まなくても「自分が見たい記事か否か」概要を把握できるため、アイキャッチ画像は設定しておく方が望ましいです。
 

有名テーマのアイキャッチ画像デフォルト縦横比

下記は有名テーマのアイキャッチ画像デフォルトの縦横比です。16:9がデフォルト値のテーマが多く、テーマによっては縦横比を変更できます。

Cocoon2.7.4.6、Swell2.10.0、JiN:R1.3.2、SANGO3.8.13、Stork19 4.9、Lightning15.25.1+VK Blocks 1.78.0.1、Lightning G3 Pro(Lightning 15.25.1、VK Blocks Pro1.78.0.0)、Snow Monkey25.4.11+Snow Monkey Blocks 20.5.5 、Emanon Premium1.7.2で確認

■【Cocoon】記事一覧ページのアイキャッチ画像

■【Swell】記事一覧ページのアイキャッチ画像

■【JIN:R】記事一覧ページのアイキャッチ画像

■【Snow Monkey】記事一覧ページのアイキャッチ画像

■【SANGO】記事一覧ページのアイキャッチ画像

■【Lightning】記事一覧ページのアイキャッチ画像

関連【2024年版】WordPressおすすめ有料テーマ10選
関連【2024年版】WordPressおすすめ無料テーマ6選
関連【2024年版】アフィリエイトおすすめWordPressテーマ7選
 

WordPressアイキャッチサイズは何pxで作れば良いか？

 
アイキャッチ画像のサイズは前述の通り割とテーマやサイトによってばらつきがあり「必ずこのサイズでないといけない」といったものはありません。

縦横比16:9がデフォルトのアイキャッチ画像の縦横比になっているテーマが多いです。

横幅を1200pxとした場合16:9であれば「1200px * 675px」あたりでアイキャッチ画像を作成すれば無難でしょう。

高解像度端末も考慮して画像の綺麗さと容量のバランスを考慮すれば、横幅1200pxはくらいで、テキストがある場合はある程度画像の中央よりに配置すると、比較的どのSNS・表示方式でも綺麗に写ることが多いのではないかと思います。

【2019年5月時点での推奨画像】
一番目立たせたい物が真ん中に配置されている
1200*630（比率 1:0.525）
PNG画像
推奨理由には各SNSでの「画像の表示比率」・SNS側で行われる「画像の圧縮処理」が関係しています。 【画像の表示比率】
Facebook：1:0.522
Twitter（large）：PC版 1:0.502、スマホ版 1:0.524
はてなブックマーク：PC版 1:0.68、スマホ版 1:0.75OGP確認 | ラッコツール

おすすめの画像比率は？
アイキャッチの画像比率は16:9の横長画像をお勧めしています。
「記事の書き方」を覚えよう！WordPress初心者が知っておきたい超基本｜JIN:R MANUALより引用

当サイトでは、横幅1200px * 縦742px　(黄金比 1 : 1.618)でアイキャッチ画像サイズを作成しています。

WordPressアイキャッチ画像の作り方・設定方法

ここからは、WordPressでアイキャッチを設定する方法を紹介します。

CanvaでWordPressアイキャッチ画像を作成する

アイキャッチ画像は画像であればなんでも構いませんが、画像の上にテキストを入れたり形を加工したい人も多いかと思います。

Canvaは無料で利用できるWeb上のデザイン作成ツールで、Wordpressのアイキャッチ画像を作る際にとても便利です。

Canva公式サイトにアクセスしてまず無料のアカウントを作成しておきましょう。

アカウント作成後、ホーム画面で「デザインを作成」ボタンを押下します。

どの大きさにするか選択できます。ここではカスタムサイズを選択します。

サイズを入力します。ここでは例として1200*742と入力して「新しいデザインを作成」ボタンを押下しました。

キャンバスが作成されました。アップロードをクリックして、画像をアップロードしてみましょう。

「ファイルをアップロード」から画像を選択＆アップロードして、アップロードした画像をクリックします。

四角の●にカーソルを合わせてドラッグしてサイズと位置を良い感じに調整しましょう。

 

必要に応じて、テキストを入れたり、背景色を入れたりすることが可能です。CanvaでWordPressアイキャッチを作る方法は「CanvaでWordPressアイキャッチ画像を作る方法」をご参照ください。

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

投稿または固定ページの編集画面を開きます。右メニューからアイキャッチ画像という項目をクリックします。

旧エディターの場合

旧エディタークラシックエディターを利用の場合は下記の編集画面からアイキャチ画像を設定できます。

アイキャッチ画像として設定したい任意の画像を選択して「アイキャッチ画像を設定」ボタンをクリックします。

ブロックエディターの場合は、上記手順後に、記事を公開することでアイキャッチ画像の表示が確認できます。

+ 設定項目が表示されない場合

アイキャッチ画像が表示されない場合は、表示項目でアイキャッチ画像が非表示になっている場合があります。編集画面右上のオプションをクリックします。

 
右メニューの設定をクリックします。

 
パネル＞アイキャッチ画像のチェックが外れていたらチェックを入れておきましょう。

 
アイキャッチ画像が表示されない場合の多くは、上記の「アイキャッチ画像」が選択されていない時に起こるので、もし表示されなかった場合は今一度チェックしてみましょう。

アイキャッチ画像はSNSでシェアした時のOGP画像に設定される

多くのWordPress環境では、設定したアイキャッチ画像はLINE・Twitter・Facebook等のSNSでシェアした時のOGP画像として設定されます(テーマや設定によっては異なる場合もあります)。

(関連記事)【OGPとは】OGPの基本と使い方や設定方法を解説

 
「各SNSでシェアされた時のOGP画像表示の確認がしたい」とお考えの方は、簡単にOGP画像表示の確認できる無料サービスラッコツールズを使ってみましょう。

ラッコツールズ（OGP確認）公式サイト：https://rakko.tools/tools/9/

OGP画像表示の確認をしたいサイトのURLを入力するだけで、以下のようにFacebook・Twitter・はてなブックマーク・LINEのOGP画像表示を確認できます。

フリーで使える素材サイト

ここからは、WordPressのアイキャッチ画像で使えるフリー素材サイトをいくつかご紹介します。

記載のフリー素材サイトの利用規約・ライセンス情報は2024年7月時点のものです。利用する際は改めて、フリー素材サイトの利用規約・ライセンス情報をしっかり確認するようにしましょう。

PIXABAY(ピクサベイ)

PIXABAYは、会員登録不要で利用できる海外の画像素材サイトです。美しくて綺麗な写真が多い一方、日本人モデルや日本系の素材を探すのには不向きです。

ビジュアル重視の美しい素材が多いので壮大・綺麗・神秘的・グローバルなコンテンツに向いています。反面、日本人の日常・ビジネスシーンなどの画像はあまりないので不向きです。

写真AC(Photo AC)

 
写真ACは、日本の巨大写真素材サイトです。利用には無料の会員登録が必要ですが、人物・風景・パターン画像などなんでも揃ってい日本の画像素材サイトです。

日本人モデルや日本の風景をはじめ色々な素材がある 日本のビジネスシーンでも役立つ素材が多いのでホームページやブログの素材として重宝できます。

なお、無料版は制限がいくつかありますので、本格的に使う方は有料のプレミアムプランもおすすめです

unDrow

IT・Webサービス系の記事を作る際のアイキャッチ画像に利用できそうな画像が揃っています。

好きなカラーコードで画像を選択でき、svg, png形式に対応しているおしゃれなフリー素材サービスです。

manypixels

様々なジャンルで利用できそうなおしゃれなデザインが特徴で、5つのタイプでジャンルが分かれている為、その節々にあったピッタリの画像が見つかるでしょう。

このほかにも、有料・無料含めて色々な素材サイトがあります。詳しくは【おすすめ素材サイト総まとめ】ホームページで使えるフリー・有料素材25選をご参照ください。

まとめ

まとめです。今回は、WordPressのアイキャッチ画像の役割やサイズの説明、およびアイキャッチ画像の作り方を説明しました。

WordPressのアイキャッチ画像は世間一般で言う「サムネイル画像」の役割を果たします。

テーマや環境によって画像の縦横比は変わりますが、記事一覧ページなどのアイキャッチ画像は、16:9(横幅1200pxの場合は縦幅675px)が比較的多いです。

今回は以上になります。最後までご覧いただきありがとうございました。
 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室