ブログデザインをリニューアルしましたが、その際に取り入れたカスタマイズについて、これから何回かにわたってご紹介していきたいと思います！
第一弾はこのブログの一番上に表示している固定のメニューバーです。
ここにFacebookページのいいねボタンやTwitterのフォローボタン、Googleのカスタム検索を設定してアクセスしやすいようにしてみました。
スクロールしてもそのまま固定させておくにはjQueryを駆使すると割と簡単にできます。
今回はこのブログの設定をもとに、固定のメニューバーを設置する方法をご紹介します！
ブログの上部に固定のメニューバーを置く方法
jQueryを使えるようにするには、外部のサーバーなどからファイルを読み込むか、自分のブログサーバーにjQueryのファイルを置いてそれを読み込むことが必要です。
設置しやすいのはGoogleのAPIを読み込む方法でしょうね。ファイルを読み込むために、以下のコードをブログのheader.phpに記述します。
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
次はスクロールした時に、メニューバーの位置を指定するためのコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> $(function() { var headerMenu = $('.headerMenu'); var headerMenuTop = headerMenu.offset().top; $(window).scroll(function () { var winTop = $(this).scrollTop(); if (winTop >= headerMenuTop) { headerMenu.addClass('headerFixed') } else if (winTop <= headerMenuTop) { headerMenu.removeClass('headerFixed') } }); }); </script> |
さらにCSSでメニューバーを固定する位置などを設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .headerMenu { height: 36px; font-size: 85%; background: #2255AA; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; } .headerFixed { position: fixed; top: 0; left: 0; width: 100%; } |
最後に以下のコードをbodyタグの手前までに記述しました。これが、メニューバーになるので、この中にメニューバーに置いておきたい内容(このブログでは、FacebookページのいいねボタンやTwitterのフォローボタン、など)を記述して置きます。
1 2 3 | <div class='headerMenu'> // ここに置いておきたい内容を記述。 </div> |
ここでまでで、このブログと同じような固定のメニューバーができたと思います。後は好みにあわせてカスタマイズしてみてください！
