WordPressのサイドバーを固定しよう!スクロールに追従させる – Q2W3 Fixed Widget

文字数の多い記事を書くと、サイドバーよりも記事が大幅に長くなることってよくありますよね。ブラウザでその記事を表示すると、サイドバーの部分になにもない空間が生まれてしまいます。

 

記事を読み終わった時に、サイドバーのメニューから他の記事も読んでもらいたいけど、読者がサイドバーをチェックするには、わざわざスクロールを行ってページの上まで戻ってもらわなければなりません。

これはちょっと気が利いてないですよね。ページの回遊率も下がってしまいます。

だからサイドバーの位置を固定しましょう。スクロールに追従させれば、常にメニューが表示されるようになって、他の記事も読んでもらいやすくなります。

この記事ではプラグインを利用してサイドバーを固定する方法と、スタイルシートを利用して固定する方法の2つを解説しています。

 

完成品

プラグインを利用する – Q2W3 Fixed Widget


1. プラグインをインストールする

Q2W3 Fixed Widget という、簡単にサイドバーを固定することができるプラグインがあります。プラグインの使い方を解説しますので、まずインストールして有効化してください。ダッシュボード > プラグイン > 新規追加 で Q2W3 Fixed Widget を検索しましょう。

プラグインのインストール方法がわからない方は以下のページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

 

2. 固定するウィジェットを選ぶ

ダッシュボード > 外観 > ウィジェット を選んで、画像のページに移動してください。そしてブログサイドバーの欄から、固定したいウィジェットを選びましょう。

 

3. Fixed widgetを選んで保存する

固定したいウィジェットを選ぶと、Fixed widget というチェック項目が表示されていますので、チェックしてから保存しましょう。

 

4. ウィジェットが固定されているか確認してみましょう

今回は例としてカテゴリーと検索ウィジェットの位置を固定してみました。確認してみるとスクロールしても消えずに表示されています。

が、しかし、ひとつ問題が…。画像の赤枠を見てもらえるとわかりますが、カテゴリーの一部が見切れてしまっています。使っているテーマやカスタマイズによっては、他の部分と固定しているウィジェットが重なってしまって、うまく表示されないことがあります。

その場合は重ならないように設定を行いましょう。

 

5. 上マージンを設定する

ダッシュボード > 外観 > Fixed Widget 設定 を選ぶと、プラグインの細かい設定が行えるページが表示されます。今回はウィジェットの上部分が重なっているので、上マージンを調整します。上マージンと書かれているフォームに数値を入力して、ちょうどいいスペースを作ってみてください。

 

6. 上マージンの調整後

見切れていた部分が表示されて、カテゴリーという文字が出てきました。こんな感じに重なっている部分を重ならないようにしたり、デザイン的にもうちょっとスペースを空けたいなという時などに、上マージンを設定してみてください。

 

7. サイドバーの縦に長いウィジェットを固定すると?

サイドバーに設置されている縦に長いウィジェットを固定すると、フッター(ブログ一番下のコンテンツ)に、固定しているウィジェットがめりこむことがあります。

この場合はさきほどの上マージンと書かれているフォームの下にある、下マージンの数値を調整してめりこまないように設定しましょう。

 

8. 下にめりこまないようにする設定

下マージンを設定してもめりこまないようにできるのですが、もっと高機能で適切な設定も用意されています。設定画面の 停止 ID フォームです。ここにフッターの ID を入力することで、今後フッターの高さが変わっても、めりこまないようにすることができます。

フッターの ID は、ブラウザの右クリックから ページのソースを表示 して、キーボードで Ctrl + F を押して、ページ内検索で <footer を検索することでわかります。ちょっと難しいかもしれませんが、ソースから以下のような <footer> タグを探してみてください。

<footer id="colophon" class="site-footer" role="contentinfo">

<footer> タグの id=”” で囲まれている文字列が フッターの ID になります。この例の場合は、colophon が ID です。それを 停止 ID フォームに入力することで、サイドバーのウィジェットがフッターにめりこまなくなります。

テーマによっては <footer> タグの代わりに、他のタグがブログの一番下に表示されていることがありますので、その場合はそのタグの ID を入力してください。ようは、めりこませたくない部分のタグの ID を入力すればいいのです。

