SWELLの追尾サイドバー設定方法｜固定表示のやり方とおすすめウィジェット

SWELLの追尾サイドバーの設定方法を解説。固定表示のやり方から、おすすめウィジェット例、回遊率を高める配置のポイントまでまとめています。

追尾サイドバーとは、スクロールしてもサイドバーを固定表示できる機能です。

SWELLの追尾サイドバーとは？仕組みと特徴をわかりやすく解説

「追尾サイドバーって何？」という初心者の疑問に答えると、スクロールしても画面の横に固定されたまま動かないサイドバーのこと です。

通常のサイドバーは、ページを下に進むと途中で消えてしまいますが、追尾サイドバーは読者の視界にずっと残り続けます。そのため、以下のようなメリットがあります。

追尾サイドバーのメリット

① 読者の目に触れやすくなる

画面の端に固定されるため、プロフィールや広告を置くとクリックされやすくなります。

② 回遊率アップにつながる

おすすめ記事や人気記事を置くことで、別記事への移動が増えます。

③ 収益化にも効果的

アフィリエイトバナーやCTA（資料請求やメルマガ登録など）を設置すると、見られる回数が増え、そのまま成果につながりやすい配置です。

通常サイドバーとの違い

種類	特徴
通常サイドバー	スクロールすると途中で消える
追尾サイドバー	スクロールしても画面に固定されたまま

読者にとって「重要な情報」を見せ続けたい場合、追尾サイドバーのほうが圧倒的に有利です。

よく見かける具体例

書類	意図
ブログサイト	人気記事やカテゴリーメニューを固定表示して回遊を促進
ECサイト	カートボタンや割引情報を常時表示してコンバージョンを向上
ニュースサイト	広告枠やおすすめ記事のリンクを固定して収益化を促進

追尾サイドバーは効果的に活用することで、訪問者の満足度を高めつつ、サイト運営者にとっても大きなメリットをもたらします！

SWELLでは、追尾サイドバーを設置できるウィジェット機能が標準装備されており、プラグインやCSS・JSなどで実装することなく、簡単に直感的に追尾サイドバーにコンテンツを設置できます。

SWELLで追尾サイドバーを設定する方法

SWELLで追尾サイドバーを設定する方法はとても簡単です。
追尾サイドバーのウィジェットエリアに利用できるウィジェットの項目を設置するだけです。

設定は数分で完了しますが、サイドバーのレイアウトやウィジェットの配置によっては正常に表示されない場合もあります。ここでは、設定手順から確認ポイントまで順番に解説します。

追尾サイドバーにウィジェットを追加する

まずは、追尾サイドバーを有効にする設定を行いましょう。

Menu『WordPress管理＞ダッシュボード＞外観＞ウィジェット』をクリックします。

ウィジェット画面で、左側の「利用できるウィジェット」から追尾させたい項目を選び、ウィジェットエリアの『追尾サイドバー』へ追加します。（ドラッグ＆ドロップでも追加できます）

追尾サイドバーの表示を確認する

ウィジェットを追加したら、実際に追尾サイドバーが正常に動作するか確認しましょう。

記事ページを開き、ページを下へスクロールすると、追尾サイドバーに配置したウィジェットが画面内に固定されたまま表示されます。スクロールしてもウィジェットが追従して表示されれば、設定は正常に完了しています。

なお、追尾サイドバーはパソコン表示を対象とした機能です。スマートフォンではサイドバーが記事下へ移動するレイアウトになるため、パソコンと同じように追尾表示されません。

そのため、動作確認はパソコンで行うか、ブラウザのデベロッパーツールなどでPC表示に切り替えて確認するのがおすすめです。

SWELLの追尾サイドバーが表示されない原因と対処法

追尾サイドバーを設定したのに固定表示されない場合は、SWELLの不具合ではなく設定や表示条件が原因になっているケースがほとんどです。ここでは、よくある原因と対処法を紹介します。

サイドバーを表示するレイアウトになっているか確認する

追尾サイドバーは、サイドバーが表示されるページでのみ機能します。

記事や固定ページを「1カラム」に設定している場合は、追尾するサイドバー自体が表示されません。

まずは、対象ページがサイドバー付きのレイアウトになっていることを確認しましょう。

追尾するウィジェットが配置されているか確認する

追尾サイドバーを有効にしても、追尾対象のウィジェットが配置されていなければ何も固定表示されません。

「外観 → ウィジェット」または「外観 → エディター」で、追尾したいウィジェットがサイドバーに追加されているか確認してください。

