ブラ○モトシ

フィジカルグラフィティ

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

#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:~)は画像のURLを貼って下さい。
フリッカーやフォトライフのURLはどうもダメだったので、自分でサーバーとかに上げたURLにしましょう。

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);

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

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

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

■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
ブログランキング・にほんブログ村へ
初めてカメラ以外の話を書いた気がるするよ。