広告

【アイキャッチ画像の作り方・適正サイズ】を調べてみた!!

4570_how-to-eye-catch-image-size-1a

初めてでも10分でできるアイキャッチ画像の作り方

画像の検索・編集からWordPressブログ記事への貼り付けまでを"1"から解説!

こんにちは "osaboo"です。"@osaboo_Bot"

Question

アイキャッチ画像の作り方がわからない。

そもそも「アイキャッチって何」「必要なの…」
アイキャッチ画像のWordPressブログへの挿入(設定)が分からない。
アイキャッチ画像の作り方「注意点は?」

\この様な問題を解決します!/

画像の選択やデザイン編集には時間かかるけど…
アイキャッチ画像をブログに貼ったり変更したりは簡単だよ。

osaboo

アイキャッチ画像の用途と必要性

4570-103

「アイキャッチ画像」とは文字通り「目を引く画像」のことで、読者の目に留まった時に興味を持ってもらい 観覧・購読などを促すことを用途とします。

記事やサイトの第一印象を良くするために使う!みたいなイメージかな。

osaboo

アイキャッチ画像が無くてもサイトや記事は、成立するので「必須」ということではありません…が!
ブログを含むSNSやウェブサイトで「アイキャッチ画像=目を引く画像」は各々のアクセス向上に大きく影響があります…なので必須ではないですが有効手段としてあった方が良いということです。

説明が…硬い??
アイキャッチ画像は作るべきってことだね。
記事のアイキャッチにしろサイトの雰囲気にしろ、とっかかりは画像から得た情報の方が大きいもんね。
基本的なアイキャッチ画像の作り方を次の章で説明するよ。(ここから本番)

osaboo

アイキャッチ画像の作り方(画像ダウンロード・編集ソフト等)

4570-101

当サイトで採用している「画像サイト」と「画像編集ソフト」をご紹介します。

画像ダウンロード【おすすめサイト2個!】

まずはどんな画像があるか確認してみましょう。(おすすめ2サイト)
イメージに沿ったものがきっと見つかるかと…

  1. pixabay
  2. O-DAN

「pixabay」は、画像量がとても豊富で探しやすいです。(イメージ画像を探すのに最適)
「O-DAN」は、とにかくオシャレでセンスが良い。(管理人は大好きです。)

無料で使える画像編集ソフト【おすすめ2個!】

まずは無料で使えるツールを入手しよう。(おすすめは3個)

Canva

Mac用のAPPはこちらから

4570-1

Canva for Mac

Windows用のインストールはこちらから

4570-2

Canva for Windows

PhotoScape X

Mac用のAPPはこちらから

4570-3

PhotoScape x for Mac

Windows用のインストールはこちらから(Windows 10を選択)/(Macも選択できます)

4570-4

PhotoScape x for Windows or Mac

7038_usage-of-canva-1
Canva の基本的な使い方をブログ初心者が ”1” から解説!

アイキャッチ画像をcanvaを使って簡単に作る初歩的手順をご紹介。Mac・Windowsそれぞれのアプリケーションダウンロード先のリンクも記載して初心者向けにチョー分かりやすくご紹介。取っ掛かりでつまづかないように分かりやすく解説。是非お役立て下さい!

記事詳細はこちら

7042_usage-of-photoscape-x-1
PhotoScape X の基本的な使い方をブログ初心者が解説!

アイキャッチ画像や記事説明用の画像のPhotoScape X を使った作成手順をAPPのインストール「URL」・画像作成手順・保存・よく使うメニュー・注意すべき点等を画像をふんだんに使って「画像編集は初めて!」という方にも分かりやすくご紹介。

記事詳細はこちら

アイキャッチ画像のWordPressブログへの挿入(設定)手順

4570-104

記事トップにアイキャッチ画像を挿入する手順

『WordPress管理 > 投稿』からアイキャッチ画像を挿入したい記事を選択します。

記事編集画面で『投稿』タブ >『アイキャッチ画像を設定』をクリックします。

4570-5
yajirusi-sita-001

メディアライブラリにファイルがある場合は①を新しくアップロードする場合は②のタブをクリックします。

4570-6
yajirusi-sita-001

『ファイルをアップロード』タブを選択すると以下の画面が表示されるので①の状態を確認して②をクリックします。

4570-7
yajirusi-sita-001

PC等のフォルダからファイルをアップロードします。
ファイルはメディアライブラリに保管されるのでアップロードが完了すると次の画面が表示されます。

yajirusi-sita-001

①〜③の順に処理します。

4570-8

補足

ファイルのアップロードが完了するとタイトル以外は空欄になっています。SEO・トラブル等の対策として「上画面の右側の3箇所」は記入しましょう。

yajirusi-sita-001

アイキャッチ画像が正常に挿入されると以下の画面が表示されます。

4570-9

