Hello！ファズです
こんなお悩みや疑問は初心者の方だとあるあるだと思います！
しかも、そのうちの1つである「アイキャッチ」と「サムネイル」の違いに関しては中堅くらいになっても知らない人が多い。
結構同義として解釈している人が多いのが現状。
この記事では「アイキャッチ」と「サムネイル」の違いや、管理画面からアイキャッチを設定する方法。同時に作成されるサムネイル画像の設定を合わせて紹介しようと思います。
特に初心者さんには基礎的な部分なのでこの記事で知って言ってほしいと思います！
- WordPressの投稿・固定ページをプラグインなしで複製する3つの方法
- WordPressテーマ「STORK19」を使った制作事例ページの紹介
- ファビコンが変わらない3つの原因と解決方法【WordPress】
- 【有料・無料の違いってなに？】ワードプレステーマを選ぶポイント比較
- ブログ超初心者は何から始める？WordPressを使った作り方ロードマップ
【初心者におすすめの記事】
◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい
アイキャッチとサムネイルの違いとは？
ワードプレスを使う人だと必ず知っている単語「アイキャッチ」と「サムネイル」。
同じものと思っている方も結構いらっしゃるこのワード。実は異なるもので、役割も違います！
まずはこの2つの違いを解説。
ワードプレスのアイキャッチとは
画像はサイトFUSMのTOPで使用しているアイキャッチ例。
アイキャッチとは、固定ページや記事・カテゴリーなどに設定する「ページコンテンツに設定した興味を引く画像」 のことを指します。
投稿されている記事に使われる画像がそれですね。
目を引くという役割から、デザインやテキスト・サイズ・カラーなど、読者に見てもらう必要があるための工夫が必要。
【アイキャッチの4つの役割】
- 記事がどういう内容か視覚的にわかりやすくする
- 複数回読んでくれる方の目印になる
- 関連記事として目に留まりやすくなる
- SNSなどの投稿画像に使われる
テキストリンクはクリック率が高い傾向にありますが、ことコンテンツに置いてはアイキャッチを見て判断する方も多く、特にデザインなどもかなりクリック率に影響してきます。
ワードプレスのサムネイルとは
画像はサイトFUSMのTOPで使用しているサムネイル例。
サムネイルはアイキャッチの画像をフィールドに入力した際にワードプレス内で自動生成される正方形の小さな画像（比率はカスタムによって変更可）。
記事一覧などを見る際に隣に小さな画像があったり、スライドショーに小さい画像があってクリックすると移動するなど見たことありませんか？
サムネイルとは、ユーザーの選ぶコンテンツの「ヒント」としての役割を持つ画像のことを言い、アイキャッチの「興味を引く画像」とは役割が違います。
ワードプレスの場合、アイキャッチをメディアに入れる際、同時に複数パターンのサムネイル画像を自動で生成しています。
これらは記事の一覧部分などに使われるもので、画像サイズを縮小・リサイズされています。
サイズがサイズなので、テキストを読ませることは難しい。つまり効果的に見せようとするとちょっと工夫が必要。
ワードプレスアイキャッチのベストサイズは？
サムネイルのサイズに関してはワードプレスの運用方法により推奨されるサイズに違いがでます。
- カスタムしていない場合：1200px_630px（比率＝1.91：1）
- OGPとアイキャッチを出しわける場合：750px_393px
①カスタムしていない場合
カスタムしていない場合、推奨されている画像サイズ（比率）を使ってアイキャッチを作成します。
推奨サイズ：1200px_630px（比率＝1.91：1）
↑この数値はOGP画像に推奨されるもの。
WordPressでアイキャッチを設定した場合、SNSに共有する際表示されるOGP画像はアイキャッチが流用される仕様になっています。
画像サイズが大きいので、どの端末で見ても十分な画質が担保されるのもメリットですね。
ただし、サイズが大きいので作った画像をそのまま使用してしまうと重くなる可能性があります。
webp形式にするなど軽量化する作業は必須！
②OGPとアイキャッチを出しわける場合
OGPとアイキャッチを任意で出し分けて表示することもできます！
カスタム無しの場合なら①のように「1200px_630px」のままでいいですが、OGPとアイキャッチを別々で表示できるようにしている場合、それぞれ2つの適正サイズで作り分ける必要があります。
OGPは通常サイズでOK！
アイキャッチに関しては、正直決まっている数値はありません！
PCとスマホ画像を出し分ける場合、
もっと設計できる考え方はありますが、概ね↑このサイズで作成するとボヤけることはないと思います！
やり方の1、つとして紹介させてもらいました基本的には↑上記はWordPress初心者取り組む内容ではありません。
新・旧エディタによるアイキャッチ設定方法
ワードプレスでアイキャッチはコンテンツ作成エディタ画面で設定することができます！
未だに根強い人気があるクラシックエディタとブロックエディタ（グーテンベルク）の2つのUI画面で説明していきますね！
旧・クラシックエディタでアイキャッチを設定
まずはクラシックエディタでの設定方法です！
人気テーマ「ザ・トール」などを使っている方は参考になると思うので是非ご覧ください。
- ①管理画面か編集画面を開き、右側アイキャッチ画像を選択
「アイキャッチ画像」のみで「アイキャッチ画像を設定」のリンクが表示されていない場合は下矢印で項目を表示できます。
- ②メディアライブラリ画像をアップする
アイキャッチリンクを選択するとメディアライブラリが開くので、「ファイルをアップロード」から任意の画像を選択してアップする。
ファイルアップ後は「alt」などの属性も設定できるので設定し、アップした画像を選択して「投稿削除入」すれば完了。
挿入した画像は「置換」・「削除」・「差し替え」も簡単にできるので気軽に設定して大丈夫です！
新・ブロックエディタ（グーテンベルク）でアイキャッチを設定
続いて最新エディタでのアイキャッチ設定方法。
といっても、大きく変わることはなく、UIの見た目が違うだけ！
- ①管理画面か編集画面を開き、右側アイキャッチ画像を選択
「アイキャッチ画像」のみでリンクが表示されていない場合は下向き矢印で項目を表示できます。
- ②メディアライブラリ画像をアップする
アイキャッチリンクを選択するとメディアライブラリが開くので、「ファイルをアップロード」から任意の画像を選択してアップする。
画像をアップロードしてからの流れはクラシックエディタと同じですね。
ただブロックエディタの場合、挿入してから画像ブロックを選択することで、メディアに入らずに「alt」設定ができます。
設定方法は以上！
アイキャッチの設定フィールドが表示されない場合
アイキャッチは多くのワードプレスのテーマでデフォルト設定がONの状態になっていますが、使い方を調べているうちにOFFにしてしまったり、初期設定で設定自体が無効になっていたりするテーマもあります。
その場合、編集画面の「表示オプション」が有効になっているかチェックをしてみましょう！
クラシックエディタの場合
- ①表示オプションで設定を開く。
- ②「画面上の要素」を確認する。
表示オプションをクリックすると複数のチェックボックス項目が表示されるので
- アイキャッチ項目がある
- チェックボックスにチェックが入っている
ブロック以上2つとも満たしているか確認してください。。
ブロックエディタ（グーテンベルク）の場合
- ①3つの点で設定メニューを開く。
「3点メニュー」をクリックするとメニューが開くので、下記にある「設定」を選択してください。
- ②設定からパネルをチェック
「設定」を選択すると「一般」「ブロック」「パネル」の3つがあるので「パネル」を選択。
- アイキャッチ項目がある
- チェックボックスにチェックが入っている
以上2つとも満たしているか確認してください。。
これだけでOK！
そもそもアイキャッチ項目が表示されていない
アイキャッチ画像項目がオプションの中になく、そもそもチェック選択ができない場合はワードプレステーマで有効化されていないかもしれません。
有効化するには↓以下のコードをfunctions.phpに書き込んでみてください。
※新しく追加するfunctiosコードは下へ下へ追加していくこと。くれぐれも他コードの間などに挿入しないように注意してください。
functions.phpの編集は自己責任でお願いします。
// アイキャッチ画像を有効にする。
add_theme_support('post-thumbnails');なお、「functions.php」ファイルはcssと違い繊細です。
書き方を間違えてしまったり、バージョンが合わなかったりするとエラーが出てしまうのでバックアップは必ずとって作業するようにしてください。
おすすめはFTPかサーバーのファイルマネージャーを使って編集すること。
ファイルマネージャーであれば、入力時にエラーが出ても、サーバーの管理画面からコードを消すだけで修正できると思います。
ワードプレスの管理画面から編集すると、管理画面自体表示されない可能性もあります。
ファイルに直接書き込める環境が維持できるものがおすすめ。
アイキャッチ項目がもし表示されていない場合、使っているのはシンプル系を謳うテーマでしょうか？
シンプルテーマは不必要な機能がそぎ落とされているものが多く、ゼロからカスタムしたい製作者には便利なものです。
逆をいうと、機能らしい機能が実装されておらず、自分で構造を設計してカスタムしていく必要があるということ。
ワードプレスに慣れておらず、構造把握もわからないのであれば、早い段階で他テーマへの乗り換えをおすすめします！
特に初心者さんは有料テーマ使った方がいいですよ。
管理画面からサムネイルサイズの設定
アイキャッチや、その他画像をメディアに入れるとサムネイルとして自動生成されるという話をしました。
この設定では、時自動生成されるサムネイルのサイズを指定することができます。
- ①管理画面の「設定」＞「メディア」
- ②「小」「中」「大」のサムネイルサイズを設定
テンプレートファイル内にあるサムネイルサイズの変更
初心者さんは使わないと思うので読み飛ばしてOKです！
管理画面で設定した数値はテンプレートファイル内にテンプレートタグとしても利用することができます。
<?php the_post_thumbnail( 'medium' ); ?> //中サイズ
<?php the_post_thumbnail( 'large' ); ?> //大サイズ
<?php the_post_thumbnail( 'full' ); ?> //フルサイズ
<?php the_post_thumbnail(array(100, 100)); ?> //任意指定値管理画面「メディア」で設定したそれぞれの数値が反映されます。また、任意指定のように、部分的にオリジナルサイズを作ることも可能。
サムネイル設定のテーマ変更時の注意点
上記のようにサムネイル画像サイズを設定後、テーマを変更する場合の話になります。
すでにサムネイルの数値設定後に生成された画像はテーマを変えた場合、自動的にそのテーマにマッチするように再生成されることはありません。
サムネイルの生成はテーマに依存するので、既存の記事でサムネイルのサイズが合わなくなった場合、変更後のテーマで再度生成する必要があるのは留意ください。
アイキャッチとサムネイルの違いと設定方法まとめ
アイキャッチとサムネイルの違い、それぞれの設定方法を解説してきました！
いずれも設定自体は簡単なんですが、アイキャッチとサムネイルの違いをあやふやにしたまま検索すると、やりたいことを見つけることが困難になるので是非違いは把握しておいてください。
まとめるとこんな感じですね！
以上っ！
今回はこんな感じで！
またね～
コメント