はてなブログテーマ「Blank」のカスタマイズ（ヘッダー編）

はてなブログテーマ「Blank」のカスタマイズ方法、ヘッダー編です。背景色や背景画像を設定する方法について記載しています。参考になれば幸いです。

背景色を設定する

ヘッダーに背景色を設定するには、［ダッシュボード（管理画面）］→［デザイン］→［カスタマイズタブ］→［背景色］メニューで使いたい色を選択します。

この時、選択する色によってはブログタイトルとブログ概要が見えにくくなってしまうことがあります。この問題は、カスタムCSSで #title（ブログタイトル）と #blog-description（ブログ概要）に明るめの色を指定することで改善できます（暗めの方が良い場合もあります）。

#title a {
    color: rgba(255,255,255,0.9);
}
#title a:hover {
    color: rgba(255,255,255,0.7);
}
#blog-description {
    color: rgba(255,255,255,0.7);
}

背景画像を設定する

ヘッダーに背景画像を設定する手順は背景色の場合とほとんど同じで、［（省略）］→［背景画像］で使いたい画像を選択します。

背景色と同様、選択する画像によってはブログタイトルとブログ概要が見えにくくなってしまうことがあります。この問題もまた、上記の CSS をカスタムCSSで指定することで改善できます。

背景画像を設定する（その2）

今流行の（？）ヘッダー画像を横幅いっぱいに設定する手順です。

#blog-title {
    background-image: url("画像のURL");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;
}
#title {
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
#title a {
    color: rgba(255,255,255,0.9);
}
#title a:hover {
    color: rgba(255,255,255,0.7);
}
#blog-description {
    color: rgba(255,255,255,0.7);
    text-shadow: 0 1px 2px rgba(255,255,255,0.7);
}

この CSS をそのまま適用すると、上記のスクリーンショットのように表示されますが、あくまでも参考例です。background-image で指定した画像が、サイズに関係なくヘッダーの横幅いっぱいに表示されます。

このデザインの問題は、現在のモニタ解像度のシェアを考えると、”ぼやけ”を防止するために少なくとも幅 1600px 前後の画像を指定する必要がある点です。

はてなフォトライフを画像のアップロード先として使う場合は、［オリジナルサイズの画像を保存］する設定をオンにするか、画像サイズをデフォルトの 800px から広げる必要が出てきます。

アップロード時に［オリジナルサイズの画像を保存］にチェックを入れることでサイズを個別に指定できるようです。

はてなブログさん、無料ユーザーの画像アップロード容量の制限、30MB/月はいくらなんでも少なすぎじゃないでしょうか？