ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2018年5月26日webcode編集部FacebookTwitterはてブPocketFeedlyあなたのWebサイトではアイキャッチが用意されているでしょうか?アイキャッチを用意することで、多くの人々がWebサイトに訪れてくれたり、投稿記事を見てくれたりします。そこで今回は、Wordpressでのアイキャッチの設定方法についてお伝えします。WordPressのアイキャッチ画像に関するまとめアイキャッチとは?まずは「アイキャッチとは何なのか」理解していきましょう。アイキャッチは、ターゲットとなるユーザーの注意を引いて記事に誘導させ、クリック意欲を刺激することなどを目的とした画像イメージです。(LIGより)Webサイト上においては、画像の配置やレイアウト、ユーザーを引き付けるような画像やアイコンのことを「アイキャッチ」と呼んでいます。簡単に言うと、ユーザーの目を引き付けるための画像です。アイキャッチ画像を設定することによって、SNSでシェアした際にURLと一緒に画像が表示されるようになります。画像が一緒に表示されることで、より多くのユーザーがあなたのサイトに訪れるようになるでしょう。アイキャッチ画像とサムネイル画像の違い続いて、アイキャッチと間違えられやすいのがサムネイルです。サムネイルとは、いくつかの画像や動画などの読み込みに時間のかかる情報を大まかに把握するために作られた縮小画像のことを指しています(ferretより)。アイキャッチとサムネイルの大きな違いは、「画像が縮小されているかどうか」です。サムネイルは、アイキャッチ画像を縮小してサムネイル画像として表示しています。実際に2つの画像を見比べてみましょう。赤枠で囲んであるのが「アイキャッチ画像」、青枠で囲んであるのが「サムネイル画像」です。FacebookやTwitterでシェアしたときに表示する画像を「サムネイル画像」と呼ぶこともありますので、混同しないように注意しましょう。アイキャッチ画像をプラグインで自動生成する方法ここからは、WordPressでのアイキャッチ画像の使い方についてお伝えします。通常、WordPressでアイキャッチ画像を設定する場合は、記事作成中にアイキャッチ画像を設定する必要があります。これって意外と面倒な作業ですよね...。そんな面倒な作業を省くことができるのです。Thumbnail」というプラグインです。このプラグインのインストールと有効化をしましょう。プラグインの細かな設定は一切ないので、プラグインの有効化さえ行えば、すぐに使えるようになります。Thumbnailを使う上で1つだけ注意点があります。それは、記事本文の中に画像を使うことです。記事本文の中で最初に使用した画像をアイキャッチ画像として設定してくれます。そのため、記事本文の中に画像が1枚もなければ、アイキャッチ画像は表示されることはないのです。Thumbnailには、「過去の記事のアイキャッチ画像も一括で設定できる」という便利な機能が用意されています。この機能は有効化しただけでは反映されません。Thumbnail」をクリックして設定画面に移動しましょう。Thumbnails」をクリックしてください。これだけで、過去の記事にもアイキャッチ画像が設定されます。アイキャッチ画像のサイズを自由に設定する方法WordPressの場合は、デフォルトでアイキャッチ画像やサムネイル画像のサイズが指定されています。左側のメニューの「設定」→「メディア」で確認できます。この画面でサイズ変更してしまうと、他の投稿ページでの画像のサイズもすべて変わってしまいます。縦横比率がバラバラになってしまい、画像のバランスも悪くなってしまいます。この画面では極力変更しないようにしましょう。好みのサイズに設定するためには、「functions.php」に以下のコードを追記しましょう。コードに記載されているサイズは変更してOKです。以下のコードでは、「90×90」、「615×115」、「150×75」の3種類のサイズのアイキャッチ画像を追加して定義する設定です。);}サイズは自由に設定できますが、以下の注意点には気を付けてくださいね。サイズの単位はすべてpx(ピクセル)幅×高さの順に記述する「,true」と記述すると、切り抜き指定できる(切り抜きしたくない場合は「,true」は記述しない)それぞれの指定要素はカンマで区切る必要なサイズのみ記述する(多く記述すると、その分画像が作成されてデータ量が多くなってしまう)この5つの注意点に気を付けて設定してください。続いて、アイキャッチ画像を表示させたい場合は、「the_post_thumbnail()」と記述すればOKです。実際には、アイキャッチ画像が正しく登録されているかどうか調べてから出力します。'/images/thumbnail.png">';}?>ただし、この記述では、<img>タグ付きで画像が表示されてしまいます。URLだけを取得して表示させたい場合は以下の方法で行いましょう。使う関数は以下の2つです。wp_get_attachment_image_src()(登録したアイキャッチ画像のパス、サイズを配列で返す)get_post_thumbnail_id()(アイキャッチ画像のIDを取得する)「wp_get_attachment_image_src()」で取得できる配列の中身は以下の3つです。height見ていただくとわかるかと思いますが、画像の「URL」、「幅」、「高さ」の3つが格納されています。以下のコードを記述することで、アイキャッチ画像のURLだけを出力することができます。先ほどはURLだけを取得する方法をお伝えしました。それを踏まえて、ここではパスとURLの両方を取得する方法をお伝えします。パスの取得を取得しましょう。テンプレートタグの「get_post_thumnail_id」を使って取得できます。?>これでパスの取得ができました。次に、URLを取得する方法を記述すればOKです。記述するコードは、URLだけを取得する方法のときと同じように記述してください。アイキャッチをトリミングしてサイズを調整する方法アイキャッチ用の画像をトリミングして、サイズを調整したい場合もあるでしょう。そんな時は、まずは「functions.php」に以下のコードを記述して、アイキャッチ画像を使えるようにしましょう。次に、表示サイズを指定するコードを記述します。数値は縦幅、横幅の順に記述します。「true」は、画像をトリミング(切り抜く)場合のみ記述してください。);今回の場合は、アップロードした画像(640×480)の比率を変えずに縮小(520×390)に縮小してから余りの部分をカットして、520×220のサイズに自動で行います。);このように「true」を記述しない場合は、自動リサイズすることになります。縮小する際に縦横比が変わってしまいます。そのため、足りない部分が出てしまうことがあります。続いて、時折記事内にはアイキャッチ画像を表示したくないこともあるでしょう。そんなときに、アイキャッチ画像を非表示にする方法を紹介します。アイキャッチ画像を非表示する方法は、以下の2つの方法があります。詳細オプションで設定する「single.php」で設定する詳細オプションで設定するこの場合、直接コードを編集しなくて済むので、簡単に設定できます。テーマによっては「詳細オプション」がない場合があります。その場合は「single.phpで設定する」方法を参考にしてください。アイキャッチを非表示」とクリックします。完了したら、変更を保存しましょう。single.phpで設定するこの場合は、直接コードを編集して、設定する手順で行います。「single.php」にある以下のコードをコメントアウトまたは削除してください。?></div>これで、アイキャッチ画像を非表示にすることができます。非表示設定になっているまず、アイキャッチ画像が非表示になっていないか確認してみてください。確認するためには、投稿画面の右上にある「表示オプション」を開きましょう。アイキャッチ画像にチェックが入っていない場合は、チェックを入れましょう。使用しているテーマでサポートされていないあなたが今使っているテーマで、アイキャッチ画像が有効になっていないことも考えられます。アイキャッチ画像の機能が有効になっていないと、アイキャッチ画像の設定や表示ができません。そんなときは、「functions.php」の最後に以下のコードを記述してみましょう。add_theme_support('post-thumbnails');1add_theme_support('post-thumbnails');これで、アイキャッチ画像を有効化することができます。Facebookでシェアした時にアイキャッチが表示されない場合は?正しくアイキャッチ画像を設定していても、Facebookでシェアしたときに表示されないことがあります。基本的には3つの原因が考えられます。OGPイメージの設定ができていないFacebookのクローラーに投稿した記事が読み取ってもらえていない画像のサイズが最適ではない(最適なサイズは728×381)原因について理解したところで、対処法を紹介します。その前にOGPイメージについて簡単に説明しておきます。Protocol)とは、FacebookなどのSNSでリンク先のWebページの内容を紹介するための規格です。Facebookが提唱された規格ですが、はてなブックマークやGoogle+などにも利用されています。これによって、実際にページにアクセスしなくても、Webページの内容や「誰が書いた記事なのか」という情報を知ることができます。Pack」のインストールと有効化を行いましょう。有効化できたら、「機能管理」をクリックしてください。その中の「ソーシャルメディア」の「アイコン」または「Active」クリックして有効化します。Pack」の準備は完了です。記事にOGPイメージを設定するまずは、アイキャッチ画像が正しく反映されていない記事で、投稿編集画面を開きましょう。次にアイキャッチ画像を設定しましょう。アイキャッチ画像ができたら、既に公開している記事の場合は「更新」、または新しい記事での場合は「下書きとして保存」をクリックしましょう。Pack」の設定画面が出てきます。その中の「ソーシャル設定」のタブをクリックしましょう。その中の「画像」でFacebookに表示させたい画像を選択してください。これでOGPイメージの設定は完了です!WordPressのアイキャッチ画像に関するまとめ以上、いかがでしたか?今回は、アイキャッチ画像の自動設定方法や、アイキャッチが表示されない場合の対処法などを中心にお伝えしました。アイキャッチとサムネイルは同じような意味で使われることも多いですが、意味は違うことだけは覚えておきましょう。最後まで読んでいただき、ありがとうございました。FacebookTwitterはてブPocketFeedly関連キーワードwordpressWordPress(ワードプレス)の関連記事wordpressテーマは有料と無料どっちがおすすめ?初心者が迷った時の選び方2020年1月10日ワードプレスのレンタルサーバー移行でデータベースを移動する方法2020年1月4日ヘテムルでワードプレス複数サイト運営はおすすめ?費用を他社サーバーと比較2020年1月4日wordpressのビジュアルエディタで改行できない時の4パターンの対処法2020年1月4日ワードプレスの日本語有料テーマで初心者におすすめ15選を紹介wordpressでのサイト作成手順を知識ゼロの初心者に1から説明してみたおすすめの記事WordPress(ワードプレス)WordPress初心者がエックスサーバーで企業ホームページを作る方法を解説WordPress(ワードプレス)の構築手順が分からない...Wordpressの公式サイトをみても良く分からない...この記事を読まれている方の中...WebデザインIllustratorとPhotoshopの違いは?使い方を初心者向けに解説Webデザインに興味のある方であれば、「Illustrator」や「Photoshop」を一度は耳にしたことがあると思います。そこで今回は...WordPress(ワードプレス)WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめWordPressを使っていると、自分だけのオリジナルのデザインにしたり、自社のみのプラス機能をつけたいという時が出てきます。「ただ、でき...レンタルサーバーConohaWingの登録方法から独自ドメインの設定方法を解説!ムームードメインなどの場合は?表示が早くてコスパが良いレンタルサーバーとして、GMOインターネットが提供している「ConohaWing(このはウィング)」が話題になりつつ...Webデザイングリッドレイアウトの作り方!リキッドレイアウトにおすすめwebデザインの業界で、最近はデザイン手法にもトレンドがあります。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。