PCで表示を確認する

SWELLの追尾サイドバーは、画面幅が狭い環境では固定表示されない場合があります。

スマートフォンではサイドバー自体が記事の下部へ移動するレイアウトになるため、追尾表示は利用できません。

設定後は、パソコン表示で動作を確認するのがおすすめです。

サイドバーの高さを確認する

サイドバー内にウィジェットを詰め込みすぎると、高さの関係で追尾表示が期待どおりに動作しないことがあります。

不要なウィジェットを整理し、重要なコンテンツだけを配置すると見やすさも向上します。

キャッシュを削除する

設定を変更した直後は、ブラウザやキャッシュ系プラグインの影響で変更内容が反映されないことがあります。

以下を試してみましょう。

• ブラウザをスーパーリロードする
• キャッシュプラグインのキャッシュを削除する
• CDNを利用している場合はCDNのキャッシュを削除する

その後、再度表示を確認してください。

JavaScript・CSSの最適化設定を確認する

高速化プラグインやキャッシュプラグインでJavaScriptやCSSを結合・遅延読み込みしている場合、まれに追尾サイドバーの動作へ影響することがあります。

最適化機能を一時的に無効にして改善する場合は、その設定が原因である可能性があります。

他のプラグインとの競合を確認する

表示がおかしい場合は、プラグインとの競合も考えられます。

一度ほかのプラグインを停止し、追尾サイドバーが正常に表示されるか確認してみましょう。

問題が解消した場合は、停止したプラグインを1つずつ有効化して原因を特定できます。

それでも表示されない場合

上記を確認しても改善しない場合は、以下を確認してください。

• SWELLを最新バージョンへ更新する
• 子テーマや追加CSSに問題がないか確認する
• ブラウザの開発者ツールでエラーが発生していないか確認する

特に独自のCSSやJavaScriptを追加している場合は、追尾サイドバーの動作に影響している可能性があります。

追尾サイドバーに置くならコレ！おすすめウィジェット6選

追尾サイドバーは、スクロールしても常に表示されるため、読者の目に留まりやすい場所です。

ただし、何でも配置すればよいわけではありません。情報を詰め込みすぎると読みにくくなるため、読者にとって役立つコンテンツやクリックしてほしい情報を厳選して配置することが大切です。

ここでは、追尾サイドバーと相性の良いおすすめのウィジェットを紹介します。

追尾サイドバーにおすすめのウィジェットは、以下を参考にしてください。

ウィジェット	おすすめ度	おすすめ用途
目次		長文記事
人気記事		回遊率アップ
おすすめ記事・関連記事		内部リンク強化
CTA・広告		収益化
カテゴリー		記事数が多いサイト

目次

おすすめ度：

長文記事を読む読者にとって、目次は最も相性の良いウィジェットです。

スクロール中でも見出しへすぐ移動できるため、目的の情報を探しやすくなり、途中離脱を防ぐ効果が期待できます。

特に5,000文字以上の記事では、追尾サイドバーへ目次を配置すると利便性が大きく向上します。

こんなサイトにおすすめ

• ブログ
• 解説記事
• レビュー記事
• ハウツー記事

人気記事

おすすめ度：

人気記事を配置すると、読者が興味を持ちやすい記事へ自然に誘導できます。

「この記事も読まれています」という導線を作ることで、サイト内を回遊してもらいやすくなり、PVや滞在時間の向上にもつながります。

記事数が増えてきたブログには特におすすめです。

こんなサイトにおすすめ

• ブログ全般
• アフィリエイトサイト
• メディアサイト

おすすめ記事・関連記事

おすすめ度：

関連記事を配置すると、現在読んでいる記事と関連するコンテンツへスムーズに誘導できます。

読者が次に読む記事を見つけやすくなるため、回遊率の向上や離脱防止が期待できます。

カテゴリーページやまとめ記事へのリンクを配置するのもおすすめです。

こんなサイトにおすすめ

• SEOブログ
• 雑記ブログ
• 情報サイト

CTA・広告

おすすめ度：

商品の紹介や資料請求、ASPリンクなどのCTAは、追尾サイドバーとの相性が非常に良いコンテンツです。

記事を読み進めながら常に表示されるため、読者が興味を持ったタイミングでクリックしてもらいやすくなります。

ただし、広告を並べすぎると読みにくくなるため、1〜2個程度に絞るのがおすすめです。

こんなサイトにおすすめ

• アフィリエイトブログ
• 企業サイト
• サービス紹介ページ

カテゴリー一覧

おすすめ度：

