はてなブログのアイキャッチの設定！画像のサイズは正方形。 見切れる・反映されない対処法
2021年3月8日更新
はてなブログのアイキャッチ画像について、２つのご質問をいただきました。
質問１
「はてなブログで、記事ごとのアイキャッチ画像を変更しました。でも反映されないことがあります。」
質問２
「はてなブログのアイキャッチ画像が見切れてしまいます。サイズはどのようにすればいいのでしょうか?うまくアイキャッチ画像を表示させるやり方を教えてください。」
ご質問ありがとうございます。
「はてなブログのアイキャッチ画像が見切れてしまう対処法」は、画像のサイズを正方形にすることです。
はてなブログのアイキャッチ画像のサイズは正方形！ 見切れる・反映されない対処法
はてなブログのアイキャッチを横長の画像にすると、サイドバーのサムネイル画像は正方形になってしまい、見切れてしまいます。
※2020年、はてなブログのトップページなどの記事一覧表示では、横長のアイキャッチ画像でも全てが表示されるように変更されました（Minimalismというテーマの場合）
相変わらず画像のサイズを正方形にしていなくても、画像全体がきちんと表示されています。
でも、上下に白い空白ができてしまうので、キレイにはてなブログのアイキャッチ画像を設定したいという方は、サイズを正方形にして設定し直すのが一番早いです。
記事一覧のアイキャッチ画像は見切れなくなりました。
しかし、はてなブログのサイドバーに表示されるサムネイル画像は相変わらず見切れてしまっています。
はてなブログのアイキャッチ画像の設定を正方形にすることで解決します。
「でも、記事内の画像も、正方形になってしまうのですか?おかしいですよ！」という反論が聞こえてきそうです。
解決策は、「アイキャッチ用の画像だけを、正方形で作ればいい」ということになります。
正方形のサイズのアイキャッチ画像を作って、貼って、アイキャッチ画像の設定をした後に消せばいいのです。
１回正方形にして貼った画像は、削除してもアイキャッチ画像には反映されます。
はてなフォトライフに画像が残っているからです。
分かりやすいように、動画を撮りました。
『はてなブログのアイキャッチ画像が見切れてしまう対処法→「画像を正方形に加工」する２つのやり方』
【文字を真ん中に】はてなブログのアイキャッチ画像は見切れてしまうことを前提に作る
そもそも、はてなブログのアイキャッチ画像は、サイドが見切れてしまうことを前提に作成するといいかもしれません。
つまり、アイキャッチ画像の真ん中に文字がくるようにするということです。
アイキャッチ画像のデザインが見切れてしまっても、文字が真ん中にあれば不自然ではありません。
2021年2月に、はてなブログのアイキャッチ画像を作成を簡単にしてくれる「CANVA」という機能で作りました。
やり方を詳しく知りたい方はこちらをご覧ください。
はてなブログのアイキャッチ画像のサイズは
CANVAでつくる画像サイズは一律で1200×630になります。
CANVAで作った画像は、サイズが重くないので問題はありません。
しかし、スマホで撮った写真をそのまま載せてアイキャッチ画像にしてしまうと、ブログの表示速度が遅くなってしまいます。
わたしが使っているはてなブログのminimalismのデザインテーマは横幅が640pxです。
なので、CANVAでつくったアイキャッチ画像の比率をを半分にした600×315にした画像を載せるというのもいいかもしれません。
わたしは、画像サイズを気にせずに貼ってしまっています。
アイキャッチ画像のサイズに明確な答えはありません。
はてなブログに挿入する画像も、アイキャッチ画像も同じサイズにするとキレイではありますよね。
「6：4」など、画像の比率を固定して貼っている人もいます。
横幅だけ合わせて、画像の下の部分が長くなってしまう場合はカットするなどです。
縦長の画像だと、読者がスクロールするのに大変になってしまいますよね。
はてなブログのアイキャッチ画像のサイズを「正方形に加工」する２つのやり方
「正方形にするのは分かった。でも正方形にするやり方が分からない」という方に、２つのやり方をご説明します。
初心者の方向けに画像で説明します。
【やり方１】長方形の画像を、無理やりに正方形にしてしまう
はてなブログの記事の画像は、きちんと表示されています。しかし、アイキャッチ画像が、見切れてしまっています。
この問題を解決する方法を説明します。
アイキャッチ画像を正方形に加工して、アイキャッチ画像に設定するやり方です。
パソコンからのやり方になります。
はてなブログの記事の編集画面→アイキャッチが見きれてしまっている画像の上で右クリックして保存します。
保存した画像をペイントで開きます。
Windowsのフォトで開いた場合は、画像の上で右クリックして「プログラムから開く」を選択するとペイントでひらでます。
（ペイントは、Windowsのパソコンに初期から入っています。ペイントの開き方はそれぞれやり方があります。）
↓ペイント開く→サイズ変更→縦横比を維持するのチェック外す→ピクセルを選ぶ→水平方向と垂直方向の数字を同じにする→OKを押す
無理やりですが、正方形の画像になりました。ペイントの上書き保存をしておきましょう。
アイキャッチ画像設定をしたい記事に、いま作った正方形の画像を貼り付けます。
貼った正方形の画像を、はてなブログのアイキャッチ画像に設定します。
更新ボタンを押して完了です。
この貼った正方形の画像は、アイキャッチ設定後にすぐに消してしまっても大丈夫です。
はてなブログの記事一覧で見ても、見切れていないアイキャッチ画像になっています。
【やり方２】正方形で残したい部分を決める
画像の一部分を選んで、アイキャッチにしたいときのやり方です。
例えば、下の画像の「赤枠の部分だけ」をアイキャッチ画像に設定したい場合のやり方を解説します。
↑ペイントで、編集加工したい画像を開きます。
正方形に切り取ります。
選択→画像範囲を選ぶ→正方形のサイズになるようにする
一番下のピクセル数→256×256のように横と縦のサイズをあわせます。
正方形にしたら、「トリミングをクリック」→「上書き保存もしくは、新規保存」をします。
この正方形に切り取りした画像を、はてなブログに貼り付けて、アイキャッチ画像にするのは【やり方１】と同じです。
正方形の画像は、はてなブログに一回貼り付けて設定したら消してください。
記事内の画像は長方形になっているものを残しておきましょう。
はてなブログのアイキャッチ画像の設定と削除されないときの対処方法
アイキャッチ画像のアイキャッチ画像の設定は以下の２つがあります。
- 記事を書くときにで設定する
- 自動生成される
記事を書くときにで設定する
アイキャッチ画像は以下の画像のところから設定ができます。
はてなブログのサイドバー→編集オプション→アイキャッチ画像設定
自動生成されるアイキャッチ画像の設定（SNSシェア用）
記事になにも画像をいれないときには、SNSにシェアしたときのアイキャッチ画像はどうなるのでしょうか?
例えば、twitterやフェイスブックにシェアしたときですよね。
はてなブログで設定をしておけば、自動的にタイトルがアイキャッチ画像として設定されます。（記事のサムネイル画像は、表示されません）
以下の設定をしておきましょう。
はてなブログのアイキャッチ画像が反映されないときの対処法
はてなブログのアイキャッチ画像が反映されないときの対処法は、とてもかんたんです。
アイキャッチ画像設定の、赤枠の「矢印」を複数回クリックして更新するだけ。
反映されないときは、何回もこの作業をしてください。
一回だけでは、改善されないことがあります。
はてなブログのアイキャッチ画像が消えない（削除できない）ときの対処法
ブログの記事内から画像を削除したのに、はてなブログのトップページのタイトル一覧からアイキャッチ画像が消えないというときの対処方法を動画と画像付きで解説します。
【画像解説】
記事の編集画面の「編集オプション」→「アイキャッチ画像」の画像の下にある「✖」をクリックすることによって、アイキャッチ画像を削除することができます。
記事内の画像を削除しても、はてなフォトライフには画像が残っています。
動画では、はてなフォトライフ内の画像も完全に削除する方法を解説しています。
はてなフォトライフの画像をわざわざ削除するのはめんどくさいので、わたしは残したままにしています。
フェイスブック・Twitterではてなブログのアイキャッチ画像が見切れてしまう問題
フェイスブック・Twitterで見切れてしまう問題は、諦めてください（笑）
Twitterとフェイスブックは、正方形のアイキャッチ画像にしても上下がカットされます。
こんな感じです↑。
文字は、上下に配置しないようにしましょう。
文字が、Twitterとフェイスブックできちんと表示されるようになります。
見きれないように載せるためには、できるだけ載せたい文字や画像を真ん中に寄せることが大事です。
はてなブログの画像の貼り方のノウハウはこちらの記事をご覧ください。
はてなブログでアイキャッチを作るにはGyazoが便利
はてなブログでアイキャッチを作るにはGyazoを使うと、かんたんに作れてしまいます。
インパクトのあるアイキャッチ画像を作れます。
でも有料になってしまいます。月額料金390円～490円かかってしまいます。
でも、使いやすい、時間短縮になるというのを考慮して使っています。
わたしは、はてなブログやYou Tubeのアイキャッチ画像はGyazoを使っています。
Gyazoの使い方の動画はこちら。
最新記事 by 石黒敬太 (全て見る)
- 【はてなブログ】Microsoft Clarityの設置方法（ヒートマップ） - 2023年1月29日
- YouTubeでAmazonのアフィリエイト広告を貼る（もしもアフィリエイト） - 2021年12月30日
- 日記が毎日２００アクセスの記事に！ - 2021年11月19日
