• HOME
  • WEBデザイン
  • サイドバー固定した広告の追従を、一定横幅以下で解除する方法

サイドバー固定した広告の追従を、一定横幅以下で解除する方法

WEBデザイン

「サイドバーで固定した広告の追従を、一定幅以下で解除する方法ってないの?」って疑問を、解決していきます。

記事の内容によっては、パソコンで閲覧した方がいいものだって、世の中にはたくさんあります。そういった PC ユーザーに、サイドバーに追従するバナーや広告を掲載することは、お伝えしたい情報を掲載するのにベストな方法ですよね。

サイドバー追尾広告がおかしくなる画像例

ですが、レスポンシブデザインのブログだと、タブレットや、PC(パソコン)のある一定以下の幅で「追従しているサイドバーの広告などが、おかしな挙動をおこす」場合がよくあります。たとえば、サイドバー追尾広告がおかしくなる画像例のように...涙

というわけで今回は、サイドバーで固定した広告を、ある一定以下の幅で追従しないようにする方法について、サクッと解決方法や解除した方がいい理由をまとめてみました。

サイドバーで固定した広告の追従を、一定幅以下で解除する方法

Sidebar fixed troubled thum

サイドバーで固定した広告の追従を、一定幅以下で解除する方法を、順を追って解説していきます。

今回の問題は、当メディアも困った問題でした。iPad などのタブレットで表示した時や、ブラウザで約 750px 〜 1024px ほどのあいだで表示すると、サイドバーの追尾がおかしくなり、上下に表示したいものがジャンプする現象がおきていました。

そこで、サイドバーを固定する方法から、固定を解除するやり方までをわかりやすく説明していきまので、ぜひ参考にしてみてください。

1.サイドバーの固定にはプラグイン「Q2W3 Fixed Widget」を使用する

Q2W3 Fixed Widgetアイキャッチ

まず、サイドバーの固定にはプラグイン「Q2W3 Fixed Widget」を使用してください。CSS や jQuery でも自力で導入する鳳凰でも構いませんが、なるべく労力はすくなくいいましょう。

このプラグインの設定に、今回の解除する方法も含まれているという最善のサイドバー追尾プラグインなので、使わない手はありません。さっそく使ってみたい!という人は、WordPressプラグイン「Q2W3 Fixed Widget」について、導入方法や使い方をまとめた記事がありますので、あわせて WordPressプラグイン「Q2W3 Fixed Widget」の使い方 をご覧ください。

2.ウィジェットで Fixed widget にチェックをいれて固定する

Fixed widget check

「Q2W3 Fixed Widget」を WordPress にインストールしたら、さっそくサイドバーを固定してみましょう。固定して追従するやり方は、とても簡単です。WordPress の 外観ウィジェット とクリックして、サイドバーに表示するウィジェット画面を開いてください。

固定したいウィジェットを追加したら、Fixed widget をクリックして、チェックボックスにマークを入れてください。チェックをいれたら、保存をクリックしてください。ここまでで、ウィジェットでの作業はおわりです。

3.Fixed Widget 設定「幅を無効化:」を設定する

Fixed widget general setting width no

さいごに、「Fixed Widget 設定」を変更します。外観Fixed Widget 設定をクリックしてください。Fixed Widget 設定画面がでたら、一般設定にある「幅を無効化:」を見つけてください。

「幅を無効化:」とは、Fixed Widget のポータブルデバイス向けの設定値です。ここで設定した数値よりも小さいブラウザの横幅になったら、サイドバーの固定を解除してくれるんですよ。至れり尽くせりな WordPress プラグインです。

ちなみに当メディアで使用しているテンプレートでは、横幅が「991px」になるとタブレット向けのワンカラムになります。しかし、サイドバーが非表示にならず記事下部に回り込むタイプでした。つまり、横幅が「991px」以下になると「Fixed Widget」の固定の影響で、表示がおかしくなってしまっていたんですね。

「幅を無効化:」を、「992px」と設定しました。

この設定をすることで、サイドバーが記事の下に回り込んだら、サイドバーの固定を解除するということができるようになりました。いや〜無事に解決できて、よかった、よかった汗。

ここまでで、サイドバーで固定した広告の追従を、一定幅以下で解除する方法についての解説はおわりです。

サイドバーで固定した広告の追従を、一定幅以下で解除したほうがいい理由

一定幅以下で、サイドバー固定を解除した方がいい理由
  1. 小さいブラウザで見ている人にとって、読みづらいブログの印象になるから
  2. 表示する広告によっては、ルール違反になってしまうから

サイドバーで固定した広告の追従を、一定幅以下で解除したほうがいい理由についても、ふれていきましょう。

サイドバーで固定したい内容が、自社サイト商品の宣伝であったり、フォローの呼びかけぐらいならば、危ない!と声をあげて心配する必要はありません。といっても、表示が乱れるのは読者にとってよくないので、対応するべき優先事項だと思いますけれども汗。

これがアドセンスの広告であったり、他社の製品を紹介している場合などは、ルール違反になってしまうこともあり早急に対応しなければなりません

タブレット端末系の画面サイズは閲覧数が少ないため、対策をあとあとに回してしまいがちですが...今回ご紹介した方法は WordPress プラグイン1つで対応できます。なので、いますぐお試しください!

まとめ

この記事のまとめ
  • サイドバーで固定した広告の追従を、一定幅以下で解除する方法はかんたん。
  • プラグイン「Q2W3 Fixed Widget」を使用する
  • ウィジェットで Fixed widget にチェックをいれて固定する
  • 3.Fixed Widget 設定「幅を無効化:」を設定する
  • サイドバーで固定した広告の追従を、一定幅以下で解除したほうがいい理由は、広告や商品紹介の内容によっては、ルール違反になってしまうから

サイドバー固定した広告の追従を、一定横幅以下で解除する方法について、解説させていただきました。まとめると、上記のようになりました。

時代はスマホビューを意識した作りに目がいきがちですが、まだまだパソコンでブログやサイトを閲覧している人も多くいらっしゃいます。仕事で使用するのは、まだまだ PC ブラウザですよね。

パソコン(PC)サイトのデザインや動作チェックも力を抜かずに、ぜひ個性的なサイト作りに今回の情報をお役立てください。もし、サイドバーが固定できないなど問題があった場合も、プラグインを停止するだけなので、初心者にもおすすめですよ。

それじゃあ今回は、この辺で!? 今回の記事が、あなたのサイドバー固定にかんするデザインの悩みを、解決できていたらうれしいです。ほかにも、WEB デザインについて記事を書いていますので、あわせて「ブログ記事まとめ | サウンドテック・ラボ」をご覧ください。

サウンドオルビス

3,374,509 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事