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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

スポンサーリンク

シェア・フォローいただけると大変うれしいです!

SNSフォロー2
著者紹介

記事を書いた人

もりせかんど(@Mori2nd

岡山在住の30代。Windows・iOSシステム開発者。iPhone、Mac、PCなどデジタルなことが好き。「岡山スマホユーザー会」毎月第3日曜日に開催してます!

詳しいプロフィールはこちらへ。