独立宣言メルマガ

SEO対策済みテンプレートのヘッダーバナー変更

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

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

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

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

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の部分は高さの位置指定になります。

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

SEOテンプレ

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

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

 

HTML部分の書き換え

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

SEOテンプレ

の二行を

SEOテンプレ

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

SEOテンプレ

 

フッター画像

フッターに画像を載せる方法も 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;

カテゴリー: 無料ブログ | Tags: , コメント(0)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トラックバックURL: http://dokuritsusengen.info/seotenpurebanner.html/trackback/