＜はてなブログ＞アイキャッチ画像の悩み解決！画像変更や切れない方法

せっかくブログ書いてたのに、横にある画像（アイキャッチ画像）が中途半端に切れててダサい！記事紹介やSNSで表示される大事な顔なのにおまえどこの写真だよ？ではもったいない。

※追記したのでそちらも見てください、問題が生じました。

投稿するなら切れてない方を選びたい。そんな思いから、アイキャッチ画像であれこれ悩んだことまとめました。

アイキャッチ画像とは？

実際に見た方が分かりやすい。

アイキャッチ画像はこのおねえさんのことだ。クリック前のブログを見たとき目に飛び込んでくる画像がアイキャッチ画像。タイトル並みに重要なとこ。だって第1印象だもん。タイトルも中身もいいのにアイキャッチがダメってパジャマで面接行く就活生みたいなもんですよ。

アイキャッチ画像を入れる方法

そもそも、こんな風に画像をいれるにはどうすればいいのか？それは簡単で、記事中に画像を挿入すれば最初に入れたものが勝手に反映されます。ただし画像は正方形に切りとったものになるので注意です。

アイキャッチ画像を変更する方法

画像が切れてたり、ダサかったり、もっといいサンプルが見つかれば誰だって画像を変えたくなりますよね。そんなときは編集オプション（歯車のやつ）から簡単にできますよ。

選んだものがここ！に表示されます。これで記事を更新すればアイキャッチ画像も変更されます。

記事中にない画像をアイキャッチ画像にする方法

ぼくがブログ見るときってツイッタ―からで、タイトル＋アイキャッチ画像で見るかどうか決めてたりするんですよ。

この2つに釣られて読むのですが、アイキャッチ画像と同じものが記事中にないときがあるんですよね。もしくはアイキャッチ画像はあるけど記事中に画像が1枚もないものとか。

これもやってることは簡単。先ほどと同じ手順でアイキャッチ画像を設定します。そのあとに記事から画像を削除すればOK。

アイキャッチ画像を切れないようする方法

ぼくたちは何度も頭を抱えてきました。この画像キレる問題。はてなさんはどうやって切っているのか検証してみました。

元画像とアイキャッチ画像を用意しました。

縦幅に合わせた正方形を元画像の中心にかぶせてみました。一致してるんじゃない？

横長の画像なら縦幅に、縦長の画像なら横幅に合わせて正方形にアイキャッチとなる。

枠内に収まるような画像を探して記事に入れれば万事解決なのです。 

それ探すのめんどくね？

既存の状態でベストなものは、そうそう見つかりません。それならアイキャッチ用で作ればいいんですよ。

こんな風に正方形で作って、アイキャッチ画像に設定したら削除する。1つ前でやった「記事中にない画像をアイキャッチ画像にする方法」と同じ手順です。

これで投稿するとホーム画面に行くと、アイキャッチ画像がピッタリおさまっていい感じになるのです。

さいごに

いかがでしたか？アイキャッチ画像についてぼくが悩んだこと・試したことでした。タイトルと同じくらいインパクトがある場所なので、ぜひ取り入れてみてください。分からなくなったらいつでもここへ立ち寄ってくださいね。

～追記～

ちょっと待った～！！ごめんなさいっ、ぜんぜん解決してない。書き終えてから、これアカンやつやん！と判明したので紹介します。

ツイッタ―・フェイスブック問題

記事を更新したあと、ツイッタ―やフェイスブックでシェアできるじゃないですか。さっそく投稿したんですよ。

すると、どうでしょう。

フェイスブックに投稿してときを見てみましょう。 

こちらが表示されます。上下のところが思いっきり切れてますね。

さらに、ツイッタ―で表示されるときって何パターンかあるんですよ。このブログ上下にあるシェアボタン経由でツイッタ―で投稿すると

 先ほどのフェイスブックと同じように上下が切れる表示になります。

あなたもブログを見直してみませんか？＜はてなブログ＞アイキャッチ画像の悩み解決！画像変更や切れない方法 https://t.co/UAvFOJjR91

— おいもさんち＠仮説・検証 (@oimotoimoko) 2017年1月26日

これ以外にも、ツイッタ―見てるとこんなの ↓ とかある。（どうすればこのような投稿ができるか分からないので良ければ教えてください。）

切れ味ハンパない。ジャパネットの包丁じゃないんだから…

ここまで出てきたものをまとめてみます。この画像（300×270）をアイキャッチ画像にすると、出力パターンが3つある。

赤：ブログトップの画像、ツイッタ―

青：ツイッタ―・フェイスブック

緑：ツイッタ―

赤を基準に作れば、緑のとき切れる。緑を基準に作れば、アイキャッチ画像の文字が米粒サイズになって見えん！ちくしょ～！！

困りましたね。どこで切られても問題ない写真を選ぶ以外に手段はないのでしょうか？タイトルで悩み解決！とか言っときながら泥沼に突っ込んでしまいました、すみません。また進展があれば加筆していきます。