みなさんこんにちは、jです。
はてなブログのアイキャッチ画像サイズって実際どれが正解なの？
こんな悩みを解消していきます。
・はてなブログの適切なアイキャッチ画像サイズ
・はてなブログの適切なアイキャッチ画像サイズの調べ方
・はてなブログのアイキャッチ画像サイズの作り方
記事の顔ともいえるアイキャッチ画像。
多くの方が作成し、記事に反映していると思います。
しかしそのアイキャッチサイズ、あなたのブログにマッチしていますか？
少し小さかったり、もしくは大きかったりしていませんか？
私も以前不適切なサイズを作成していた身で、あまりの見栄えの悪さに
センスないな…
と自分でも思うぐらいでした。
どうせブログを更新するなら、少しでもスタイリッシュにしたいですよね。
本記事でははてなブログの適切なアイキャッチ画像サイズと作り方をまとめていきます。
< 今ならPro利用で独自ドメインを無料でゲット >
【結論】はてなブログのアイキャッチ画像サイズは16:9
結論からお伝えすると、はてなブログのアイキャッチ画像サイズは16:9です。
”はてなブログ アイキャッチ サイズ”
で検索すると、多くの方が同じような回答をしているはずです。
この回答は間違いではありません。
TwitterやInstagramなどSNSにシェアする場合にも、この比率で間違いなくきれいに画像が反映されます。
まず16:9という比率を頭に入れておきましょう！
注意：ただ16:9のアイキャッチを作成すればいいわけではない
しかし、ここで注意点があります。
それはただ16:9のアイキャッチ画像を作成すればよいというわけではないことです。
jさん、どういうこと？
多くの記事では16:9の比率で作成した、448×252サイズが適切なサイズとして書かれています。
確かに私も以前はそれがきれいになると思って実際にやっていました。
当時のサイズを載せている記事の写真を見てみてください。
この赤丸で囲んだ部分、これ余白なんですよね。
実は448×252でアイキャッチ画像を作成すると、少し余白ができてしまうのです。
スマホではきれいに画面いっぱいに表示されていますが、パソコンだとそうはいきません。
自分のブログに最適なアイキャッチ画像サイズを調べる方法
この余白どうにかならないの？
自分でサイズを調べれば解消できますよ！
実はお使いのブログテーマによってアイキャッチサイズは少し異なってきます。
しかし、この方法を知っておけば今後テーマが変わろうと
適切なアイキャッチサイズが分からない…
ということがなくなります。
ここからは適切なアイキャッチ画像サイズの調べ方をまとめていきます。
アイキャッチ画像の横サイズを調べる
最初にアイキャッチ画像の横サイズを調べます。
まずはお使いのパソコンで自分のブログ記事を１つ開きましょう。
開いたらキーボードの”F12”キーを、もしくはサイト上で右クリック→”検証”をクリックしましょう。
すると下写真のようにコードが表示されたと思います。
開いたら、赤丸で囲んであるマウスボタンのようなアイコンをクリックしましょう。
この状態で下写真の点線赤丸らへんにマウスを向けると下のほうに指した部分の情報が表示されます。
この赤丸で囲んだ部分が自分のブログのメインサイズです。
私の場合は700×10692となっています。
今回欲しいのは横サイズですので、700（みなさんは表示された横サイズ）をメモしておきましょう。
アイキャッチ画像の縦サイズを調べる
次にアイキャッチ画像の縦サイズを調べます。
ここで一番最初にお話しした16:9という比率が必要になります。
学生時代に教わった比率の計算方法を使用して求めていきます。
今回私の横サイズは700でしたので、
16 : 9 = 700 : x
という計算式になります。
比率計算の仕方は”内内 × 外々”ですので
16x = 6300
となり、これを割るとxは393.75となります。
つまり私の適切なアイキャッチ画像サイズは、”700:394”という値になりました。
これで自分の適切なアイキャッチ画像サイズを知ることができましたね！
< 今ならPro利用で独自ドメインを無料でゲット >
はてなブログのアイキャッチ画像の作り方
ここからははてなブログのアイキャッチ画像の作り方をご紹介していきます。
先程求めたアイキャッチサイズをもとに実際に作って、記事に反映させてみましょう！
使いやすいツールでアイキャッチ画像を作成
今回はcanvaを使用してアイキャッチ画像を作成していきます。
下記リンクからcanvaに移動しましょう。
開いたら、上記写真のように右上の”デザインを作成”をクリックし、カスタムサイズを選択します。
すると下写真のようなサイズ指定画面が表示されますので、先程求めたサイズを入力し、”新しいデザインを作成”ボタンをクリックします。
クリックするとキャンバスが出てきますので、お好きなデザインを作成してみましょう。
作り終えたら
右上のダウンロードボタン → ファイルの種類（基本PNGかJPG） → ダウンロード
の順に行い画像をダウンロードしましょう。
写真を投稿・確認する
次にダウンロードした写真を記事に投稿していきます。
いつも通りはてなブログの記事作成画面を開き、右側のサイドバーの”写真を投稿”から写真を選択しましょう。
選択すると下写真のような設定画面がでてきますが、今回は何も設定せず”記事編集画面に貼り付ける”をクリックします。
編集画面にピッタリと収まるような画像ができていればOKです。
編集オプションよりアイキャッチ画像を選択する
画像を貼り付けたら、編集オプションからアイキャッチ画像を選択していきます。
右側のサイドバーから歯車アイコンの”編集オプション”をクリックします。
するとその中にアイキャッチ画像という欄があり、先程張り付けた画像が表示されているはずです。
その画像をクリックしましょう。
これでアイキャッチ画像の選択は完了です。
更新・投稿して作成した記事をみてみる
最後に更新・投稿して作成した記事をみてみましょう。
上記写真のように、画像が記事欄いっぱいに表示されていればOKです。
16:9で作成していますので、SNSへのシェア時にも影響なく画像が表示されるはずです。
以上でアイキャッチ画像の設定は完了です。
お疲れ様でした！
< 今ならPro利用で独自ドメインを無料でゲット >
アイキャッチ画像は各記事の顔であり重要です
アイキャッチはただの画像ではありません。
記事の良し悪しを決める顔でもあります。
読者によってはアイキャッチだけで離れていく方もいらっしゃいます。
せっかく良い記事や面白い記事を書いているのに、アイキャッチで離れられたら悲しいですよね。
ちょっとしたデザインへの気配りでサイトへの流入も増えてきます。
その第一歩として、適切なサイズのアイキャッチ画像を作成してみてはいかがでしょうか。
以上、はてなブログのアイキャッチ画像サイズと作り方の紹介でした！
おすすめ記事
