画面最上部に固定されたメニューバーの作り方

August 17, 2013

menubar_130817_01
テーマをStinger2に変えて1週間が経ちました。こたら（@kotala_b）です。
テーマの変更と同時に今までやろうと思っていてなかなか手がつけられていなかった部分のカスタマイズも同時に行いました。
そのうちのひとつが画面最上部に設置した、スクロールしてもついてくるメニューバーです。

画面最上部に固定されたメニューバーの作り方

固定表示させたい部分にCSSのpositionプロパティを使うことで、スクロールしても最上部にピッタリくっついてくるメニューバーを作成できます。
固定メニューバーの左側にはソーシャルアイコンをWebフォントで表示し、右側にはGoogleアドセンスの検索ボックスを置きました。
作り方としては

Webフォントをダウンロードし実装する
Webフォントを使ってソーシャルアイコンを並べる
Googleアドセンスの検索ボックスを導入する
全体をdivタグで囲いpositionプロパティを使って位置を最上部に固定させる

という順番で行いました。

1.Webフォントをダウンロードし実装する

アイコンとして使えるWebフォントはこちらで紹介されていました。
使いたいアイコンフォントを選んでWebフォントをカスタマイズ作成できるサービスいろいろ | memobits
僕が使っているアイコンは「IcoMoon App - Icon Font Generator」から選びました。
IcoMoonの導入方法はこちらを参考に。
Retinaでもボケない「シンボルアイコン」を使いこなそう！ | 株式会社LIG
Icomoonからダウンロードしたファイルの中にあるCSSファイルの名前を変更し、CSSファイルごとサーバーへアップロードしました。

2.Webフォントを使ってソーシャルアイコンを並べる

左側のソーシャルアイコンをWebフォントで並べていきます。
ソーシャルアイコンをWebフォントで表示する方法はこちらを参考にしました。
ソーシャルアイコンをWebフォントで表示する方法を色々ご紹介｜Webpark
唯一Feedlyのアイコンだけ公式の画像を利用しています。
Feedlyアイコンの利用方法はこちら。
最近人気の feedly の登録アイコンを設置してみた | ひとぅブログ

3.Googleアドセンスの検索ボックスを導入する

Stinger2には検索ボックスが用意されていますが、僕はGoogleアドセンスで用意されている検索ボックスを使ってみることにしました。
検索向けAdSenseは公式のヘルプを見ながらコードを作成し貼付けました。
検索向け AdSense - AdSense ヘルプ

4.全体をdivタグで囲いpositionプロパティを使って位置を最上部に固定させる

cssでpositionプロパティのfixedを使い表示位置の固定をします。
positionプロパティについてはこちらを参考にしました。
CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture

画面最上部に固定されたメニューバーのコード

menubar_130817_05
この4ステップで完成したコードがこちら
[php]

[/php]
こっちはCSS
[css]
/------固定メニューバー-----/
#header-top {
height:40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
width:100%;
position:fixed;
top:0;
left:0;
index:10000;
background-color: #f3f3f3;
}
#header-topin {
width:986px;
margin: 0 auto 0 auto;
}

#header-sns {
font-size:20px;
line-height:2;
float: left;
width: 300px;
}

#header-sns ul li{
float:left;
position: relative;
margin-right:15px;
text-shadow: -1px 1px rgba(255, 255, 255, 0.8);
}

#header-sns ul li a {
text-decoration: none;
color: #333;
font-family:icomoon;
padding: 0 5px;
}

a.iconh:before{
content:"h";
}
a.icont:before{
content:"t";
}
a.iconf:before{
content:"f";
}
a.iconr:before{
content:"r";
}
a.iconm:before{
content:"m";
}
a.iconl:before{
content:"l";
}
#header-sns ul li a.iconh:hover {
color: #006af0;
}
#header-sns ul li a.icont:hover {
color: #00acee;
}
#header-sns ul li a.iconf:hover {
color: #3b5998;
}
#header-sns ul li a.iconr:hover {
color: #e77600;
}
#header-sns ul li a.iconm:hover {
color: #006af0;
}
#header-sns ul li a.iconl:hover {
color: #006af0;
}
[/css]
ちなみに出来上がったコードはどこに貼っても大丈夫だそうです。

今回のposition:fixedで指定したボックスはどの場所に書いてあっても指定した場所に表示しようとするので、あまり触ることのないフッター（footer.php)に書いても問題なく表示されますよ。
【Stinger2】ページの一番上から離れようとしない固定のメニューバーの作り方 | Oh-Blog