サイドバースクロールのメリット

みなさんこんにちはミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！プラグインでサイトを簡単カスタムしよう！のお時間がやってまいりました。

今回のテーマは「サイドバーの一部をスクロールしてみよう」です。

サイトを作るうえで意識している事は、出来る限り良い記事を書く事と良いデザインなんですが、今回はそれプラス動線を意識してみようという事なんです。

ブログを書いてる以上は、出来る限りたくさんの記事を読んでもらいたいと言うのが本音なので、無駄があるデザインを次のコンテンツにスムーズに進んでもらえるようにリフォームする事だと思うんです。

今使ってるテンプレもデフォルトのままで、かなり素敵なデザインなんですが、まだ有効に使えるスペースがあるなと考えたわけです。

 

このの画像をご覧いただければよくわかるんですが、この部分・・・。スペースが余ってますよね。

記事に集中してもらうためには良いんですが、せっかくの２カラムが活かせてない！という事でここにサイドバーをスクロールさせるプラグインを導入してみる事にしました。

 

Standard Widget Extensionsは？

サイドバーをスクロールさせるプラグインは「Standard Widget Extensions」が一般的だったと思いますが、テーマ編集からスクロールさせたいidを探さなければなりません。

私のコンセプトは、“より簡単に”、“誰でも導入可能”と言う事に重きを置いているので、このプラグインは導入を見送るという事になりました。

 

Q2W3 Fixed Widget

今回導入したプラグインは超簡単に設定できるプラグイン「Q2W3 Fixed Widget」です。インストールし有効化するだけで、ウィジェットにチェックボックスが表れます。

スクロールしたいウィジェットにチェックを入れるだけ！(なんて私好みなんだ～！！)

それでは導入方法を見ていきましょう。

 

導入方法

1. プラグイン新規追加
2. Q2W3 Fixed Widget　検索
3. インストール
4. 有効化
5. 外観　Fixed Widget Optionsで設定

「Q2W3 Fixed Widget」で検索

 

有効化します。

 

有効化するだけでウィジェットにFixed Widgetのチェックボックスが表示されます。スクロールしたいウィジェットにチェックを入れて下さい。超簡単！

 

設定

外観からFixed Widgetの設定ができます。

 

1.Margin Top
スクロール部分トップとのマージンを設定します。

2.Margin Bottom
スクロール下部とのマージンを設定しています。このサイトでは620に設定しています。

3.Refresh interval
リフレッシュの間隔設定です。

4.Screen Max Width
ここで設定した値より、ブラウザの幅が小さい場合はスクロールしないようにできます。

ここから後の設定はデフォルトでいいと思いますので、ここでは省略したいと思います。

 

注意点

デフォルトの設定で問題ないと思いますが、このサイトのようにフッターを使っているとフッター部分にスクロールがつきささります。

Margin Bottomでプレビューを見ながら調整していきましょう。ちなみにこのサイトの設定はMargin Bottomを685に設定しています。

また、AdSenseを追尾スクロールさせるのは禁止事項となっていますの御利用されている方はご注意ください。

 

まとめ

スクロールさせて動線を確保する事は簡単にできますが、どのウィジェットをスクロールさせるのかを考えなくてはなりませんね。

動線を上手に確保出来るように、試行錯誤しなければいけませんね^^