課題6　はてなブ​ログのカスタマイズ

はてなの記述
  1. はてなブログの幅を変更する（hatena-body）。
  2. 背景画像または背景色を変更する。
  3. h1の背景も画像にする。

※はてなではページのヘッダー・ページのフッターにHTMLを記述する。
　指定したデザインによって変更できない事が多い。
　スタイルシート部分には、ヘッダー・フッターで指定したCSSを指定する。

　管理⇒デザイン⇒詳細タブ⇒ヘッダ/フッタ/スタイルシートの編集
　スタイルシートの部分に、今回は鴬色を適用。

　body{background-color:#b6b758;}

<記事部分の背景色を変更・幅を変更>

div.hatena-body {
 width : 900px ; 
 margin	: 0 auto ;
 text-align : left;
 background-color: #ffffff; /*←記事部分の色を白に指定*/
}

<ヘッダー部分の画像を変更する>

h1の背景画像にオリジンル画像を設定する。

・UPした写真のURLを確認する方法⇒仮に画像貼り付け、ソースでURLを確認する。

〜HTML部〜

<div class="nikki-title"><h1 class="h1taitle">Web徒然なつままに</h1></div>

〜CSS部〜

h1{
display: none;
}

div.nikki-title{ /*←nikki-title*/
 margin: 0 0 0 0;
 padding : 0px;
 background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/b/あなたのID/20120331/UPした写真名.png");
 width: 1000px; /*←配置する画像の幅*/
 height: 292px; /*←配置する画像の高さ*/
 background-repeat: no-repeat;
}