以上でアイキャッチ画像が記事のトップに挿入されました。

記事の本文に画像(アイキャッチ画像)を挿入する手順

記事の途中で「見出しタグ(hタグ)」の下に画像(アイキャッチ画像)を入れたいことって多々ありますよね…この章で手順をご紹介します。

記事編集画面でブロック挿入箇所を指示してブロックを追加『+』をクリックします。

4570-10
yajirusi-sita-001

ブロックタブの①『画像』をクリックした後に②『メディアライブラリ』をクリックします。

4570-11
yajirusi-sita-001

もし以下の画面に切り替わったら、もう一度『メディアライブラリ』をクリックします。

4570-12

※ 慣れるまではメディアライブラリに読み込んだファイルを確認してからアップロードした方が重複等を防げると思うので上画面赤矢印部を選択しています。

yajirusi-sita-001

メディアライブラリタブをクリックします。

4570-13

※ 重複ファイル等がないことを確認し、『ファイルのアップロード』をクリックします。
必要なファイルが既にある場合はここで選択します。

yajirusi-sita-001

ファイルをアップロード>PCファイルフォルダよりファイルをクリックします。
(以下の画面からファイルをクリックします。)

4570-14

補足

ファイルのアップロードが完了するとタイトル以外は空欄になっています。SEO・トラブル等の対策として「上画面の右側の3箇所」は記入しましょう。

以上!記事の本文に画像(アイキャッチ画像)を挿入する手順でした。

アイキャッチ画像の作り方 ▶︎「注意点」

4570-102
  • アイキャッチ画像のサイズを揃える。
    例えば「1200x630px」で統一する等。
  • 記事の内容が「アイキャッチ画像と見出しタグ」をみただけでイメージできるようにする。
    例えば「WordPressテーマのAFFINGER6」に就いての記事だとすると、キャラクターデザインの「ライオン」をベースに画像を作り込む等、記事に沿ったアイキャッチ画像を作りましょう。
  • ファイルサイズを小さくするように心がける。
    画像サイズを必要以上に大きくしないのはもちろんですが、画像に付加されている位置情報等の不要な情報を削除してメディアライブラリに取り込むのも有効です。また、プラグインで画像を軽量化するソフトを使用して(webP)等に変換するのもおすすめです。←以下の記事にてご紹介しています。是非ご覧ください。「EWWW Image Optimizer」
  • ファイル形式はなるべく同一とする。
    記事が増えていくとアイキャッチ画像に限らず、画像は膨大な量になるのである程度拡張子を揃え「ファイル種別」を意識しましょう。(画像変換プラグインを使わない場合は特に)
  • 大きい容量の画像は(.JPG)が良い。
    (.PIN)より(.JPG)の方がファイルサイズが小さい場合が多いです。
  • 半透明を使うなら(.PIN)が良い。
    (.JPG)物によって半透明にならない物がります。「未確認多々あり」

以下の記事にて、画像を(webP)軽量化するプラグインをご紹介しています。
「EWWW Image Optimizer」をインストールしましょう!!
是非!合わせてご覧ください。

0651_wordpress-plugin-putin-all-1
WordPress(ワードプレス)最初に入れるべきプラグインはこれ!

WordPressのインストール時に自動で追加されたプラグインと最初に追加しておきたいおすすめプラグイン各々のプラグインの役割とおすすめな理由を解説します。プラグインはとても便利だけど、何でもかんでも入れるのは危険! 必要最小限のものを入れよう。

記事を詳しく…はコチラ!

EWWW Image Optimizer

Google検索の結果上位の推奨サイズはすべて1200×630pxが最も適した画像としています。

参考までにweb・SNSの表示サイズは以下のようになります。

  • Googleの推奨幅が1200px
  • Twitterの表示サイズが2:1(アプリは4:3までOK)
  • Facebookの表示サイズが1.91:1

以上!アイキャッチ画像の作り方 ▶︎「注意点」でした。

10925_start-blog-005-0a
アフィリエイト初心者向け【収益化する為のお役立ち”Book”集めてみた!24冊】

アフィリエイトに役立つ『おすすめ書籍(本)』をピックアしました。超初心者でも読みながら実践すれば初心者を卒業できる。あなたのブログ・サイトにアフィリエイトのノウハウを盛り込んでSEOに強く、収益が増えるブログ・サイトに!そのためには…書籍(本)片手に基礎をしっかりお勉強!?

記事詳細はこちら

「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

AFFINGER6 購入 ▶︎ 詳しくはこちら

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

まとめ!【アイキャッチ画像の作り方・適正サイズ】を調べてみた!!

今回はアイキャッチ画像の必要性・ベース画像の入手先・画像編集ソフトのご紹介・注意点を駆け足で記事にしました。サイトを運営していく中で早い時期に自身のサイトの標準化(統制)をする上でお役に立てて頂ければ幸いです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/