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

シェアいただけると大変うれしいです!

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

シェアいただけると大変うれしいです!

フォローもぜひ!

SNSフォロー2
著者紹介

この記事を書いた人

もりせかんど(@Mori2nd

岡山在住。Windows・iOS等のシステム開発者。「岡山スマホユーザー会」幹事メンバー。iPhone、Mac、PCなどデジタルなことが好き。

詳しいプロフィールは「About」ページへ。

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


− 5 = 3

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">