今日はアイキャッチ画像(記事のタイトル画像)を作成してWordpressにアップロードするまでを詳細に解説していきます。
記事下の動画では、記事とは別で、(有名人のまとめ記事)用のアイキャッチ画像作成方法を動画で実演しています。

この記事で完成させたアイキャッチ画像

Wordpress 記事 アイキャッチ画像 作り方 サイズ
アイキャッチ画像とはこの記事で言うところの、一番最初の先頭にあるこの画像になります。
人は文字よりも画像(ビジュアルコンテンツ)を最初に認識して判断を下していきますので、アイキャッチ画像は人の興味を引くために非常に重要な要素となります。
http://iborc.com/the-importance-of-learning-the-visual-content-production-skills-html/

アイキャッチ画像が記事毎に設定できるWordpressテンプレート(テーマ)の選び方


Wordpressのダッシュボードで「外観」⇒「テーマ」⇒「新規追加」⇒「特徴フィルター」を選択し、上の画像のテーマのフィルタリング設定画面に行きます。
「アイキャッチ画像」のチェックボックスにチェックを入れて(他の希望のチェックボックスにもチェックを入れてから)、画面を下にスクロールして「フィルターを適用」ボタンをクリックします。
出てきたWordpressテーマの中から好きなものを選んでください。

使用中のWordpressテンプレート(テーマ)のアイキャッチ画像のサイズを測る

Wordpress アイキャッチ画像を設定
記事の投稿の編集画面の右下にある「アイキャッチ画像」BOXの「アイキャッチ画像を設定」ボタンをクリックします。
まず最初にサイズを測る為に明らかに大きい画像を使用します。
何でもよいのですが、大まかにですが「1200×800」ピクセル以上の画像を「アップロード」ボタンを押してアップロードしてもう一度「アイキャッチ画像を設定」ボタンをクリックして設定します。
どのような画像を使用したらよいかわからない場合は、無料で自由に商用利用、改変が可能で、著作権帰属表示の必要のない画像素材サイト『Pixabay.com』から選ぶと良いでしょう。
試しにアイキャッチ画像を設定したら投稿の編集画面の「公開」BOXにある「プレビュー」ボタンをクリックしてどのように記事が表示されるかプレビューをします。
プレビュー画面でキーボード上部にある「Prt Scキー(プリントスクリーン)」を1回押します。
これでスクリーンショットが撮影されましたので、お使いのPCで「ペイント」を検索してアプリを起動してください。
「ペイント」アプリの左上の「貼り付け」アイコンをクリックすれば、先程スクリーンショットを撮影した全てのPC画面がアプリ上に表示されます。
「選択」アイコンをクリックして、出てくる枠線をアイキャッチ画像の4隅に正確にマウスのクリック&ドラッグで合せます。
その状態で「選択」アイコンの右隣にある「トリミング」アイコンをクリックすればアイキャッチ画像だけが切り抜かれて表示されます。
メニューバー左の「ファイル」⇒「名前を付けて画像を保存」⇒「JPEG画像として保存」をクリックして、PCの任意の場所に任意の名前で保存します。
分からない場合は、PCの「デスクトップ」フォルダーに「試し.jpg」などとして保存すれば良いでしょう。
アイキャッチ画像のサイズを正確に計測する方法
次に無料の画像編集サイト『Pixlr Editor』へ行き、「新しい画像を作成」をクリックし先程保存した画像を開きます。
画像が開かれたら画像の枠の左下に「895×360」などと表示されているのが、貴方のWordpressテーマのアイキャッチ画像のサイズとなります。
しっかりとメモするなりして正確に記憶しておきましょう。

アイキャッチ画像の背景画像や使用する素材(イラストやアイコンなど)を選ぶ

pixabay.com
出典:pixabay.com
有料級の超ハイクオリティの画像やイラスト、写真が、無料で自由に商用利用、改変が可能で、著作権帰属表示の必要のない画像素材サイト『Pixabay.com』の検索窓で貴方がアイキャッチ画像を付ける記事のタイトルにあった画像を探していきます。
トップページのメニューバーから「写真」、「イラスト」、「ベクター画像」のいずれかのタブをあらかじめクリックしておきます。
検索窓でフレーズを入れて検索するか、トップページ最下部からカテゴリー別に選んでいきます。
希望の画像が見つかったらマウスを右クリックして「画像アドレスをコピー(Google Chromeの場合)」を選択し、画像URLをPCにコピーします。

Pixlr Editor に使用する画像素材を次々にアップロードする。

