はてなブログのヘッダー、タイトル画像の設定について

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

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

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

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

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

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

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

【追記】はてなの標準機能ではタイトル画像は1000px 200px以内しか表示できませんが、CSSで標準機能のタイトル画像の高さを変更する方法を詳しく解説記事を書いたので、以下の記事を参考にして下さい。

【コピペでOK】はてなブログのタイトル画像の上下の余白を消す・高さを変更する【css】 - Minimal Green

タイトル名の文字の色変更、中央寄せ

タイトルの位置・文字の色の変更、文字を真ん中寄せにしたいときは以下のCSSで調整してください。以下のコードをデザインCSSに追加。

/* タイトル画像を設定していないとき */
#title,
#title a {
  color: #fff;/* タイトル文字の色 */
  padding-top: 70px;/* タイトル位置・上からの高さ */
}
#title,
#blog-description {
  color: #fff;/* タイトル文字の色 */
  text-align: center;/* 中央寄せ */
}

.header-image-enableは「タイトル画像にテキスト文字を重ねる」ときのclass指定です。テキストは使わず「画像のみ」の場合は.header-image-onlyになります。

/* タイトル画像・テキストを設定したとき */
.header-image-enable #title,
.header-image-enable #title a {
  padding-top: 70px;/* タイトル位置・上からの高さ */
}
.header-image-enable #title, .header-image-enable #blog-description {
  color: #fff;/* 文字の色 */
  text-align: center;/* 中央寄せ */
}

/* タイトル画像のみ中央寄せ */
.header-image-only #blog-title #blog-title-inner {
  text-align: center;
  margin:0 auto;/* 中央寄せ */
}

上記で中央寄せにならないときは以下の記述を加えてみてください。テーマによってはタイトルのclass指定が異なることがありますので、chromeの開発者ツールなどで検証してみて下さい。

#blog-title {
    text-align: center;
}

または

#blog-title-content {
   text-align: center;
}

cssで直接指定する

はてなのタイトル画像機能を使わず直接指定する方法。見え方は上と同じ。以下のコードをデザインCSSに追加。

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

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

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

一番簡単な方法は、はてなブログの管理画面＞デザイン＞背景画像から好きな画像をアップロードするだけです。

ただしこの方法は「Innocent」や「Naked」など一部のブログテーマでしか使えませんのでご注意下さい。

#blog-titleに横幅いっぱいに背景画像を指定する

以下のコードをデザインCSSに追加。はてなフォトライフに画像をオリジナルサイズでアップロードし、背景画像URLのところに画像のアドレスを入れてください。

#blog-title {
    background-image: 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%に */
    overflow-x: hidden;
}
#title,#title a {
    -webkit-text-shadow: 0 1px 2px #000;
    text-shadow: 0 1px 2px #000;
    color: #fff;/* タイトル名の文字の色 */
    margin: 0;
    padding-top: 120px;/* タイトル名の上からの位置 */
    text-align: center;/* タイトル名中央寄せ */
}
#blog-description {
   color: #fff;/* 説明文の文字色 */
   -webkit-text-shadow: 0 1px 2px #000;
   text-shadow: 0 1px 2px #000;
}

スマートフォンでもヘッダーが見切れないよう調整する

.header-image-only #blog-title #blog-title-inner {
  position: relative;
  background-size: cover;
  height: auto;
}

.header-image-only #blog-title #blog-title-inner:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: （画像の縦÷横）%;
}

.header-image-only #blog-title #blog-title-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

はてなブログのヘッダー画像を挿入している方のための適切なCSSスタイリング | ゴトーのブログ

【追記】Media Queriesで画面サイズによってタイトル背景画像を切り替える

この方法は、レスポンシブデザインのテーマを使用していて、タイトル背景画像を公式タイトル画像アップロード機能を使わず、横幅100％にCSSで直接している場合のカスタマイズです。

上記のようにあらかじめ大きいサイズの画像を使うのは画像ファイル容量が大きくなるためあまり好ましくありません。

そこでMedia Queriesで画面サイズによってタイトル背景画像を切り替える方法をおすすめします。

細かくブレクポイントを設定した場合。（画面サイズによって細かく背景の画像を指定したい場合）

/* 1024px以上の幅サイズ */
#blog-title {
    background-image: url("PC背景画像URL"); /* PC用タイトル背景画像 */
}
    @media screen and (max-width: 1024px) {
/* 1024pxまでの幅サイズ */
     #blog-title {
    background-image: url("タブレット背景画像URL"); /* タブレット用タイトル背景画像 */
    }
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅のサイズ */
      #blog-title {
    background-image: url("スマホ背景画像URL1"); /* スマホ用タイトル背景画像1 */
    }
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅のサイズ */
   #blog-title {
    background-image: url("スマホ背景画像URL2"); /* スマホ用タイトル背景画像2 */
    }
}
@media screen and (max-width: 320px) {
/* 320pxまでの幅のサイズ */
     #blog-title {
    background-image: url("スマホ背景画像URL3"); /* スマホ用タイトル背景画像3 */
    }
}

現実的にはブレクポイントは一つにして

@media screen and (max-width: 768px) {
/* 768pxまでの幅のサイズ */
      #blog-title {
    background-image: url("スマホ背景画像URL1"); /* スマホ用タイトル背景画像1 */
    }
}

または

    @media screen and (max-width: 480px) {
/* 480pxまでの幅のサイズ */
   #blog-title {
    background-image: url("スマホ背景画像URL2"); /* スマホ用タイトル背景画像2 */
    }
}

で背景の画像を切り替えるのが良いと思います。

#blog-title-innerに背景画像を指定している場合は同様にそちらのbackground-imageの指定を切り替えてください。

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

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

/* ヘッダ（グローバルヘッダ）
  グローバルヘッダの中は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);
}

background-color: transparent;で背景透明にできます。