スクロールすると追尾するサイドバーにする

 

stinger3に付随している「スクロール広告用」と、サイドバーを追
尾させるプラグインの検証をしてみました。

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

 
でも追尾サイドバーが良くないと言う人もいます。

追尾サイドバーの欠点

 

見栄え･印象

｢最初は普通にスクロールできていたが、途中からついてくる｣とい

うことから、多くの人は｢ うっとうしい｣｢ うざい ｣といったマイ
ナス面の印象を感じると思います。

もっとも、これは僕の主観ですので人によりけりです。。

サイドバーのコンテンツの効果

 

より主観に依らない理由として追尾型の場合、長いサイドバーのう
ち、ほとんど最下部しかユーザーの目に入れてもらえないという問
題も有ります。

最下部のコンテンツだけが重要であれば問題ありませんが、まとめ

ブログでありがちな広告をひたすら並べている形式の場合です。

つまり、並べられたすべてのコンテンツが 平等な意味を持ってい

る場合、わけもなく最下部のコンテンツだけ注目させるデザインは
良いデザインとは言い切れません。

ですが、メインコンテンツより短いサイドバーに対して、なんにも
しないというのは少々考えものと思うのです。

 

サイドバーが末尾までスクロールした後は、その場所は完全な空白
地帯になります。

 

特にまとめブログのようにメインコンテンツが長い場合、その空白
地帯は結構な頻度でユーザーの目にとまるはずなので、非常にもっ
たいないです。
そこでサイドバーを追尾させるプラグインを紹介します。

サイドバーを追尾させるプラグイン

 

【 Q2W3 Fixed Widget 】

インストール方法

WordPress管理画面 ⇒ プラグイン ⇒ 新規追加 ⇒
「Q2W3 Fixed Widget」で検索

次に「いますぐインストール」をクリックします。

次に「プラグインを有効化」をクリックします。

これで完了です。
プラグインの設定

WordPress管理画面 ⇒ 外観 ⇒ Fixed Widget Options

にあります。

とりあえずこのままでいいと思います。

 

ウィジェットの設定

スクロール追尾させるウィジェットを指定します。

 

ウィジェットの下にチェックボックスが追加されます。それにチェ
ックを入れると、指定したウィジェットのコンテンツがスクロール
時、追尾します。

その結果

 

 

追尾はしたが、サイドバーの背景色が変わった（透過のなった？）

フッター領域までくい込んだ。（スクロールが止まらない）

私のstinger3（かしわもち）ではあわないのか？

プラグインの設定変更で修正できるかも？

 

【 Strx Magic Floating Sidebar Maker 】

インストール方法

 

WordPress管理画面 ⇒ プラグイン ⇒ 新規追加 ⇒
「Strx Magic Floating Sidebar Maker」で検索

 

プラグインの設定

WordPress管理画面 ⇒ 設定 ⇒ Strx Floating Sidebarにあります。

上側の窓に入力されている「#content」の部分に、あなたが使用し
ているテーマのメインコンテンツを囲むブロック要素のIDに書き換
えます。

 

次に「#sidebar」と書かれている部分ですが、そのままでもいいが
フローティングさせたい要素のIDになります。

 

私の場合、サイドバーの一番下のコンテンツを追尾させたいので、
以下のようにした。
Content Selector　⇒　#wrap-in #main

Sidebar Selector ⇒　#floating_ad
上記の2か所の編集が出来たら「Save Change」をクリックします。

次に外観 ⇒ ウィジェットに移動します。

追尾させたいコンテンツを開きます。

そのテキスト内の先頭に

「<div id=”floating_ad”>」を記述します。

次にそのテキスト内の最後尾に「</div>」を記述します。

保存します。

 

その結果

スクロールしてもすぐに追尾してくれなかった。(遅れて出現し
た）

なんか動きが変？

そのままスクロールしていくと、フッター下部まで下がって消えて
しまった。
サイドバーの最後尾のコンテンツのみ有効なのか？、下から2番目
のコンテンツに設定したら、最後尾のコンテンツが表示されません
でした。

尚、ちゃんと設定すれば思ったように追尾するかも？

 

【 Standard Widget Extensions 】

インストール方法

WordPress管理画面 ⇒ プラグイン ⇒ 新規追加 ⇒
Standard Widget Extensions」で検索

 

プラグインの設定

WordPress管理画面 ⇒ 設定 ⇒ Standard WEにあります。

メインカラムＩＤとサイドカラムＩＤの確認方法

自分のブログのメインカラムのIDを調べるには、ワードプレス管理
画面 ⇒ 外観 ⇒ テーマ編集 ⇒ index.php を開いて、ＩＤを確認
します。

 

同じくサイドカラムのＩＤを調べるには、side.phpを開いて確認し
ます。

<div id=”side”>のような記述されていると思います。

 

私の場合以下のように設定してみた。

メインカラムの ID　⇒　main

サイドバーの ID　⇒　floating_ad

ウィジェットのクラス名　⇒　widget

 

その結果

スクロールしてもすぐに追尾してくれなかった。(遅れて出現し
た）
サイドバーの最後尾のコンテンツのみ有効なのか？、下から2番目
のコンテンツに設定したら、最後尾のコンテンツが表示されません
でした。

尚、ちゃんと設定すれば思ったように追尾するかも？

 

まとめ

 

stinger3に付随されている「スクロール広告用」ウィジェットと、
プラグインを使用したやりかたで、効果的にきれいに追尾してくれ
るか検証してみた。

 

尚、stinger3に付随されている「スクロール広告用」のやり方は、
追尾させたいコンテンツを「スクロール広告用｣ウィジェットに放
り込むだけです。

 

 

結果はstinger3に付随されている「スクロール広告用」ウィジェッ
トを使用した方が、私のブログでは違和感がないように動いてくれ
ました。

 

現在はこちらを使用しています。

各プラグインとも詳細に設定の修正はしませんでした。もしこまか
く設定したら、またはＩＤを変えたら使いやすいかもしれません。

 

最後に注意しておきます。

グーグルアドセンスの広告を追尾せせると違反になります。ほかの
広告やコンテンツでご利用してください。