Pixlr EditorでWordpressアイキャッチ画像を作成
Pixlr Editor』のトップページで「URLから画像を開く」をクリックしポップアップウィンドウのURL入力欄に先程『Pixabay.com』でコピーした画像アドレスを貼り付けて画像を開きます。
背景(写真orイラスト)、アイコンや人物キャラクター(イラストorベクター画像)、有名人(Googleの画像検索で商用利用、改変可能な画像をライセンスフィルタリングして選ぶ※動画参照)などの画像を合計3~4枚選び、マウスを右クリックして「画像アドレスをコピー(Google Chromeの場合)」して、『Pixlr Editor』で画像URLを貼り付けて画像を開く作業を繰り返していきます。

素材画像を切り抜いてコピーし背景画像にペーストする。

Pixlr EditorでWordpressアイキャッチ画像を作成
背景として使用する画像に対して『Pixlr Editor』の操作パネル上部のメニューバーの「画像」タブから「画像サイズ」をクリックして、貴方のWordpressのアイキャッチ画像のサイズに変更します。
『Pixlr Editor』の操作パネル左にある「ツール」BOXの左列上から3番目にある「選択ツール(w)」や右列上から2番目にある「投げ縄ツール(L)」の「多角形投げ縄ツール」を使用して画像を切り抜きます。
切り抜いた画像をメニューバーの「編集」タブから「コピー」を選択してクリックし、背景画像を1度クリックして切り替えてから、メニューバーの「編集」タブから「貼り付け」を選択してクリックします。
この作業を繰り返して背景画像に使用する画像を集約させていきレイヤー構造を作っていきます。

記事タイトル(文字)を挿入して1度保存する。

Pixlr EditorでWordpressアイキャッチ画像を作成

『Pixlr Editor』の操作パネル左にある「ツール」BOXの右列下から2番目にある[A]のアイコンの「テキスト」ツールを選択します。
背景画像で文字(の左端)を挿入したい箇所をクリックすると、テキストBOXが出現します。
文字入力欄に記事タイトル画像をコピー&ペーストして改行して配置を整えても良いですし、タイトル文章を短く編集しても良いでしょう。
「フォント」、「サイズ」、「スタイル」、「色」、右寄せか真ん中寄せか左寄せかの配置を選んで完成したら「OK」ボタンをクリックして決定します。
メニューバーにある「レイヤー」タブから「レイヤースタイル」をクリックして選択すると「レイヤースタイル」ウィンドウが出現するので、「アウターグロー」などを設定して文字を印象的に装飾を施していきます。
記事タイトルを挿入し終えたら、一度保存します。
メニューバーの「ファイル」⇒「名前を付けて画像を保存」をクリックしてPCの任意の場所に任意の名前を付けて保存します。
出現する「画像を保存」ウィンドウの「フォーマット」欄は「JPEG」が良いでしょう。(推奨)
「クオリティー」は初期設定で80%になっており、十分な画質を維持しますが、ファイルが大きくなっても構わないと承知の上で、少しでも良い画質を保ちたいならバーを移動して100%に近づけていくと良いでしょう。

Pixlr Expressで仕上げのエフェクトを掛ける

Pixlr Express 使い方
『Pixlr Editor』と組み合わせて使用したい仕上げに使用するエフェクトを得意とする無料サイト『Pixlr Express』を開いてください。
トップページで左端の「Browse」というアイコンをクリックして、先程『Pixlr Editor』で作成して保存した画像をコンピューターから開いてください。
下に並んでいるアイコンの中から「Effect」は必ず使用して、画像に最適な色合いと光の効果を与えて、画像をより魅力的に生まれ変わらせてください。

Pixlr Expressでサイト名を刻印して完成

Pixlr Expressで画像編集
最後にサイト名を刻印します。
「Type」アイコンをクリックして、お好みのフォント(字体)を選択し、「Type your text here….」の欄に貴方のサイト名やブログ名を入力して、マウスでタイプする場所や大きさを動かして調整します。
「Color」で色を選択し、透明度も調整します。完成したら「✔Apply」をクリックします。
操作パネル左上の「✔Save」をクリックして画像に任意の名前を付けてPCの任意の場所に保存します。

Wordpressにアイキャッチ画像をアップロード

Wordpress アイキャッチ画像を設定
先程もアイキャッチ画像のサイズを測る際にやったように、Wordpressの記事の「投稿の編集」画面の右下にある「アイキャッチ画像」BOXにある「アイキャッチ画像を設定」をクリックして、メディアライブラリーで「アップロード」ボタンをクリックして、先程保存した完成したアイキャッチ画像をPCから選択してアップロードし、メディアライブラリー右下にある「アイキャッチ画像を設定」をクリックすれば設定完了です。
あとは、「投稿の編集」画面の右上にある「公開」BOXで「プレビュー」するか、記事が完成しているのなら「公開」ボタンをクリックすれば、アイキャッチ画像のWordpressへの設定は完了です。
アイキャッチ画像を作る場合は、この全体の作業を手早くこなし最短で15分程で出来るようにしておきましょう。

📹動画を観る