テンプレートPart2：ヘッダーバーの作成と固定化

ブログのカスタマイズを着々と進行しています。

主な変更点は以下の通りです

• ヘッダーバーにオリジナル画像を使用
• 背景色を白に変更
• 自己紹介テキスト削除
• サイドバーサイズ縮小
• フッターにオリジナル画像を使用

特に、ヘッダーバーの作成は昔からやりたかったことです。

・ヘッダーバー作成
近年、Faceboo、Google+、ニコニコ動画など、大手SNSでは必ずヘッダーバーを見ますね。
ヘッダーバーはSNSにはなくてはならない存在になっている気がします
やはり、大規模なコンテンツを抱えるSNSでは、どのページでも使えるナビゲーションとしてヘッダーバーが重要な役割をしているのでしょう

この小規模な存在ですが、

ヘッダーバーを実現する方法は画像を使用するのが一番メジャーなやり方のようです
ヘッダーバーの作成はInkscapeで行いました。

グラデーションのかけ方はこちらのサイトを参考にしています
http://kumacrow.blog111.fc2.com/blog-entry-441.html

 

実際は、画像にリピート設定をするので、幅は1pxでいいです。
なので、こんな爪楊枝みたいな画像を作成します。

画像を作成したら、PicasaにアップロードしてCSSで読み込みをします。
このサイトでは、下のようなコードを記述しています。

#topnav{
background:url("https://lh6.googleusercontent.com/-5LgziB_6eGw/UJppE__ELdI/AAAAAAAAANw/pCZ_QDxE1cc/s800/headerbar.png")  repeat-x;
height:40px;
border-bottom: 3px double #999;
}

ポイントは、background:urlの後のrepeat-xです。 これで、画像を繰り返して表示し、ヘッダーバーのデザインを実現しています。

ヘッダーバーに関しては、さらに作りこんでもう一度詳細に触れたいと思います。