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

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

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

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

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

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

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

SPONSORED LINK

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

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

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

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

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

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

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

SPONSORED LINK

SNSでのシェア・コメントが励みになります

フォローもぜひ

follow us in feedly
著者紹介

執筆者:モリダイ(@Mori2nd

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

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