追尾型サイドバーを超簡単に追加するWordPressプラグイン‐Q2W3 Fixed Widget

wordpress_logo

今回はWordPressのプラグイン『Q2W3 Fixed Widget』についてご紹介します。

 

『Q2W3 Fixed Widget』は追尾型サイドバーを超簡単に追加することが出来るプラグインです。それではご説明します。

 

このプラグインでできること

 

サイトなどを見ているとよく追尾型サイドバーがありますよね。私の大好きなサイトLIGinc.様も追尾型サイドバーを採用しています。

bandicam 2015-05-08 10-32-19-208※クリックでgif再生します。

このようにスクロールしてもついてくるサイドバーの事です。これをCSSやjQuery(javascript)で実現しようとするとちょっと面倒なんですが、『Q2W3 Fixed Widget』を使えば超簡単に実現できます。

 

 

インストール方法

管理画面検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 » プラグイン » 新規追加 » 『Q2W3 Fixed Widget』 で検索
  2. WordPress.org からダウンロード

インストールしたら有効化してください。

 

 

設定方法

プラグインを有効化したら、外観 » ウィジェット  をクリックします。

bandicam 2015-05-02 23-39-04-601
追尾型のウィジェットに設定したいウィジェットを開きます。今回は『おすすめ記事』を追尾型にしたいと思います。

bandicam 2015-05-08 11-50-55-533

 

『Fixed widget』にチェックを入れ、『保存』をクリックします。

以上です。これだけでもう追尾型サイドバーができました!簡単ですね。

 

もっと細かな設定がしたい方は、外観» Fixed Widget Options をクリックします。

bandicam 2015-05-08 12-05-26-110

すると、このような画面が表示されます。

 

bandicam 2015-05-08 12-14-45-333

色々設定することが出来ます。どのように設定するかわからない方のために、設定しておいた方がいい事をご紹介します。

 

General Options 内の 『Margin Bottom』 の設定について

フッターなどにコンテンツがある場合、一番下までスクロールすると、追尾させたウィジェットがフッター部分にかぶってしまいます。

bandicam 2015-05-08 12-17-43-558

※私のブログにはフッターにコンテンツがないので即席でつくりました。

この現象を解消するためには、General Options 内の『Margin Bottom』にフッターの高さと同じ数値を入力します。即席で作ったフッターの高さは800pxなので、『Margin Bottom』に800と入力しました。

 

すると・・・

bandicam 2015-05-08 12-20-45-098

このように、一番下までスクロールしても、追尾させたウィジェットがフッター部分被らなくなりました!

 

次に、『Screen Max Width』についてご紹介します。

 

 

General Options 内の『Screen Max Width』の設定について

『Screen Max Width』に数値を入力すると、ブラウザの横幅がその数値以下の場合に追尾しないようにすることが出来ます。

スマートフォンなどではウィジェットを追尾させる必要性がないので、スマートフォンなどで追尾をOFFにするために 『Screen Max Width』に727と入力しました。

 

 

まとめ

「追尾型サイドバーは空きスペースを有効活用できる」と私は考えているので、オススメ記事などを紹介するためにこのブログでは追尾型サイドバーを使用することにしました。

しかし、追尾型サイドバーは人によっては鬱陶しいと感じたりします。ですので、「追尾型サイドバーにした方がいい」というわけでは無いという事を覚えておいてください。

 

また、Google AdSense を追尾型にする事は利用規約違反になります。利用規約違反になるとアカウント停止(最悪垢BAN)なので気をつけましょう。

 

 

おわり

expand_less