ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress】アイキャッチとサムネイルの違いを解説!プラグインで再生成も可能

アイキャッチとサムネイルの違い

ブログにおける「アイキャッチ」と「サムネイル」という言葉の違いがわかりますか。ブログの画像や写真は記事を引き立てるためにも重要な存在です。今回はこの違いと関連プラグインについてまとめてみました。

ゆめぴょん(@yume_pyon)です。こんちはっ!

ブログ記事では文章の内容が一番大切だと言われます。そして適切な画像や写真を付けることにより、文章をより一層わかりやすくしたり、魅力的に見せたりすることが可能です。

アイキャッチとサムネイルの違い

ブログ作成の記事、特に画像の設定について読んでいると「アイキャッチ」や「サムネイル」という言葉がよくあらわれます。最初はわかってるつもりだったのに、慣れない人は混乱してくることでしょう。

「アイキャッチ」とは通常はブログ記事の最初に表示する画像で、記事内容をひと目で連想しやすくするために設置します。

「サムネイル」とは、アイキャッチ画像の縮小版です。記事の一覧を表示する場合などに、記事を象徴する画像として表示することが多いです。又はページのスクリーンショットの縮小版を指すこともあります。

ちなみに、アイキャッチ画像はわざわざ縮小(サムネイル化)しなくても利用することが可能です。しかし縮小した方が容量も転送量も小さくなるので、表示速度の高速化につながります。

だからアイキャッチを縮小したサムネイルが必要となるのです。WordPressには1つのアイキャッチ画像に対して、標準では3種類の大きさのサムネイルを自動生成する機能があります。

英語圏では、アイキャッチのことを「post thumbnail」(投稿サムネイル)や「Featured Image」と呼ぶようです。英語のプラグインの名称や設定でこのような項目名があれば、アイキャッチ画像のことだと思えばいいでしょう。

アイキャッチとサムネイルの作成方法

アイキャッチの作成方法

記事にアイキャッチを設定する方法は次の3通りあります。

  1. 記事の投稿画面でアイキャッチ画像をアップロードする
  2. 記事の投稿画面でアイキャッチ画像をメディアライブラリから選択する
  3. プラグイン「Auto Post Thumbnails」で自動的に一番最初の画像を設定

プラグイン「Auto Post Thumbnails」については下の記事も参考にしてみてください。

【WordPress】Auto Post Thumbnailでアイキャッチやサムネイル画像を自動設定!過去記事も【WordPress】Auto Post Thumbnailでアイキャッチやサムネイル画像を自動設定!過去記事も

「Auto Post Thumbnail」は新規投稿だけでなく過去記事のFlic…

【WordPress】メディアライブラリ追加の初期設定の変更方法!画像サイズなど【WordPress】メディアライブラリ追加の初期設定の変更方法!画像サイズなど

WordPressのブログで写真・画像を追加する時に、メディア・ライブラリから選…

サムネイルの作成方法

まずサムネイル画像のサイズを指定する方法は2通りあります。

  1. WordPress管理画面「メディア」で3種類のサイズを指定できる
  2. テーマファイル「functions.php」でサイズを設定する

「1」はWordPress管理画面「設定」→「メディア」で「小」「中」「大」の3種類のサイズを指定できます。トリミングにチェックするとその大きさで切り取ります。「変更を保存」を忘れずに。

「2」はいくつでも自由に設定できます。例えば「middle」という名前で「横200x幅100」のサムネイル画像を作成したい場合は、functions.phpに次のように記述します。

2行目のように4つめの引数を「true」にすると、トリミング(切り取り)します。「false」か空白なら切り取らずに縮小します。

ちなみにこのサムネイル「middle」を表示したい場合は、HTMLに次のように記述するだけです。

そして上で指定したサイズのサムネイルは、次のタイミングで生成されます。

  1. アイキャッチを設定すると自動的に作成される
  2. プラグイン「Regenerate Thumbnails」でサムネイルを再生成

プラグイン「Regenerate Thumbnails」については下の記事も参考にしてみてください。

【WordPress】Regenerate Thumbnailsでアイキャッチのサムネイル再生成!高速化にも貢献【WordPress】Regenerate Thumbnailsでアイキャッチのサムネイル再生成!高速化にも貢献

WordPressプラグイン「Regenerate Thumbnails」はアイ…

まとめ:今日のゆめぴょんの知恵

アイキャッチとサムネイルの違いについて、私なりに整理して書いてみました。しかし調べていると権威ありそうなブログでも「サムネイル」のことを「アイキャッチ」と混ぜて記述している場合が見つかります。

もしかすると私の認識違いの可能性もありますので、その場合は指摘していただけるとうれしいです。

生成したサムネイルを利用した例についての記事もあります。興味ある方は読んでみてください。

WordPress Popular Postsでサムネイル画像付き人気記事一覧の表示方法WordPress Popular Postsでサムネイル画像付き人気記事一覧の表示方法53 shares

「WordPress Popular Posts」は記事の下やサイドバーにブログ…

WordPress Newpost Catchで新着記事一覧!カテゴリ別サムネイルつきでWordPress Newpost Catchで新着記事一覧!カテゴリ別サムネイルつきで15 shares

WordPressプラグイン「Newpost Catch」を使うとサムネイル付き…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【WordPress】FacebookのOGPとTwitterCardsに固有タイトルを設定!プラグイン不要でrobots.txtの設置方法!SEOとセキュリティ対策。WordPress用も紹介:次記事»
ページ
↑先頭
ホーム