ガジェットおたくのレビューブログ

スマホ関係のテクノロジー系企業で働く30代サラリーマンがネットで購入したガジェットや本をレビューするブログ

はてなブログの画像がぼやけるときの対処法

通常画像を投稿するときは、下にあるように「+写真を投稿」ボタンから行います。

f:id:amazonian44:20170331235325p:plain

しかしこの場合、長辺が800pixel(もしくは1024pixel)に自動的にリサイズされてしまうようです。そして以下のように大きなサイズの画像をアップロードしたときにリサイズされて(以下の例では3000pixel→800pixel)、結果的に文字がぼやけてしまいます。

f:id:amazonian44:20170325125742p:plain

 この問題を3つのステップで解決できます。こちらのブログも参考にさせてもらったんですが、自分の場合はステップ2と3が追加で必要でした。

www.task-notes.com

 

ステップ1:フォトライフの保存設定を変更 

まず、「+写真を投稿」ボタンの下にフォトライフへのリンクがあるので、そこからフォトライフのページへ行きます。はてなブログの写真はここに保存されています。右上の設定ボタンから設定ページにとび、画像サイズの項目の「オリジナルサイズの画像を保存」にチェックを入れて保存。

f:id:amazonian44:20170401002832p:plain

ステップ2:フォトライフから画像をアップロード

「+写真を投稿」ボタンは使わずに、フォトライフから直接画像をアップロードします。そしてフォトライフからその画像を見ると、「オリジナルサイズを表示」という項目があるのでクリック。(「+写真を投稿」ボタンからアップロードするとこの項目は出てきません)

f:id:amazonian44:20170401002902p:plain

そしてその画像のURLをコピー。 今回の例の場合は、http://cdn-ak.f.st-hatena.com/images/fotolife/a/amazonian44/20170325/20170325125742_original.pngです。

ステップ3:画像リンクを直接埋め込む

記事の編集モードをHTML編集に切り替えて、 以下のコードを追加します。画像リンク("http://....")はステップ2でコピーしたURLを使ってください。

<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/amazonian44/20170325/20170325125742_original.png" alt="" /> 

するとこんな感じに正しく表示されます。Retinaディスプレイのように画素のスケーリング機能があるモニターだとより顕著に改善したのが分かります。