カテゴリー一覧を配置すると、テーマごとに記事を探しやすくなります。

特に記事数が多いブログでは、読者が興味のあるジャンルへ移動しやすくなり、サイト全体の回遊率向上につながります。

カテゴリー数が多い場合は、主要なカテゴリーだけを表示すると見やすくなります。

こんなサイトにおすすめ

• 記事数が多いブログ
• メディアサイト
• 情報サイト

追尾サイドバーを効果的に使うコツ

サイドバーだけではありませんが、一般的にサイト上部と下部に誘導コンテンツがあるとクリック率が上がる傾向にあります。また、注意を引く工夫も重要です。
この2つを踏まえてサイドバーの追尾部に設置するコンテンツを設置しましょう。

コンテンツ配置の優先順位

重要な情報はサイドバーの上部に配置し、その中でも特に読者に見てもらいたいウィジェットを追尾サイドバーへ設置しましょう。目次やCTA、人気記事などを優先的に配置することで、スクロール中でも目に留まりやすくなり、追尾表示の効果を最大限に活かせます。サイドバーは上から順に見られるため、配置する順番も意識することが大切です。

視覚的に目立たせるデザイン

色やアイコンを上手に使って、サイドバーが埋もれないようにデザインすると効果的です。
ただ目立たせるのではなく、サイト全体のトーンに合わせたアクセントカラーやわかりやすいアイコンを使うことで、重要な情報に視線が届きやすくなります。
過度な装飾は避けつつ、「ひと目で何のブロックか分かる」デザインを意識しましょう。

スクロールを邪魔しない工夫（動きの調整）

モーション効果は控えめに設定し、読者の閲覧を妨げない自然な動きに調整することが大切です。
アニメーションが強すぎたり動きが多すぎると、内容よりも動きに目が奪われてしまいます。
視線誘導として“そっと補助する”程度の軽いフェードインやスライドなど、シンプルな動きを選ぶのが効果的です。

モバイル対応の注意点

モバイルでは追尾サイドバーが適さない場合があるため、必要に応じて非表示設定や軽量化を検討しましょう。
スマホ画面は表示領域が狭く、追尾要素があると読みづらくなることがあります。
SWELLではデバイスごとに表示・非表示を切り替えられるため、PCでは追尾、スマホでは通常表示など、環境に合わせた最適化を行うことが大切です。

---

関連記事 追尾サイドバーだけでなく、サイドバー全体の設定やおすすめのカスタマイズ方法について詳しく知りたい方は、こちらの記事もあわせてご覧ください。

※ SWELL公式マニュアルはこちらからご覧いただけます。

よくある質問（FAQ）

追尾サイドバーはスマートフォンでも表示されますか？

いいえ。SWELLでは、スマートフォン表示時はサイドバーが記事下へ移動するレイアウトになるため、追尾サイドバーは表示されません。追尾機能を利用できるのは、主にパソコン表示です。

追尾サイドバーにはどのようなウィジェットを配置するのがおすすめですか？

目次・人気記事・関連記事・CTA・広告などがおすすめです。特に目次や関連記事は、読者が目的の情報へ移動しやすくなり、サイト内の回遊率向上にもつながります。

追尾サイドバーが表示されない場合はどうすればよいですか？

まずは、追尾サイドバーのウィジェットエリアにウィジェットが追加されているか確認しましょう。また、サイドバー付きのレイアウトになっているか、パソコン表示で確認しているかもあわせてチェックしてください。

追尾サイドバーにウィジェットをたくさん配置しても問題ありませんか？

ウィジェットを追加しすぎると、サイドバーが長くなり見づらくなることがあります。読者が使いやすいように、必要なウィジェットだけを厳選して配置するのがおすすめです。

正直、迷っている時間が一番もったいないです。

まとめ！SWELLの追尾サイドバーで回遊率・収益を最大化しよう

SWELLの追尾サイドバーを活用すると、スクロール中でも重要な情報を表示できるため、読者の利便性やサイト内の回遊率向上が期待できます。

設定方法は、追尾サイドバーのウィジェットエリアに表示したいウィジェットを追加するだけなので、初心者でも簡単に利用できます。

効果を高めるためには、目次や人気記事、関連記事、CTAなど、読者にとって役立つウィジェットを厳選して配置することが大切です。また、表示されない場合は、サイドバーのレイアウトやウィジェットの配置状況を確認してみましょう。

ぜひ本記事を参考に、SWELLの追尾サイドバーを活用して、見やすく使いやすいブログを作ってみてください。