ブログ上部に固定のメニューバーを表示する方法[jQuery]

@Mori2ndです。ブログデザインをリニューアルしましたが、その際に取り入れたカスタマイズについて、これから何回かにわたってご紹介していきたいと思います!

第一弾はこのブログの一番上に表示している固定のメニューバーです。

ここにFacebookページのいいねボタンやTwitterのフォローボタン、Googleのカスタム検索を設定してアクセスしやすいようにしてみました。

スクロールしてもそのまま固定させておくにはjQueryを駆使すると割と簡単にできます。

今回はこのブログの設定をもとに、固定のメニューバーを設置する方法をご紹介します!

スポンサード リンク

ブログの上部に固定のメニューバーを置く方法

jQueryを使えるようにするには、外部のサーバーなどからファイルを読み込むか、自分のブログサーバーにjQueryのファイルを置いてそれを読み込むことが必要です。

設置しやすいのはGoogleのAPIを読み込む方法でしょうね。ファイルを読み込むために、以下のコードをブログのheader.phpに記述します。

次はスクロールした時に、メニューバーの位置を指定するためのコードです。

さらにCSSでメニューバーを固定する位置などを設定します。

最後に以下のコードをbodyタグの手前までに記述しました。これが、メニューバーになるので、この中にメニューバーに置いておきたい内容(このブログでは、FacebookページのいいねボタンやTwitterのフォローボタン、など)を記述して置きます。

ここでまでで、このブログと同じような固定のメニューバーができたと思います。後は好みにあわせてカスタマイズしてみてください!

スポンサード リンク
follow us in feedly

      2014/06/06

 -Blog, WordPress, , ,

  • HN:もりせかんど(@Mori2nd
    岡山在住。Windows、iOS等システム開発の仕事をしています。iPhone、Mac、PCなどデジタルなことが好き。
    >>詳しいプロフィール

    follow us in feedly track feed