ネットビジネス独立宣言

SEO対策済みテンプレートへのブログバナー設置の要望が多いので記載しておきます。

やはり無料ブログのテンプレートとしては効果的なものですから、ヘッダー画像をオリジナルへ変更することでバリエーションも無限に増えて差別化もできてより良い見栄えになっります。>>>SEO対策済みテンプレート

SeeSaaブログを例に紹介します。

デフォルトのSEO対策済みテンプレートはこんな感じです。

スタイルシートの/* タイトルエリア */内

div#header {
width:860px;
height: ●px;
background-image: url(http://●.up.seesaa.net/image/●.jpg);
background-repeat: no-repeat;
background-position: center top;
width: auto;
}

ヘッダー部分の情報を上記の様に書き換えます。

width:860px;はこのテンプレートのデフォルトの幅になります。
height: ●px;は●の部分を用意した画像の高さに置き換えてください。

background-image: url(http://●.up.seesaa.net/image/●.jpg);は
ファイルマネージャーを使ってアップした画像のアドレスです。

タイトル位置の調整

div#header-inner {
width:800px;
margin:0 auto ;
padding: 10px 0px;
}

width: は文字の左右の位置指定
padding: は10pxの部分は高さの位置指定になります。

こんな感じで表示されます。

もしも、画像加工が面倒だという場合は width:860px; と height: ●px; を手持ちの画像サイズに変更するとう手もあります。

その際はスタイルシート * レイアウト */ の中の div#main-inner と div#side-inner の width:の数値も書き換えてください。

HTML部分の書き換え

デフォルトのままでは、ヘッダー画像の横の部分の空白が気になるので、これを消したい場合にはHTMLを変更するわけですが、

の二行を

の上に持ってくると完成です。

フッター画像

フッターに画像を載せる方法も clear:both; の一行を付け加えるだけでヘッダー画像と同じです。

width:860px;
height: ●px;
background-image: url(http://●.up.seesaa.net/image/●.jpg);
background-repeat: no-repeat;
background-position: center top;
width: auto;
clear:both;