ヘッダー、タイトル画像の設定について

ヘッダー、タイトル画像の設定について説明します。他のデザインテーマのカスタマイズにも応用できます。

タイトル画像の設定（はてなブログのタイトル画像機能を使う場合）

はてなの管理画面＞デザイン＞カスタマイズ＞ヘッダ＞よりタイトル画像を設定する.

このように1000x200pxで表示されます。

タイトル画像の上下の余白を取る

タイトル画像の上下の余白が気になる場合は、デザインCSSに以下の記述を追加して余白を消してください。
以下のコードをデザインCSSに追加

/*タイトル画像上下の余白を取る*/
.header-image-enable #blog-title {
padding: 0;
margin: 0;
}

タイトル名の文字の色、並びを変更する

タイトルの位置、文字の色、真ん中寄せにしたいときは以下のCSSで調整してください。

/* ヘッダ画像を設定したとき */
.header-image-enable #title,
.header-image-enable #title a {
  color: #fff;              /*デフォルトでは白#fff*/
  padding-top: 70px;　　　　/*上からの高さ*/
}
.header-image-enable #title,
.header-image-enable #blog-description {
  color: #fff;
  text-align: center;　   /真ん中寄せ*/
}

cssで直接指定する

はてなのタイトル画像機能を使わず直接指定する方法。見え方は上と同じ。

#blog-title-inner {
  height: 200px;
  background-size: cover;
  background-image: url('背景画像URL');
  background-position: 50% 50%;
}

ヘッダーの背景に横幅いっぱいに画像を設定する

はてなの標準機能ではタイトル画像は1000px 200px以内しか表示できません。
ヘッダでのタイトル画像機能は使わず直接CSSで指定することでヘッダー背景いっぱいの画像が表示されます。

#blog-title {
    background-image: url("背景画像URL"); /*""内にタイトル画像URL指定*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;　　/*タイトル名を中央並びしたいとき。左揃いのままのときは消す*
    height: 300px;　　　　　/*表示したい画像の高さ*/
    margin: 0;
    padding: 0;
    top: 0;
    width: 100%;　　　　　　/*幅100%に*/
}
#title,#title a {
  　-webkit-text-shadow: 0 1px 2px #000;
　　text-shadow: 0 1px 2px #000;
    color: #fff;　　　　　　/*タイトル名の文字の色*/
    margin: 0;
    padding-top: 150px;　　　/*タイトル名の上からの位置*/
    text-align: center;　　　/*タイトル名を真ん中揃いに。左揃いのままのときは消す*/
}　
#blog-description {
   color: #fff;　　　　　　　/*タイトル下の説明文の文字色。タイトルとそろえる*/
　-webkit-text-shadow: 0 1px 2px #000;
　text-shadow: 0 1px 2px #000;
}

タイトル画像のサイズについて

横幅いっぱいのヘッダー背景に指定する画像については、私は1600px×1000pxの大きい画像をフォトライフにアップロードしました。
画像の高さ（縦）をあまり小さくするとスマートフォンで見た場合、デバイスによっては縦横比、縮尺が変わります。
ある程度の高さのある画像を用意し、ヘッダーの高さはheight: で指定すると画像全体がスマートフォンでは表示されます。
[1600×1000px]

[1600×300px]

こういう全面同じような画像なら問題ないのですが、下のように中央に見せたいものがある画像だと高さを小さくするとおかしくなります。
[1600p×300px]

[1600px×1000px]

画像によって適時調整してみてください。

ただし、あまり大きいサイズの画像はページの表示速度が遅くなるのでソフトやTinyPNGなどで圧縮したほうが良いです。
tinypng.com

はてなグローバルヘッダの変更

はてなのグローバルヘッダ（通知などがみえるやつ）の背景色も変更できます。

/* ヘッダ（グローバルヘッダ）
  グローバルヘッダの中はiframeですが、
  #globalheader-container に背景色や文字色を指定することでirameの中にも色が反映されます。
*/
#globalheader-container {
  background-color: #好きなカラーコード;
  color: #好きなカラーコード;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
}