Maccle

スクロールするとウィジェットを定位置にフロートして移動させるプラグイン「Strx Magic Floating Sidebar Maker」

約 4 分
スクロールするとウィジェットを定位置にフロートして移動させるプラグイン「Strx Magic Floating Sidebar Maker」

WordPressを使ってブログを書いていて、その記事自体のコンテンツの物理的な高さが長くなった場合、もしくはトップページやアーカイブページでも、コンテンツの長さとサイドバーの長さのバランスが合わないときがあって、下にページをスクロールするとサイドバーにウィジェットが何もなくなってさみしい感じに思えることはありませんか??

そんなときに便利なWordPress用プラグイン「Strx Magic Floating Sidebar Maker」が、「wpmu.org」のこちらの記事で紹介されていたので、メモ。

このプラグインは、例えばwebページを下方にスクロールした際に、サイドバーにある複数のウィジェットの中から、広告バナー用のウィジェットについて、それ自体の位置も過ぎてスクロールされると、常に定位置までフロートアニメーションしてついてくるような効果を与えることができますよ。

プラグインなので、利用中のテーマに修正を加えたり、新たにCSSやjQueryで組まなくても使えるのが便利です。

ビデオデモはこちら。

プラグインをインストール後、有効化すると、「設定」メニューに「Strx Floating Sidebar」オプションが追加されます。

最初に設定しておかなければいけない部分は、この”Content Selector”と”Sidebar Selector”。

要は、メインコンテンツの全体部分を囲っているブロック要素のCSSのID(たとえば、#content とか)と、あなたがフロートさせたいサイドバーもしくは個別のウィジェットのCSSのID(たとえば、#widget-ads とか)を指定しておきます。

これをしないと、ウンともスンともいいません。
まずは、あなたのブログのテンプレートか、実際のソースを見て確認してみましょう!

例えば、典型的な以下のようなHTML構成だったら、”Content Selector“ には “#content” を、”Sidebar Selector” には “#widget-ads” を指定しておきます。

その他のオプション


あとは、ページの読み込み開始から効果を有効にするまでの時間や、スクロールしたときにフロートを開始するまでの遅延時間などをミリ秒単位で指定するオプションなどがあります。

コメントが多いサイトとか、記事の長さが半端なくて、スクロールするほどサイドバー領域がさみしくて仕方なかったよ!という人はぜひ使ってみてください。
広告の露出機会と収益の向上も望めるかもしれませんね!

Strx Magic Floating Sidebar Maker
ダウンロード

アニメーションじゃなくて定位置で固定したい場合

「Strx Magic Floating Sidebar Maker」プラグインでは、あるウィジェットがスクロールして隠れてしまった際に定位置までフロートアニメーションして表示するものでしたが、スクロールしてサイドバーに何もなくなったときに、アニメーションさせずに常に定位置にただ表示させておきたい場合は、プラグインじゃないですけど、こんなのがあります。

Smart Floating Banners

この仕組み(サンプルコードのHTMLとCSS)を見る限り、テーマやウィジェットのソース構成によっては、サンプルのJavascriptの “banner” の部分だけを、定位置に表示したいテンプレート内のウィジェットのCSSのセレクタに置き換えれば実現できそうですね!

ウィジェットを囲むクラスの値が “widget-ads” だった場合

HTML:

この記事を書いたひと

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

コメントはこちら

*

COMMENT ON FACEBOOK