2012年6月17日日曜日

Bloggerのヘッダー(header)をカスタマイズする方法

medium_110746878
photo credit: yasuhisa via photo pin cc

Bloggerのheaderをカスタマイズしてみました

最近Bloggerカスタマイズに夢中の@akiueoです。
Bloggerのヘッダーは独自に用意したテンプレートを使用していない限り、ガジェットになっています。このガジェット、便利な面もあれば逆に不便なところもあります。

特にheaderは変更したくても、できないという方が多いのではないでしょうか。
今回はこのサイトのheaderをどうやってカスタマイズしたのかのご紹介です。


スポンサードリンク


その1 header画像を背景と同化させる
headerガジェットの設定で、「タイトルと説明の代わり」にチェックを入れます。
そして、背景と同じ色で作った画像をアップロードします。

このサイトは背景がWhiteなので、横幅はテンプレート幅に合わせて、縦1pxで作った白い画像を使いました。

Blogger :: AIUEO Lab :: ヘッダーの設定
こうして、本来タイトルやヘッダーになる部分に空白(白)の画像をアップロードして、headerを隠してしまいます。


その2 headerを動かせるようにする
Blogger: AIUEO Lab - レイアウト
本来header部分は移動ができないように固定されています。これをHTMLの編集から解除します。
※HTMLの編集をする前に、テンプレートの保存を忘れずに!

まずは、テンプレートから「HTMLの編集」>「ウィジェットのテンプレートを展開」にチェック>「b:widget id='Header1' locked='true'」を検索(⌘+F)して、「true」を「false」に変更。
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'>
<b:widget id='Header1' locked='false' title='AIUEO Lab (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
これで、headerが移動可能になります。


その3 「HTML/JavaScript」ガジェットを追加
「HTML/JavaScript」ガジェットをheader下に追加し、タグを入力。
<div style="position: relative;">
<img border="0" src=" ※タイトル画像URL "/>
<div style="position: absolute; top: 10px; left: 450px;">
<img border="0" src="※タイトル右側に表示する画像URL"/>
</div> </div>
保存したら、ガジェットをheaderの上に移動します。

その4 marginの微調整
このサイトの場合、上記の手順でやったところheader下に空白ができてしまいました。方法としては、header下のタブリストにmargin-top:-20px;を指定で調整。

おわりに
headerの右側が寂しいと思っていたので、カスタマイズしてみました。
SNSボタンなどをタイトル右側に入れるのも良いかもしれないですね。