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

アイキャッチ画像BLOG

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

アイキャッチ画像とは

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

以下のようなものです。

アイキャッチ画像とは

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

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

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

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

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

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

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

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

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

→ 読み飛ばす

アイキャッチ画像の設定方法
  • 手順 1
    記事を開く

    設定したい記事を開きます。

  • 手順 2
    右設定欄を下へスクロール

    記事ページの右設定欄を下へスクロールします。

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

  • 手順 3
    『アイキャッチ画像を設定』をクリック

    『アイキャッチ画像』項目の『アイキャッチ画像を設定』をクリックします。

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

  • 手順 4
    ファイルの呼び出し方法を選択

    左上の『ファイルをアップロード』か『メディアライブラリ』を選択します。

    まだWordpressで使用したことのない画像は『ファイルをアップロード』をクリックします。

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

  • 手順 5
    ファイルを指定

    ファイルを指定します。

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

  • 手順 6
    情報入力
    1. 『代替テキスト』を入力します。
    2. 『タイトル』を入力します。
    3. 『アイキャッチ画像を設定』をクリックします。

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

  • 手順 7
    完了

    設定完了です。

スポンサーリンク

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

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

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

アイキャッチ画像を作成おすすめツール
スポンサーリンク

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

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

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

アイキャッチ画像の作成手順
  • 手順 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を検討されている方は参考にしてみてください。

  • 手順 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
    画像作成完了

    これでアイキャッチ画像作成完了です。

    あとは記事に載せるだけです。

    アイキャッチ画像の設定方法がわからない方は以下で確認してみてください。

    → 作成した画像をアイキャッチ画像として設定する

スポンサーリンク

まとめ

今回は、アイキャッチ画像の設定方法や作成手順をご紹介しました。

アイキャッチ画像は多少なりともPV数(ページ閲覧数)に影響するので、

みなさんも是非試してみてください。

人気記事 【2020年最新】おしゃれでSEO対策されたおすすめのWordPressブログデザインテーマ9選

人気記事 【稼げる案件あり】おすすめASPをご紹介

この記事を書いた人
しょし

僕はどこにでもいるただの「しょし」です。
ブログを勉強しながら備忘録として執筆中。
大学でプログライングを勉強→就活で150社落ちる→入社したがパワハラで円形脱毛8個できる→6年間世界各国で仕事をする→帰国しパワハラにあう→休職→ブログ設立/ブログ、ガジェット、人生論など執筆。

しょしをフォローする
BLOG
スポンサーリンク
しょしをフォローする
Shooo blog

コメント

タイトルとURLをコピーしました