はてなブログのヘッダーを画像にする方法

#blog-title {background:url(http://***.jpg) no-repeat right top; margin:5px 0px; width:760px; height:420px;
background-color:#2ca9e1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  padding:20px;
  -webkit-box-shadow: 5px 0px 10px -10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 5px 0px 10px -10px rgba(0, 0, 0, 0.7);
  box-shadow: 5px 0px 10px -10px rgba(0, 0, 0, 0.7);
  }

えー僕の場合はこんな感じです。
background:url(http:～)は画像のＵＲＬを貼って下さい。
フリッカーやフォトライフのＵＲＬはどうもダメだったので、自分でサーバーとかに上げたＵＲＬにしましょう。

width:***px height:***px はご自分のサイトのサイズに合わせて。

background-color: で、はみ出た部分の色を指定しています。
本当は画像が足りない部分だけ、背景が見えるって感じです。

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;

これは角の丸っこいとこの指定。ブラウザによっては丸くなってないかも。
クロームは丸く見えてます。

  -webkit-box-shadow: 5px 0px 10px -10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 5px 0px 10px -10px rgba(0, 0, 0, 0.7);
  box-shadow: 5px 0px 10px -10px rgba(0, 0, 0, 0.7);

ボックスの影の指定。これも角丸に同じくブラウザ依存の可能性あり。

んで、これをデザインのカスタムＣＳＳに貼ればＯＫ。
あ、ただテンプレによっては定かではないので、僕のテンプレ「Aero」なら適用できます。

まぁシンプルなのがはてなブログの良いところではあるんですけどね。

■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□

初めてカメラ以外の話を書いた気がるするよ。