[M]まったり・こんふぃでんしゃる【Confidential】

多くのオサレブログで採用されている画面のスクロールに付いてくるサイドバー。

長いエントリーなどの場合一定のところまで画面をスクロールするとサイドバーが固定されて追随するようにしたかったの。

そこで、以前まではStrx Floating Sidebar Settingsってプラグインを使ってました。

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

Strx Floating Sidebar Settingsもそれなりに満足して使ってたんだけど、時々アニメーションの動きがおかしかったり、スクロールに追随はするものの要素が画面外に飛び出してしまったりと若干の挙動に不満があったんですよね・・・

そこで見つけたのがStandard Widget Extensionsです！

　　　　　　　　　＿＿＿_
　　　　　　　 ／⌒　　⌒＼
　　　　　　／　（⌒）　（⌒）＼　　　納得だおｗｗ
　　　　 ／　 ::⌒（__人__）⌒::: ＼
　　　 　|　 　 　　　|::::::|　　　,—、
　　　　 ＼ 　 　 　 `ｰ’　　　しＥ　|
　　　 　／　　　　　　 　　　 l､Ｅ ﾉ
　　　／　　　　　　　　　　　 ｜　|
　　 （　　 丶- 、　　　　　　 ヽ_／
　　　　`ー､＿ﾉ

このStandard Widget Extensionsってプラグインはサイドバーをエレベーターのようにスクロールに追随させるだけじゃなくて、サイドバーの要素を折りたたんだりすることもできるんだけど、とりあえず私は折り畳みは不要なので、エレベーターだけ使っています。

Standard Widget Extensionsの設定

インストール～有効化に関しては、Wordpress管理画面の「プラグイン」＞＞「新規追加」でプラグインの検索窓に【Standard Widget Extensions】で検索すればOKです。

もしもダウンロードしてFTPでアップしたいのなら下のリンクからどうぞ。

Standard Widget Extensions « WordPress Plugins

インストール～有効化後にWordpressの管理画面に「設定」＞＞「Standard WE」をクリックすると下記のような設定画面になります。

ここでイロイロ設定項目があるんですけど、Wordpressのデフォルトテーマである「Twenty Twelve」「Twenty Eleven」などを使っている場合は殆ど設定する必要がありません。

まずはじめに「General」の部分を設定していきましょう。

3か所入力窓がありますけど、今回はアコーデオンは使わないので「ID of Your Main Column」と「ID of Your Sidebar」だけ入力すればOKです。

殆ど設定項目はStrx Floating Sidebar Settingsと同じなんですけど、「ID of Your Main Column」には今現在使用しているWordpressテーマのメインカラムがどんなCSSのIDで囲まれているのかを入力します。

同じく「ID of Your Sidebar」にはサイドバー全体を囲むCSS　IDが何なのかを入力します。

3つ目の窓に「Class of Widgets」がありますけど、アコーデオンを使わないのなら入力は不要ですし、使うのであれば個々のサイドバーウィジェットを囲むCSSのクラスを入力しておきます。

次に「Accordion Widgets」の設定項目です。

ココはアコーデオンを使うのであればAccordion Widgetsの設定を「Enable」にしますが、今回私はアコーデオンを使わないので「Disable」を選択します。

次に「Sticky Sidebar」の設定項目です。

ココは当然「Enable」のままにしておきます。

ここでの設定項目にはEnableとDisableの選択以外に「Disable if the window width is less than」というデフォルトで「620」と入力された窓がありますけど、これはブラウザのウインドウサイズの横幅が指定された数値以下になった場合に効化をキャンセルさせるためのものです。

以上の設定項目を入力出来たら【Save Change】をクリックして出来上がりです！

最後に・・・

とても素晴らしいプラグインを作ってくださった作者様に感謝するばかりです！！

WordPress 用プラグイン Standard Widget Extensions を公開しました | Hetarena.com

　　　 　 　 　 　 ＿＿＿
　 　 　 　 　 ／ ⌒　　⌒＼　　 _＿
　 　 　 　 ／　（⌒）　 （⌒） ＼〈〈〈 ヽ うはｗｗ
　 　 　 ／ 　 ///（__人__）/// 〈⊃　 }
　 　 　 |　　 u. 　 `Y⌒y’´ 　 　 |　　 |
　　　　 ＼ 　 　 　 ﾞー ′　　 ,/　　 /
　　　　　/⌒ヽ　 　ー‐ 　 　ｨ 　 　 /
　　　　 / rｰ’ゝ　　　　　　　　　　 /
　　　　/,ﾉヾ　,>　　　　　　　　 ／
　　 　 |　ヽ〆　　　　　　　　　|

ありがとうございます！！

Share on Tumblr

Tweet