※ 注意:PCでアクセスした時、スマホ・タブレットでアクセスした時、それぞれで ID の名前が違っていたり、なくなっていたりすることがあります。複数の環境で正常に表示されているか、チェックすることを忘れないようにしてください。

Q2W3 Fixed Widgetの設定解説


設定 解説
上マージン 固定したウィジェットの上方向の余白を設定します。サイドバーの上部分が重なった場合に設定しましょう。
下マージン 固定したウィジェットの下方向の余白を設定します。サイドバーの下部分が重なった場合に設定しましょう。
停止 ID 設定した ID のタグまでスクロールしたら、それ以上は下に行かないようになります。
更新間隔 通常は気にしなくて問題ありません。
幅を無効化 モバイル端末でブログにアクセスしたときに、サイドバーの固定を行わないようにします。ブラウザの横幅が設定した値未満の場合はサイドバーを固定しません。このブログでは現在 750px に設定しています。
高さを無効化 上記設定の高さ版です。
設定 解説
カスタムID 普通は、外観 > ウィジェットの画面で、固定するウィジェットを選んで設定しますが、自分でコードを書いてサイドバーのデザインを行った場合などは、ウィジェットの画面では固定する設定が行えませんので、こちらで直接 ID を指定します。固定したい部分の ID を一行ずつ入力してください。

その他の方法


なんらかの理由でプラグインが正常に動作しなかった場合や、表示の軽さにこだわりたい方のために、スタイルシートを利用してサイドバーを固定する方法も解説しておきます。

この方法は JavaScript を利用せずスタイルシートだけで機能しますので、表示は軽快になります。ただし IE 含む一部のブラウザでは動作しません。最新ブラウザのみ利用できる方法なので、理解した上で利用してください。

対応しているブラウザはこちらのウェブサイトで確認できます。

Can I use… Support tables for HTML5, CSS3, etc

※ テーマによっては機能しないことがあります。

スタイルシートを追加できる環境を作る


まずはスタイルシートを追加できる環境を作ります。このブログではテーマに依存しない形でスタイルシートを追加・編集するために、Simple Custom CSS and JS というプラグインの利用を推奨しています。

Simple Custom CSS and JS をインストールしていない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

もしなんらかの理由があってプラグインのインストールをしたくない場合は、ダッシュボード > 外観 > カスタマイズ内にある 追加 CSS を開いてスタイルシートを入力するようにしてください。

スタイルシートでサイドバーを固定する方法


1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS を選択して、スタイルシートを入力できるページに移動します。

 

2. スタイルシートを貼り付ける

タイトルに Fixed Sidebar と入力して、その下の /* */ に囲まれた英文をすべて削除してから、以下のコードを貼り付けてください。タイトルは自分で管理する用ですので、覚えやすいタイトルに変えていただいて構いません。

貼り終えたら右側にある公開ボタンを押してください。

top: 130px;

この記述は上方向の余白を表しています。サイドバーが固定されたときに、上に 130px の余白が空くという意味です。130px は大きいと思いますので、任意の数値に変更してください。

 

3. テーマによって ID 名・クラス名を変更する

上記のコードを貼り付けても正常に動作しなかった場合は、以下の説明に従ってコードを変更してください。

一般的なテーマの場合、ブログのソースは以下のような構成になっています。

記事などが表示されるメインコンテンツ
<div id="primary" class="content-area">...</div>

サイドバー
<aside id="secondary" class="widget-area">...</div>

サイドバーの ID が secondary なので、スタイルシートで #secondary と指定しています。運営しているブログのソースを確認して、サイドバーの ID が違うものだった場合は、secondary と書かれている部分を、その ID に変更してください。

サイドバーに ID が存在せず、スタイルシートのクラス名だけだった場合は、#secondary.クラス名 に変更してください。クラス名を入力する場合は、半角ドットを忘れないようにしてください。

上記の例の場合は、#secondary(ID名)の代わりに、 .widget-area(クラス名)でも動作します。

最後に


サイドバーを固定させると他の記事を読んでもらいやすくなりますし、無駄なスペースもなくなってブログの見栄えもよくなります。

プラグインを利用すると簡単なので、サイドバーのあるテーマを使っている方はぜひ試してみてください。

“WordPressのサイドバーを固定しよう!スクロールに追従させる – Q2W3 Fixed Widget” への2件の返信

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)