ヘッダータイトル画像の調整 コンテンツ幅を揃える・スマートフォン最適化

タイトル画像を設置したときの表示を調整出来ます。

スマートフォンで見切れないようにしたい。

1141px以下での表示でタイトル画像の縦横比を維持します。 padding-top: 20%;/* タイトル画像の高さ÷横幅％ */のところは各自のタイトル画像のサイズに合わせて変更して下さい。

/* ヘッダーの縦横比維持  */
@media screen and (max-width: 1141px) {
.header-image-only #blog-title #blog-title-inner {
  position: relative;
  background-size: cover;
  height: auto;
  width: 100%;
  max-width: 1000px;/* タイトル画像の横幅 */
  margin: 0 auto;
}

.header-image-only #blog-title #blog-title-inner:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 20%;/* タイトル画像の高さ÷横幅％ */
}

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

スマートフォンのヘッダーの高さ調整はこちらの記事もご参照下さい。
test-test-test.hatenadiary.jp

PC版のタイトル画像をコンテンツ幅に揃えたい

揃っていない

PC版ではコンテンツ幅1142pxなのですが、はてなブログのタイトル画像は標準では高さ200px、横幅1000pxです。コンテンツ幅とタイトル画像を揃えるには以下のCSSをデザインCSSぬ追記して下さい。
1142px以上のブラウザではタイトル画像を1142pxに引き伸ばします。ただ少し画像が荒くなりトリミングが変わります。

揃った

タイトル画像のみ

@media screen and (min-width: 1142px) {
.header-image-only #blog-title #blog-title-inner {
    background-repeat: no-repeat;
    position: relative;
    height: 200px;/* 高さ */
    width: 1142px;/*  横幅 */
    margin: 0 auto;
    background-size: cover;
}
}

タイトル画像＋タイトルテキスト

@media screen and (min-width: 1142px) {
.header-image-enable #blog-title #blog-title-inner {
    background-repeat: no-repeat;
    position: relative;
    height: 200px;/* 高さ */
    width: 1142px;/*  横幅 */
    margin: 0 auto;
    background-size: cover;
}
}

PC版でぴったり1142pxできれいに表示したい

タイトル画像アップロード機能を使わない

タイトル画像機能を使うとトリミングが変わってしまうのでタイトル画像をPC版でぴったり1142pxできれいに表示したいときは、以下のようにして下さい。
①はてなブログのタイトル画像アップロードから画像を外す（アップロード機能は使わない）
②幅1142pxでタイトル画像を作る
③タイトル画像をはてなフォトライフにアップロード　画像URLを『オリジナルサイズ』で取得する
④デザインCSSに以下のCSSを追加する

/* タイトル画像オリジナル */
#blog-title #title a {
    /* タイトルテキスト文字を非表示 */
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 200px;/* ヘッダーの高さ */
    top: 0;
    left: 0;
}
#blog-title #blog-description {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}
#blog-title-inner {
    background-size: cover;/* 場合によってcontain */
    background-image: url("タイトル画像URL");
    background-position: center;
    padding: 0;
    background-repeat: no-repeat;
    width:100%;
    max-width:1142px;
    margin:0 auto;
    position: relative;
    height: auto;
}

#blog-title-inner:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 17.5%;/* 画像の高さ÷横幅 */
}

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

縦横比を維持したままタブレット・スマートフォンでも表示出来ます。 padding-top: 17.5%;/* 画像の高さ÷横幅 */は高さを200px以外にしたときに変更して下さい。
参考：
www.gamehuntblog.com

この方法では高さはぴったり200pxではありません。高さもぴったりにしたいときは私のブログ記事を参考にして、media queryで画面サイズごとにタイトル画像を切り替える調整をしてみてください。
blog.minimal-green.com

タイトル画像上下の余白を消したい

タイトル画像上下の余白を消したいときは以下のようにCSSを追加して下さい。

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

他にもスマートフォン用の画像を別途作って表示したいなど細かい調整も出来ます。以下の記事を参考にしてみてください。
blog.minimal-green.com

タイトル画像と背景画像を重ねる

以上色々と方法を書きましたが、タイトル画像は背景透過で見切れても問題ないデザインのものが良いと思います。
はてなブログのタイトル画像アップロード機能を使い、背景画像とタイトル画像を重ねて表示するとオリジナリティが出せておすすめです。スマートフォンでの調整は上記を参考にして下さい。
あわわこさんのブログがかわいくカスタマイズされています。

yurui.hatenablog.jp