WordPressカスタマイズ

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

更新日:

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

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

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

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

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

スポンサードリンク

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

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

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

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

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

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

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

スポンサードリンク

ピックアップ記事

1

iPhoneで格安SIMを使って月額料金を節約したい!でも敷居が高くてわからない。そんな風に考えている人はきっと多いはず。ここではiPhoneで格安SIMを利用するまでの手順・乗り換え方法や注意点など、詳しくご紹介しています。

2

機種変更時に最適なiPhoneのバックアップ方法をご紹介しています。iCloudバックアップではなく、iTunesの暗号化バックアップから復元することでスムーズにデータ移行できます。各アプリのIDやパスワードも引き継ぐにはこの方法がおすすめですよ。詳しい手順も解説していますので、ぜひ参考にしてみてくださいね。

3

AUKEYのUSB充電器「72W ACアダプター PA-Y12」を購入してみました。最大60WのUSB Type-C PD(Power Delivery)対応でワット数の異なるパソコンにもパワフル充電。追加のUSB-Aポート2つでスマホやタブレットの充電にも大活躍。使ってみた感想をご紹介します。

4

パソコン内のデータ整理とバックアップ目的でポータブルハードディスクを購入してみました。それがウエスタンデジタルの「WD Elements Portable」です。大容量なのに小さくて収納や持ち運びが楽です。商品の特徴や使ってみた口コミもご紹介します。

5

快適なパソコン作業環境を求めて21:9ウルトラワイドモニターを購入してみました。それがLGエレクトロ二クスの「29UM69G-B」29インチです。1枚のディスプレイでスクエアタイプのモニター2枚分の広さを実現。ウィンドウを並べての作業が捗りますね!商品の特徴や使ってみた感想をご紹介します。

-WordPressカスタマイズ

Copyright© ディライトモード , 2019 All Rights Reserved.