Q2W3 Fixed Widgetのインストール方法と使い方【画像解説】

近頃では、様々なホームページで、記事をスクロールしたときに、サイドバーが追尾してくるような仕様のものをみかけるようになりました。

このような方法を使えば、特にブログ形式のように記事が縦に長くなりがちであるサイトの場合に、サイドバーのコンテンツのうち、特にサイト訪問者に対してアピールを行いたいものを適切に見せていくことが出来ます。

そこで、今回はWordPressにサイドバーウィジェットを追尾させる(フローティング)ことのできるWordPressプラグイン『Q2W3 Fixed Widget』のインストール方法と使い方について画像を用いて丁寧に活用したいと思います。

Q2W3 Fixed Widgetでできることと活用の際の注意点

このプラグインを使えば、下記の画像にあるように、メインカラム部分をスクロールした際に、サイドバーの指定したウィジェットを追尾させることが出来ます。(スクロールしてもサイドバーが追いかけてついてくる)

同様の機能を持ったプラグインは他にもありますが、設定が少々難しいものがほとんどです。

その点、この『Q2W3 Fixed Widget』プラグインは、サイドバーに配置したウィジェットに、追尾させるかどうかという設定項目を個別に行うだけの簡単操作でこの追尾機能を実装することが出来ます。

ちなみに、大手サイトなどでは、同様の機能を用いてAdSense広告を追尾しているものも見られますが、本来これは規約違反ですので、真似をしないようにご注意ください。

大手サイトなどの場合は、プレミアムアカウントと言って、Googleに特別扱いをしてもらい通常の規約では禁止されている行為が認められている可能性があります。
Q2W3 Fixed Widget00

Q2W3 Fixed Widgetのインストール方法

WordPressへのログインとプラグインの新規追加

WordPressへのログイン後、『プラグイン』⇒『新規追加』をクリックします。
Q2W3 Fixed Widget01

検索窓に『Q2W3 Fixed Widget』と入力し、Enterキーを押します。
Q2W3 Fixed Widget02

検索結果に表示された『Q2W3 Fixed Widget(Sticky Widget)』のところの『いますぐインストール』をクリックします。
Q2W3 Fixed Widget03

『OK』をクリックします。
Q2W3 Fixed Widget04

プラグインの有効化

『プラグインを有効化』をクリックします。
Q2W3 Fixed Widget05

Q2W3 Fixed Widgetの設定方法

サイドバーのウィジェットを追尾させる方法

左メニュー中の『外観』⇒『ウィジェット』をクリックします。
Q2W3 Fixed Widget06

サイドバーに追加しているウィジェットを開くと、『Fixed widget』という項目が追加されています。

追尾(フローティング)させたいウィジェットの『Fixed widget』にチェックを入れ、『保存』をクリックします。
Q2W3 Fixed Widget07

デフォルト設定での問題点

実際にサイトを確認してみると、追尾機能が実装されているのが確認できます。
しかし、このままでは下記のような問題がありますので、後ほどの設定で調整を行っていく必要があります。

一番下までスクロールすると、追尾させたウィジェットがフッター部分にかぶってしまっています。(問題解消のための設定方法は後述)
Q2W3 Fixed Widget08

スマートフォンでサイトを確認してみると、画面の横幅がせまく、本来サイドバーを追尾させる必要がないにもかかわらず、サイドバーウィジェットが追尾してきており、こちらでもフッター部分に重なってしまっています。(問題解消のための設定方法は後述)

※下記の画像は、mobizenを活用して、パソコン上でスマートフォンの画面を表示させています。
Q2W3 Fixed Widget09

フッターかぶり・スマートフォンでのウィジェット適用を解消する設定方法

上記2点の問題点を解消するための設定方法について解説します。

左メニュー中の『外観』⇒『Fixed Widget Options』をクリックします。
Q2W3 Fixed Widget10

設定画面が開きます。
それぞれ、下記の通り変更し『保存』をクリックします。

【フッターとかぶるのを解消する場合】
『Margin Bottom』をデフォルトで『0px』となっているのを『500px』等フッターの高さに応じた値に変更します。

【スマートフォンでウィジェットを追尾させない場合】
『Screen Max Width』をデフォルトで『0px』となっているのを『1000px』等テンプレートの横幅付近の数値に変更します。
(ブラウザがこの値以下の横幅のとき、追尾させないということです。)
Q2W3 Fixed Widget11

実際にサイトを確認してみると、下記の画像のように、追尾してきたウィジェットがフッターにかぶらない位置で停止するようになりました。
Q2W3 Fixed Widget12

スマートフォンでの表示を確認してみると、こちらもサイドバーウィジェットが追尾してこないようになりました。
Q2W3 Fixed Widget13

以上になります。

公式メルマガ


One Response to “Q2W3 Fixed Widgetのインストール方法と使い方【画像解説】”

  1. […] Q2W3 Fixed Widgetのインストール方法と使い方【画像解説】 | アフィリエイトで独立起業した元公務員のブログ […]

コメントを残す

サブコンテンツ

このページの先頭へ