はてなブログアイキャッチ画像は正方形! 見切れる・反映されない対処法


見れている対処法の文字

はてなブログのアイキャッチ画像について、2つのご質問をいただきました。

質問1

「はてなブログで、記事ごとのアイキャッチ画像を変更しました。でも反映されないことがあります。」

質問2

「はてなブログのアイキャッチ画像が見切れてしまいます。うまく表示させるやり方を教えてください。」

ご質問ありがとうございます。

「アイキャッチ画像が見切れてしまう対処法」は、画像のサイズを正方形にすることです。

はてなブログのアイキャッチ画像の設定方法

アイキャッチ画像は以下の画像のところから設定ができます。
はてなブログのサイドバー→編集オプション→アイキャッチ画像設定
編集オプション

 

はてなブログのアイキャッチ画像が反映されないときの対処法

はてなブログのアイキャッチ画像が反映されないときの対処法は、とてもかんたんです。

アイキャッチ画像設定の、赤枠の「矢印」を複数回クリックして更新するだけ。
アイキャッチ画像の設定のやり方

反映されないときは、何回もこの作業をしてください。

一回だけでは、改善されないことがあります。

はてなブログのアイキャッチ画像が見切れるときの2つの対処法

横長の画像をアイキャッチにすると、正方形になってしまうので見切れてしまいますよね。
画像が見切れている説明

アイキャッチ画像を正方形にして、設定し直すのが一番早いです。

でも、記事内の画像も、正方形になってしまうのですか?おかしいですよ!」という反論が聞こえてきそうです。

解決策は、「アイキャッチ用の画像だけを、正方形で作ればいい」ということになります。

正方形のアイキャッチ画像を作って、貼って、消せばいいんです。

1回正方形にして貼った画像は、削除してもアイキャッチ画像には反映されます。

はてなフォトライフに画像が残っているからです。

分かりやすいように、動画を撮りました。

『はてなブログのアイキャッチ画像が見切れてしまう対処法→「画像を正方形に加工」する2つのやり方』

 

はてなブログのアイキャッチ画像を「正方形に加工」する2つのやり方

「正方形にするのは分かった。でも正方形にするやり方が分からない」という方に、2つのやり方をご説明します。

初心者の方向けに画像で説明します。

【やり方1】長方形の画像を、無理やりに正方形にしてしまう

はてなブログの記事の画像は、きちんと表示されています。しかし、アイキャッチ画像が、見切れてしまっています。
画像が見切れている説明

この問題を解決する方法を説明します。

アイキャッチ画像を正方形に加工して、アイキャッチ画像に設定するやり方です。

パソコンからのやり方になります。

はてなブログの記事の編集画面→アイキャッチが見きれてしまっている画像の上で右クリックして保存します。
画像の保存のやり方

保存した画像をペイントで開きます。
Windowsのフォトで開いた場合は、画像の上で右クリックして「プログラムから開く」を選択するとペイントでひらでます。
ペイントで開く方法
(ペイントは、Windowsのパソコンに初期から入っています。ペイントの開き方はそれぞれやり方があります。)

↓ペイント開く→サイズ変更→縦横比を維持するのチェック外す→ピクセルを選ぶ→水平方向と垂直方向の数字を同じにする→OKを押す
ペイントの操作

 
無理やりですが、正方形の画像になりました。ペイントの上書き保存をしておきましょう。
ペイントの上書き保存

 

アイキャッチ画像設定をしたい記事に、いま作った正方形の画像を貼り付けます。

正方形の画像を貼る

 

貼った正方形の画像を、はてなブログのアイキャッチ画像に設定します。
アイキャッチ画像の設定のやり方

更新ボタンを押して完了です。

この貼った正方形の画像は、アイキャッチ設定後にすぐに消してしまっても大丈夫です。

 

はてなブログの記事一覧で見ても、見切れていないアイキャッチ画像になっています。

正方形の画像設定完了の図

 

【やり方2】正方形で残したい部分を決める

画像の一部分を選んで、アイキャッチにしたいときのやり方です。

例えば、下の画像の「赤枠の部分だけ」をアイキャッチ画像に設定したい場合のやり方を解説します。
画像のアイキャッチとして残したい部分
↑ペイントで、編集加工したい画像を開きます。

正方形に切り取ります。

選択→画像範囲を選ぶ→正方形のサイズになるようにする
ペイントの画像切り抜き方法
一番下のピクセル数→256×256のように横と縦のサイズをあわせます。
 

正方形にしたら、「トリミングをクリック」→「上書き保存もしくは、新規保存」をします。
ペイントのトリミング

この正方形に切り取りした画像を、はてなブログに貼り付けて、アイキャッチ画像にするのは【やり方1】と同じです。

正方形の画像は、はてなブログに一回貼り付けて設定したら消してください。

記事内の画像は長方形になっているものを残しておきましょう。

フェイスブック・Twitterではてなブログのアイキャッチ画像が見切れてしまう問題

フェイスブック・Twitterで見切れてしまう問題は、諦めてください(笑)

Twitterとフェイスブックは、正方形のアイキャッチ画像にしても上下がカットされます。
Twitterの画像は見切れる
こんな感じです↑。

文字は、上下に配置しないようにしましょう。

文字が、Twitterとフェイスブックできちんと表示されるようになります。

見きれないように載せるためには、できるだけ載せたい文字や画像を真ん中に寄せることが大事です。

はてなブログの画像の貼り方のノウハウはこちらの記事をご覧ください。