できるだけ綺麗な画質でヘッダーの画像を作りたい｜はてなブログカスタマイズ

自作のテーマを作るきっかけの１つに、大きな画像のヘッダーを利用したいというのがありました。

はてなブログのデフォルトの推奨画像サイズは1000px × 200pxとなっています。

「管理画面」→「 デザイン」→「 カスタマイズ」 →「ヘッダ」で、ヘッダー画像を設定すると1000px × 200pxで切り取られます。

はてなブログの公式サイトによると

PC・レスポンシブデザイン用ヘッダ画像の推奨サイズは、幅1000px、高さ200pxです。 閲覧する環境によって、左右の領域はカットされることがあります。
スマートフォン用ヘッダ画像の推奨サイズは、幅720px、高さ240pxです。 ヘッダ画像の推奨サイズ - はてなブログ ヘルプ

設定画面からはてなブログのヘッダー画像を設定するとサイズがカットされる場合があって、高さが200px以上出せません。

多分、いろんな端末からアクセスしたときに不具合がでないように考えられているのだと思いますが、どうしても、どうしても、大きな画像のヘッダーを入れたいんです。

ということで、やってみました。

できるだけ綺麗な画質でヘッダー画像を作りたい

できるだけ綺麗な画質でヘッダー画像を作りたいと思ったので2つサイトを紹介します。

商用でも無料で利用できる高画質の画像サイト
無料の写真と画像をダウンロード [HD] |アンスプラッシュ  

画質を落とさずに画像ファイルのデータを圧縮できる
Shrink Me - Compress JPG, PNG, WEBP, and SVG Images  

上の2つのサイトは、webデザイナーさんの本やYouTubeでよく紹介されているサイトです。

手順1　unsplashさんでいい具合の画像を探す

まずは、デモサイト用のヘッダーを作ろうと思ったので、商用で無料で利用できる高画質の写真がたくさん掲載されているunsplashさんで、素敵な写真を探します。

Shrink Me - Compress JPG, PNG, WEBP, and SVG Images  

気に入った画像があったら画像をダブルクリックします。 写真の画像の右上に「無料ダウンロード」と書いたボタンの右側に「 」があるのでクリックしてみてください。

サイズが指定してダウンロードできるので、ここでは1920px × 1280pxをダウンロードします。

ダウンロードした画像を1つはリサイズしてスマートフォン用に、もう1つはパソコン用にしようと思うので、コピーを1つ作っておきます。

手順2　コピーした画像をリサイズする

Windowsのフォトアプリを利用してリサイズします。

先ほどコピーしたファイルを「右クリック」→「プログラムから開く」→「フォト」を選びます。

開いたら中央上部の少し右側にある「  」をクリックして、「サイズ変更」を選びます。

画像のサイズ変更の画面で「カスタムの寸法を定義します」を選び「縦横比を維持する」にチェックが入っていることを確認して、幅を767pxへ変更します。（わたしの自作テーマのブレイクポイントが768pxなので）

品質は高（100％）にして保存します。

手順3　画像を圧縮する

ブログで画像を利用するときは、できるだけサイズを小さくした方表示されるスピードが速くなるそうです。

なので、先ほどの画像を圧縮してデータ量を減らしたいと思います。

圧縮するのによく使われている有名なサイトがshrinkmeさんです。画像ファイルをドロップアンドドラッグするだけで簡単に画像ファイルが圧縮されて、「save」を押すだけでダウンロードできます。

Shrink Me - Compress JPG, PNG, WEBP, and SVG Images  

ダウンロードしたファイルはデスクトップなど分かりやすい場所に移しておきます。

手順4 はてなフォトライフに画像をアップロードする

はてなには画像ファイルをアップロードできるはてなフォトライフというのがあります。

無料で毎月300MBまで、有料プラン「はてなブログPro」に加入すると、毎月3GBまで保存できます。

先ほど圧縮した画像ファイルをはてなフォトライフにアップロードします。

はてなフォトライフに画像をアップロードすると自動的にリサイズされるようになっているので、その設定をいったん解除しておきます。

はてなフォトライフにアクセスして、右上の「設定」をクリックします。画像サイズをオリジナルサイズの画像を保存にチェックを入れて変更を保存します。

右上の「アップロード」をクリックしてドロップアンドドラッグでファイルをアップロードします。

マイフォトに戻って画像がアップロードされたかどうか確認します。

保存された画像をダブルクリックして開き、さらに画像を右クリックして「画像リンクをコピー」をクリックして、画像のURLをテキストエディタにメモしておきます。

※はてなフォトライフに直接アップロードした画像は写真の画像情報（Exif情報）がそのまま保存されます。自分で撮影した写真などを利用する場合は画像情報を削除した方がいいと思います。

先程の設定画面に「画像情報を表示」という項目があるのでチェックは外しておきました。

画像入りの解説はこちら→はてなフォトライフで画像をアップロードする方法

手順5 CSSを張り付ける

下記のコードの画像URLを先ほどのフォトライフにアップロードした画像URLへ変更して

「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」へ貼り付けます。

#blog-title {
    background-image: url(画像URL);
    background-size: cover;
    height: 400px;
    background-position: center center;
    position: relative;
}
@media (min-width: 768px) {
    #blog-title {
        background-image: url(画像URL);
        text-align: center;
    }    
}
div#blog-title-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    background-color: rgba(255,255,255,.7);
    padding: 20px;
}

スマホで閲覧したときは、画像サイズの小さい画像をbackgroundに表示させ、横幅が768pxを超えると大きめ画像に切り替えるようにしました。

タイトルはわかりやすいように背景に白を少し透過させて、上下左右中央に配置しました。

これで不具合がでないかどうか確認してみたいと思います。

雑感

画像を圧縮しましたが、普通にリサイズするよりもサイトを使って圧縮した方が格段にザラザラ感がなくてよかったです。

画質が荒いと大きいディスプレイで見たときに気になりますよね。

出来上がりはこちら→サンプルブログ