ブログ

ピッタリサイズ!アイキャッチ画像の作り方

ころ

不妊治療の末2019年に
男の子を出産し夫と息子の三人家族。
家族の為に頑張って資産を増やそうと
超初心者ながら仮想通貨・つみたてNISAブログ運営始めました。
右も左もわからないズボラ主婦の
様子をお伝えできたらな~と
もくろんでます('ω')

何回やってもアイキャッチの画像が見切れるなー。なんかヤダー

そんな人の為にAFFINGERでのアイキャッチ(サムネイル)の作り方をご紹介したいと思います。

その前にAFFINGERの導入がまだの方はここから作れますよー!

AFFINGER6(WordPressテーマ)

そもそも……アイキャッチとは?

「読者の目(Eye)をつかむ(catch)」ための画像の事で、その名の通り読者の目を引き付ける効果がありあます。

よくブログ記事の横についているあの画像ですね。

こんなやつですね。ハイ。

これを見切れずに綺麗に表示させるにはどうすればいいのかを解説したいと思います。

まずはじめに

せっかく気合を入れて作ったアイキャッチが切れて綺麗に表示されないのは嫌ですよね?

と言う事で、アイキャッチ画像が切れてしまうのを解消する方法をご紹介します。

アイキャッチ画像の大きさは統一する

アイキャッチの画像サイズは毎回統一させましょう。

これを揃えないと表示された時にガタガタで不揃いになり見た目が不格好になってしまいます。

AFFINGER推奨のアイキャッチの画像サイズは横1200×縦630す。

毎回このサイズに揃えて投稿していきましょう!!

私、アイキャッチはcanvaで作っているのですが一度作ったやつをコピーして色など変更して使っています。

なのでコピーして使っていけば自然と毎回このサイズで作る事が可能です。

ころ

ちょっとでも簡単に・楽に作れるのがいいよね!

アイキャッチ画像が切れる場合の対処法

アイキャッチ画像が切れてしまう場合の対処法に以下二つの解消法があります。

  1. アイキャッチ画像を横幅いっぱいで表示されるように設定する
  2. アイキャッチ画像が切れても大丈夫なように画像を編集する

アイキャッチ画像を横幅いっぱいで表示されるように設定する

アイキャッチ画像が正方形で切れてしまうのが嫌な場合は設定で、横幅いっぱいに表示されるように設定しましょう。

設定方法

  • 管理画面AFFINGE管理をクリック
  • デザインをクリック
  • サムネイル画像設定のところにあるフルサイズにするに☑を入れる
  • saveをクリック

これをするだけでアイキャッチ画像がしっかり横幅いっぱいに表示されるようになります。

こんな感じになります。

アイキャッチ画像が切れても大丈夫なように画像を編集する

二つ目はアイキャッチ画像を作成する際に見せたいものは正方形に収めるよう工夫するのです。

アイキャッチ画像は横長の長方形が一般的ですが、アンフィンガーの設定によってはトップページやサイドバーで正方形として表示されてしまうことがあります。

なので文字やアピールしたいものは正方形内に収まるように画像編集をし、見切れない様にするとgoodです。

まとめ

いかがだったでしょうか?

誰でもわかるように簡単に解説しました。

  1. アイキャッチ画像を横幅いっぱいで表示されるように設定する
  2. アイキャッチ画像が切れても大丈夫なように画像を編集する

少し工夫するだけでとっても素敵なアイキャッチができます。

もし本内容をまだ知らなかったな~って方は実践してみてくださいね!!

AFFINGEの導入がまだの方はこちらからプラグインしてくださいね~☺

AFFINGER6(WordPressテーマ)

-ブログ
-