WordPressブログのトップ画像であるアイキャッチの設定方法と無料ツールを紹介

ブログを始めたばかりの方でトップ画像の設定方法がわからないという方いらっしゃるかと思います。

僕も最初わからなかったです。

なぜかというと、トップ画像を意味する名称を知らなかったからです。

その名は「アイキャッチ画像」。

聞きなれない言葉ですよね。

この記事では以下のような疑問を抱えている方に向けて書いています。

りょし

ブログのトップ画像ってどうやって設定するの？
アイキャッチ画像って何？
無料で使える画像サイトを教えてほしい
おしゃれなアイキャッチ画像を無料で作成する方法ってあるの？

それでは解説していきますね。

WordPressブログのトップ画像であるアイキャッチの設定方法と無料ツール紹介
1. アイキャッチ画像とは
2. アイキャッチ画像の設定方法
アイキャッチ画像作成時の無料ツールを紹介
アイキャッチ画像の無料ツールを使用しての手順を解説
まとめ

WordPressブログのトップ画像であるアイキャッチの設定方法と無料ツール紹介

アイキャッチ画像とは

まず冒頭でも少し触れたように記事のトップ画像を意味する名称を「アイキャッチ画像」と言います。

以下のようなものです。

※画像をクリックして拡大してください

読者がサイト内で読むか読まないかを判断する材料としては、「タイトル文」と「アイキャッチ画像」が対象となります。

そのためアイキャッチ画像は多少なりともPV数(ページ閲覧数)に影響します。

せっかくならサイトがおしゃれになるようなアイキャッチ画像を作りたいと思いますよね。

本サイトのアイキャッチ画像の作成手順を記事下部に解説しますので、よかったら試してみてください。

アイキャッチ画像の設定方法

ブログを始めたばかりでアイキャッチ画像の設定方法がわからないという方に向けて、

アイキャッチ画像の設定方法を解説します。

もう知っているという方は読み飛ばしてください。

→ 読み飛ばす

アイキャッチ画像の設定方法

手順 1
記事を開く
設定したい記事を開きます。
手順 2
右設定欄を下へスクロール
記事ページの右設定欄を下へスクロールします。
※画像をクリックして拡大してください
手順 3
『アイキャッチ画像を設定』をクリック
『アイキャッチ画像』項目の『アイキャッチ画像を設定』をクリックします。
※画像をクリックして拡大してください
手順 4
ファイルの呼び出し方法を選択
左上の『ファイルをアップロード』か『メディアライブラリ』を選択します。
まだWordpressで使用したことのない画像は『ファイルをアップロード』をクリックします。
※画像をクリックして拡大してください
手順 5
ファイルを指定
ファイルを指定します。
※画像をクリックして拡大してください
手順 6
情報入力
1. 『代替テキスト』を入力します。
2. 『タイトル』を入力します。
3. 『アイキャッチ画像を設定』をクリックします。
※画像をクリックして拡大してください
手順 7
完了
設定完了です。

アイキャッチ画像作成時の無料ツールを紹介

アイキャッチ画像を作成する際にオススメのツールをご紹介します。

アイキャッチ画像を作成おすすめツール

O-DAM：無料画像提供サイト
PNG to JPEG：拡張子変換サイト
JPEG圧縮：画像容量圧縮サイト
Power Point：Microsoftのプレゼン資料作成ソフト
Illustrator & Photoshop：Adobeの画像編集ソフト

アイキャッチ画像の無料ツールを使用しての手順を解説

それでは実際に僕がやっているアイキャッチ画像の作成方法をご紹介します。

アイキャッチ画像の作成手順

手順 1
無料画像提供サイトで画像をダウンロード
O-DAMなどの無料画像提供サイトで自分の好みの画像をダウンロードします。
※画像をクリックして拡大してください
→ O-DAMで画像をダウンロードしてみる
手順 2
Power Point か Adobeか
Power PointかIllustrator & Photoshopで画像を編集していきます。
僕は始めIllustrator & Photoshopを使用していましたが、今はPower Pointで作業しています。
Illustrator & Photoshopの方が細かい設定が可能ですが、
作業効率としてはPower Point の方が速いです。
ちなみに、Illustrator & Photoshopをお得にインストール出来る方法があるので、
もしIllustrator & Photoshopを検討されている方は参考にしてみてください。
Adobe IllustratorとPhotoshopを無料ダウンロードは可能？【お得な情報】
Adobe IllustratorやPhotoshopを使いたいが、高くてとてもじゃないけど購入出来ない。出来れば無料で使いたい。購入しても実際使用するかわからないし、使い方もわからない。何かお得な購入手段はないか...
blogoshiete.com
2020.02.01
手順 3
Power Pointをインストール
今回はPower Pointでの作業方法を解説していきますね。
まだPower Pointをインストールされていない方は、インストールすることをおすすめします。
→ Power Pointを試してみる
手順 4
画像を読み込む
Power Pointに先程ダウンロードした画像を読み込みます。
※画像をクリックして拡大してください
手順 5
タイトル文字を際立たせる
1.タイトル文字が際立たセルために、オートシェイプ(図形)で長方形を作成します。
※画像をクリックして拡大してください
2.『塗り潰し』の色を選択します。
※画像をクリックして拡大してください
3.透明度を75%程度にします。
※画像をクリックして拡大してください
手順 6
タイトル文字
タイトル文字を入力します。
僕の好みの字体は『筑紫A丸ゴシック』です。 (PCはMacを使用)
※画像をクリックして拡大してください
手順 7
スクリーンショット
スクリーンショットで画像を抽出します。
手順 8
JPEGに変換
スクリーンショットで抽出した画像拡張子が「png」の場合画像容量が大きいため、
『PNG to JPEG』でJPEGに変換します。
→ PNG to JPEGでJPEGに変換する
画像データ容量の重要性
サイトにアクセスした際、読み込みが1秒遅いと20%の離脱率となります。
つまり、100人アクセスしてくれても20人に読まれなくなってしまうということです。
読み込みが遅い原因としては、多くは画像容量が大きいことが多いです。
なので、画像をアップロードする際は出来る限り容量を減らしましょう。
ちりも積もれば山となるです。
手順 9
JPEG圧縮
必要に応じてJPEG圧縮で容量を減らします。
(もとのデータ容量が少ない場合、圧縮しても容量が変わらない場合もあります)
→ JPEG圧縮で容量を減らす
手順 10
画像作成完了
これでアイキャッチ画像作成完了です。
あとは記事に載せるだけです。
アイキャッチ画像の設定方法がわからない方は以下で確認してみてください。
→ 作成した画像をアイキャッチ画像として設定する