ライターのナナミです。ブログの一覧で、こんな感じで画像が一枚表示されているのって見たことありませんか?画像でブログの内容をなんとなく想像できて、ちょっと見てみようかなってなりますよね。この画像、自分のブログにも設定したい...WordPressでこんな感じの画像って設定できるのかな...とお悩みの方、今回の記事は必見ですよ!一覧で表示する画像、アイキャッチについて解説していきます。この記事は下記の流れで進めていきます。まとめアイキャッチとは?アイキャッチとは、ブログの一覧に表示する画像です。このような画像が目に留まると「お、これはこういう記事なのかな?」と感覚的な情報が入ってきます。タイトルと合わせて、ユーザーの心をキャッチする要素となるわけです。どのような画像がいいのかアイキャッチは、画像ならなんでもいいというわけではありません。その記事の内容と関連する画像がベストです。自分が飼っている犬の自慢をする記事を書くとしましょう。なるとユーザーは「この記事は猫の記事なの?犬の記事なの?」と混乱してしまいます。そんな記事は読む気も無くなってしまいますよね。アイキャッチ画像は、記事の内容と合わせたものをチョイスするようにしましょう。アイキャッチを設定しようWordPressには、アイキャッチを設定する項目がすでに実装されています。設定方法を見ていきましょう!アイキャッチの項目の場所アイキャッチを設定する項目は、記事投稿画面の右下にあります。表示されていない場合は、記事投稿画面の上の方にある表示オプションをクリックしてみましょう。投稿画面に表示できる項目が、チェックボックスと一緒に表示されていますね。ここのアイキャッチ画像にチェックを入れれば、アイキャッチの設定項目が表示されます。画像を選ぼうアイキャッチ設定項目のアイキャッチ画像を設定を押してみましょう。すると、アイキャッチ画像を選ぶ画面が表示されます。ここで、アイキャッチ画像をアップロードしたり、選んだりすれば設定は完了です。超簡単ですね!画像のアップロード方法などについては、下記の記事で詳しく解説しています。併せて読んでみてください。>>これを読めば全てがわかる!WordPress画像設定徹底解説アイキャッチを表示しよう配布されているテーマなどで、すでにアイキャッチに対応しているものも多くあります。その場合は、記事ごとにアイキャッチ画像を設定するだけですぐに表示してくれます。テーマによってはアイキャッチに対応していなかったり、そもそもテーマを自作している場合もありますよね。そんな時のために、WordPressの独自コードでアイキャッチを表示するものがあります。アイキャッチを表示するコードアイキャッチ画像を表示するには、the_post_thumbnail()というコードを使用します。使い方は簡単、アイキャッチを表示したい箇所に下記のように記述するだけです。?>カッコの中には、大きさを指定する記述を入れます。このコードはループ内でしか使うことができません。ループとは、記事の一覧を表示するための仕組みです。記事の情報を繰り返し取得することで、同じ形で繰り返し表示になるようにしています。このループの中に入れないと、コード自体がどの記事のアイキャッチを表示すればいいのかわからなくなってしまうのです。the_post_thumbnail()はループ内で使う、しっかり覚えておきましょう!ループってなんだっけ...という方は、下記の記事で確認してみてくださいね。https://wp-exp.com/blog/loop/指定できる大きさカッコの中で指定できる大きさは、下記の通りです。指定した数値のサイズで表示します数値を指定するもの以外は、シングルクォーテーションで囲む必要があります。詳しく知りたい方は、リファレンスを参照してみてください。thumbnail設定を楽チンにするプラグインここまでの情報でも、十分アイキャッチを活用することができます。プラグインを使うと、もっと便利にすることが可能です。Thumbnailを使ってみましょう。このプラグインは、投稿で使われている一番最初の画像をアイキャッチとして自動で設定してくれるものです。これでうっかり設定を忘れても一安心ですね。最近プラグイン自体が更新されていないようです。動作自体はするのですが、使う際には注意した方がいいかもしれません。Generatorhttps://ja.wordpress.org/plugins/featured-image-generatorアイキャッチ画像選びで迷う...画像をちょっと加工したいんだけど、他のソフトを開くのは面倒...という方はこちら!管理画面上で画像を選んで、加工までできちゃう優れものです。文字を入れたりもできるので、アイキャッチ画像の幅が広がりますね。Thumbnailshttps://ja.wordpress.org/plugins/regenerate-thumbnails画像サイズを変えたいんだけど、いちいち一つずつやるのは大変...そんな方の強い味方。全ての画像を一括でリサイズできるプラグインです。大量の画像でも、これ一つでぜーんぶリサイズしてくれます。時短になりますね!まとめいかがでしたか?アイキャッチはブログに必須ではありません。設定することでブログがより魅力的になるのは間違いなしです!ぜひこの記事を活用して、アイキャッチを設定してみてくださいね。TweetPocket「プログラミング、右も左もわからない...」という方にオススメ当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。フリーターを経てフロントエンジニアになる。jQueryなどのコーディングやCMS設計に従事。文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。体は日本酒でできている。Reserved.現役生徒500名以上が在籍する弊社のプログラミング学習プランをあなたに合わせて最短1分で診断します。