WordPressで画面のスクロールに追随するサイドバー(ウィジェット)を実現するプラグイン

アコーディオン

最近色んなオサレブログで見かける「画面のスクロールに追随するウィジェット」ってやつを私もやりたい!

テキスト量が少なくてあまりスクロールしないような記事であれば不満はなかったんだけど、長いページになってしまったスクロールしていくとどうしてもサイドバーウィジェットが無い部分が見えてしまうので何だか寂しいのよ。


         ____
       /      \
      / ─    ─ \   なんとかならない?
    /   (●)  (●)  \
    |      (__人__)     |
     \    ` ⌒´    ,/
     /⌒ヽ   ー‐    ィヽ
    /      ,⊆ニ_ヽ、  |
   /    / r─–⊃、  |
   | ヽ,.イ   `二ニニうヽ. |

いろいろ物色してみたんだけど、Wordpressのサイドバーウィジェットにマッチするようなスクリプトが見当たらないんだ・・・

私がやりたいのは、サイドバーにあるブロックの一番下の要素だけをフローティングさせてスクロールに追随させたかったんだけど、思うようにいかない。

常に最上位に表示されてて他の要素と重なってしまったり。
メニューしか表示できなかったり。
サイドバーじゃなくて画面のトップにしか表示できなかったり。

そうじゃなくて、サイドバーの途中までは固定のままでサイドバーの最後(最下)のウィジェットだけをフローティングさせたいのよ!!
常に見えてるのは嫌なのよ!!

半分あきらめてたんだけど、やっと納得のいく動作をするプラグインを見つけたのでご紹介します。

その名もStrx Magic Floating Sidebar Maker

これで記事が長くなってもサイドバーのウィジェットがスクロールに追尾してくれるので、一定のところまでスクロールしたときに殺風景なサイドバーを見せずに済みますね!!

ただしちょっと注意があります!

広告やコンテンツを画面がスクロールしても表示されるようにするのは良いんですけど、少し注意が必要です。

ライブドアみたいにスクロールしたらサイドバーの広告を固定する – ぼくはまちちゃん!

コチラによるとGoogle先生の規約に引っかかるのでGoogleAdsenseではやらない方が良いのだとか・・・
(やってる人って結構多いんだけどね)

如何なるものをスクロールに追尾させるにしても、十分に規約等に注意を払って自己責任でやっていきましょう。

さて、それでは前置きが長くなりましたけど、設定方法をご紹介していきます。

Strx Magic Floating Sidebar Makerの設定

Strx Magic Floating Sidebar Makerを入手するためにはWordpressのAdminページから「プラグイン」>>「新規追加」でプラグインの検索窓に「Strx Magic Floating Sidebar Maker」と入力して検索すればOKです。

プラグインを入手したらインストール>>有効化してください。

若しくは、下のリンクからダウンロードしてFTPでアップロードしてもOKです。

Strx Magic Floating Sidebar Maker « WordPress Plugins

無事にインストール&有効化が完了したら「設定」>>「Strx Floating Sidebar」をクリックしてStrx Magic Floating Sidebar Makerの設定画面へ移動しましょう。

ここで最低限度設定が必要なのは画像の2か所だけです。

Strx Floating Sidebar Settings

まず、上側の窓に入力されている【#content】の部分をあなたが使用しているテーマのメインコンテンツを囲むブロック要素のIDに書き換えますので、ご自身のテーマのソースを確認してみてください。

例えば最近のWordpressのデフォルトテーマのTwenty Twelveであればそのままでいいと思いますし、私のブログのソースでも【content】になっているので、そのままでも動きましたが皆さんのソースを確認して異なるようであれば変更してください。。

次に【#sidebar】と書かれている部分ですが、これはそのままでも良いんですけどフローティングさせたい要素のIDになりますので、適宜名前を付けてみてください。

仮に【#floating_ad】とします。

floating_ad

上記の2か所の編集が出来たら【Save Change】をクリックして設定内容を保存して、ウィジェットを追加してみましょう。

Adminページの「外観」>>「ウィジェット」でとりあえずサイドバーに【テキスト】を追加します。

テキストのウィジェットに適当な名前を付けて、内容として下のように記述します。

<div id="floating_ad">
 ~ここにフローティングさせたい広告など~
</div>

こんな感じですね

ウィジェット完成

できたら【保存】をクリックして、ご自身のブログのサイドバーを確認してみましょう。

フローティングできましたか?

最後に・・・

上で紹介したのはサイドバーウィジェットを最低限フローティングさせてスクロールに追随するように設定しましたけど、これだけだとスクロールが遅すぎて私は使いにくかったので、下記の部分だけ修正しました。

修正しました

このInactivity Before Every Reposition.と書かれた部分はデフォルトで500だったんですけど、これだとスクロールに付いていくスピードが遅すぎるので50に変更しました。

もしも、追随するスピードやアニメーションのスピードの変更をしたい場合は、「Inactivity Before Every Reposition.」とか「Animate Speed」を適宜変更してくださいね。

追記

暫くの間はStrx Magic Floating Sidebar Makerを使っていたんだけど、若干動作に気に入らない部分があって別のプラグインを使うことにしました。

それはStandard Widget Extensionsというプラグインなんですけど、紹介記事を書いていますので興味が湧いたら一度ご覧ください。

かんぺき!画面のスクロールに付いてくるサイドバーならStandard Widget Extensionsが最高だった件

このプラグインは日本の方が作られたプラグインで、サイドバーをスクロールに追尾させるだけじゃなくて、ウィジェットコンテンツの折りたたみもできてステキです。

Strx Magic Floating Sidebar MakerStandard Widget Extensionsの気に入った方を使えばいいと思うよ。



いいよね?

最後まで私の拙いエントリーを読んでいただいてありがとうございます!
もしもこの記事が少しでもあなたのお役に立てたなら、ぜひ「いいね!」していってください。
また何か新しい発見をお届けできるかもしれません。

関連記事

コメント

※コメントは承認制ですので、表示されるまで時間がかかる場合があります。
  1. この記事へのコメントはありません。

*画像の文字列を入力

オススメ鯖


高速かつ高機能で、しかも安定性抜群!!
私も利用させていただいてますわ

My Tumblr

    http://deltablog01.tumblr.com/post/77273138691http://deltablog01.tumblr.com/post/76325997079http://deltablog01.tumblr.com/post/75899137417http://deltablog01.tumblr.com/post/75253777050

BlogParts

あわせて読みたい

Share Me! Please!!!

このエントリーをはてなブックマークに追加
ページ上部へ戻る