PCでスクロールしていると、途中でブログやメディアのサイドバーが切れてしまうことがありますよね。
そんなときサイドバーのコンテンツを追従・固定させたいと思ったことはありませんか？
当記事では、
「WordPressのサイドバーを追従させる方法を知りたい」
という方向けに、
- WordPressサイドバーを追従させる方法
- 追従プラグイン「Q2W3 Fixed Widget」の使い方
について解説します。
WordPressサイドバーを追従させる手順
WordPressのサイドバーを追従させるには「Q2W3 Fixed Widget」というWordPressプラグインを使用します。
WordPressサイドバーを追従させる手順について、
- Q2W3 Fixed Widgetのインストール方法
- 追従の設定方法
の順番で解説します。
「Q2W3 Fixed Widget」をインストール
まずはQ2W3 Fixed WidgetというWordPressプラグインをインストールしましょう。
インストールするには下記2つの手順があるので、好きな方を選んでインストールしてください。
- プラグインファイルをダウンロードしてWordPressにアップロードする
- WordPressプラグインで「Q2W3 Fixed Widget」を検索してインストールする
インストール後は、有効化するのも忘れないでくださいね。
追従させたいウィジェットを設定
続いて、追従させたいウィジェットを設定しましょう。
設定方法は、ウィジェットの管理画面から下記のチェックボックスにチェックを入れるだけでOKです。
これだけの設定で、このブログのサイドバーみたいにウィジェットが追従されるようになりますよ。
追従時の挙動を調整する方法
サイドバーの追従は先ほどの設定で完了です。
ここからは追従時の挙動を調整する方法について解説します。
調整できるのは、主に以下の3項目です。
- 追従終了地点
- 追従時の上下マージン
それでは1つずつ解説していきます。
追従終了地点の設定
追従終了地点の設定方法について解説します。
追従終了地点を設定しないと、下記のようにサイドバー要素を飛び越えて、フッターを始めとしてたその他の要素まではみ出てしまいます。
これをはみ出ないようにするには、追従終了地点を指定する必要があります。
追従終了地点の指定は「id指定」によって行います。はみ出てはいけない要素（追従要素の下にある要素）のidを下記に記述すれば、記述したidの要素にははみ出なくなります。
下記の画面は「外観>Fixed Widget 設定」で開くことができます。
このブログの場合はfooter要素だったので「footer」と記述すれば、はみ出なくなりました。
追従時の上下マージンの設定
追従時の上下マージンの設定方法について解説します。
現在このブログでは、追従時の上下マージンを0（ゼロ）にしているので、上も下もピッタリと追従しているかと思います。
もしぴったり追従ではなく、少し余白（マージン）をもたせて追従したい場合は、先ほどと同じ設定画面で下記の項目でマージンを設定することができます。
例として、上下マージン「30px」で設定した場合は以下のようになりますので、参考にしてください。
まとめ
今回はWordPressのサイドバーを追従させる方法について解説しました。
今回紹介したWordPressプラグイン「Q2W3 Fixed Widget」は設定がとても簡単に作られたプラグインなので、良かったら自分のサイトでも試してみてください。
では、また。
