AFFINGER(アフィンガー)

AFFINGER5アイキャッチ画像の設置から作成方法!

 

悩む人
AFFINGER5でアイキャッチ画像を設置したいけどどうやるのかな?また、適切な画像サイズを知りたいです!

 

こんな悩みに答えます。

 

AFFINGER5では、以下のように、アイキャッチ画像を記事内に簡単に設置することができます。

 

 

ただ、アイキャッチ画像を自分で作成した時に、画像内のテキストが収まりきれずに見切れてしまうなんてこともあると思います。

 

そこで、本記事では、AFFINGER5を設置する方法・デザインレイアウトからアイキャッチを作成する方法までを解説していきます。

 

記事を読み進めることで、アフィンガー5のアイキャッチ画像を設置する方法からアイキャッチ画像の適切なサイズまで理解することができますよ!

 

それでは、早速始めていきます。

 

 

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

 

AFFINGER5(アフィンガー5)でアイキャッチ画像の設置方法から紹介します。

 

step
1
写真を選択

 

まずは、アイキャッチ画像に設置する写真を選択しましょう!

 

なお、無料の写真を選ぶには、O-DANから探してみるのがオススメです!

 

O-DANは、無料の写真を提供しているサイトを横断的に検索することができます。

 

僕もアイキャッチ画像を探すときには、O-DANから探して設置しています!
KEI

 

ちなみに、有料版の画像でしたら、shutterstockがおすすめです。

 

後ほどご紹介しますが、自分でアイキャッチ画像を作成する際には、Canvaで作成するのがオススメです!

 

step
2
アイキャッチ画像を設置

 

画像を用意できましたら、実際にアイキャッチ画像を設置していきます。

 

アイキャッチ画像を設置するには、投稿画面サイドバーの「アイキャッチ画像を設定」をクリックして、画像を挿入します。

 

 

 

 

上記の画面で、画像をドロップすると画像をアップロードできます。

 

これで、設置は完了です!

 

ちなみに、画像を削除するには、以下のように「アイキャッチ画像を削除」のリンクをクリックすれば削除することができます。

 

 

次に、アイキャッチ画像でできる設定について詳しく紹介します!
KEI

 

AFFINGER5のアイキャッチ画像のその他設定

 

AFFINGER5には、アイキャッチ画像の細かい設定ができます。

 

1つずつ順番に解説します!

 

写真クレジットにサイトURLを入れる

 

上記のように、写真クレジットにサイトURLを入れることができます。

 

写真クレジットにURLを入れるには、サイドメニューの『アイキャッチ関連』の「写真クレジットにサイトURLを使用」にチェックを入れます。

 

 

これで、写真の上にURLをテキストとして挿入することができます!
KEI

 

クレジット文章を入れる

 

任意のテキストを入れることで、独自のクレジット文章作成ができます。

 

アイキャッチ関連』の任意のテキストに好きな文字を入力します。今回は、試しに「sample」と入力します。

 

 

すると、プレビューで見てみると「sample」の文字が表示されます!

 

 

AFFINGER5アイキャッチ画像のデザインレイアウト

AFFINGER5アイキャッチ画像のデザインレイアウト

 

AFFINGER5でアイキャッチ画像のデザインをカスタマイズするには、「①AFFINGER5管理 → ②投稿・固定記事設定 → ③アイキャッチ設定」からできます。

 

 

アイキャッチ設定をクリックすると、以下の画面になります。

 

 

具体的にできることは、以下です。

 

・アイキャッチ画像を全記事で有効化する

・アイキャッチ画像をタイトルの下に配置

・アイキャッチ画像をワイドorポロライド風にする

 

アイキャッチ画像を全記事で有効化する

 

こちらは、アイキャッチ画像の表示・非表示の選択ができます。

 

アイキャッチ画像が表示されない場合は、「アイキャッチ画像の表示を全ての記事で有効化する」の項目にチェックをつけると表示されます!

 

アイキャッチ画像をタイトルの下に配置

 

「アイキャッチ画像をタイトル下表示に変更する」にチェックを入れると、以下のように、アイキャッチ画像をタイトルの下に配置することができます。

 

チェックあり

 

チェックなし

 

上記のように、チェックを入れないとタイトルの上にアイキャッチ画像が配置されます。

 

アイキャッチ画像をワイドorポロライド風にする

 

アイキャッチ画像をワイドorポロライド風にするかの設定です。

 

何もしない(デフォルト)

 

ワイド化

 

ポロライド風

 

デザインを選択できましたら、「save」をクリックして完了です。

 

お好みのアイキャッチ画像を設定してみてください!
KEI

 

AFFINGER5用のアイキャッチ画像を作成するには?

 

アフィンガー5のアイキャッチ画像を独自で作成するのに、Canvaを使うと便利です!

 

Canvaは、無料で使用することもできますが、Canva Pro(有料版)ですと、使用できるアイコン・写真数が増えます。

 

詳しくは、以下の記事を参考にしてみてください!

>> PC版Canvaアプリの使い方を紹介します

 

アイキャッチ画像の大きさは「横1200px×縦630px」

 

Canvaでアイキャッチ画像を作るには、『横1200px×縦630px』の大きさか、それ以上で設定することをオススメします。

 

というのも、Googleでも大きい画像を使用する際には、1200px以上の画像を推奨しているからです。

 

サイズの大きい画像は、幅を 1,200 ピクセル以上

参照元:Google 検索セントラル

 

各記事一覧の画像内文字が見切れてしまう場合

 

アフィンガー5のサムネイル画像は、以下のように、記事一覧・関連記事にも小さく表示されます。

 

 

Canvaを使って中のテキストが見切れないようにするためには、出来るだけ画像中央にテキストを置くといいですよ!

 

そうすると、各記事一覧のアイキャッチ画像内のテキストが見切れることなくがないかと思います。
KEI

 

また、中央に文字を置いても見切れてしまう場合は、「①AFFINGER5管理 → ②デザイン → ③サムネイル画像設定」で形を変えてみるのもオススメします。

 

 

 

 

サムネ画像の表示領域や画像の大きさを変えることができるので、一覧で見切れていた文字も見えるようになるはずです。

 

AFFINGER5アイキャッチ画像の設置から作成方法!:まとめ

 

いかがでしたか?

 

今回は、AFFINGER5でアイキャッチ画像を設置する方法から適切な画像サイズについて紹介しました。

 

お洒落なアイキャッチ画像は、読者さんの目に留まりやすくなるので、クリックされやすくなります。

 

また、アイキャッチ画像を作成するのもブログのモチベーションの1つにもなりますね。

 

ぜひ、お洒落なアイキャッチ画像を作成してみてください!

 

ここまで読んでいただき有難うございました。

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)