アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で6桁の収益を達成することができました。
SWELLのカスタマイズ画面を開いてはみたものの、「設定項目が多すぎて分からない…」と手が止まっていませんか？
3年以上SWELLを愛用し、100記事以上を執筆してきた私も、最初は手探り状態でした。
しかし、試行錯誤の末にサイドバーを最適化した結果、サイトの回遊率は大きく改善し、読者が自然と他の記事も読んでくれるようになりました。
本記事では、そんな私が培った全ノウハウを凝縮し、SWELLサイドバーの設定と、読者をファンにできる活用術を、初心者の方にも分かりやすく徹底解説します。
- サイト全体からページ単位まで、表示/非表示を自在に操れる
- 4つのウィジェットエリアの役割を理解し、戦略的に使いこなせる
- 追尾設定やデザイン変更など、応用カスタマイズもマスターできる
この記事を最後まで読めば、あなたはSWELLのサイドバー機能を完全にマスターできます。
そして、あなたのサイトに訪れた読者が、次々と関連記事を読み進めてくれる…。
そんな「読者が離れられないサイト」を、あなたの手で作り出せるようになります。
読者にとって居心地の良いサイトは、滞在時間や収益にも必ず良い影響を与えてくれますよ。
それでは、最強のサイドバー作成術をみていきましょう。
まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入してください。
SWELLのサイドバー表示設定を完全解説！基本からページ別まで
SWELLのサイドバー設定は、サイトの回遊率やユーザー体験を大きく左右する重要な部分です。
「どこで設定するの？」「特定のページだけ非表示にしたい」といった悩みを、ここで一気に解決します。
サイト全体の設定からページごとの個別設定まで、この通りに進めれば誰でも迷わず設定できます。
【まず確認】PCとスマホでは表示位置が違う！
最初に理解しておくべき重要なポイントがあります。
それはPCとスマートフォンでサイドバーの表示位置が違うことです。
PCではメインコンテンツの横に表示されますが、画面幅の狭いスマートフォンでは、メインコンテンツの下部に回り込んで表示されます。
これはユーザーが本文を読みやすいように最適化されているSWELLの仕様です。
ゆきおなるほど！
スマホでサイドバーが見当たらないと思ったら、記事の下に移動していたんですね！
「スマホでサイドバーが表示されない！」と慌てないように、この仕様をしっかり覚えておいてください。
【基礎】サイト全体の表示/非表示を一括設定する方法
サイト全体のサイドバー表示は、WordPressの「カスタマイザー」機能から一括で設定できます。
トップページや投稿ページなど、ページの種類ごとに表示・非表示を決められます。
サイトの骨格となるレイアウトを、まずはこの基本設定で固めてしまいましょう。
ページ種別ごとに「表示する」か「表示しない」を選びましょう。
最後に「公開」ボタンを押して設定を保存してください。
【基礎】投稿・固定ページごとに個別に表示を切り替える方法
前説で説明した全体設定とは別に、
みゆきこの記事だけは集中して読んでほしいから、サイドバーを消したい！
という場合もありますよね。
SWELLなら、各ページの編集画面から簡単に個別設定が可能です。
設定方法は投稿または固定ページの編集画面を開き、右サイドバーにある「SWELL設定」パネル内の「サイドバー」を探してください。
ここで「表示」または「非表示」を選ぶと、そのページだけに個別設定が適用されます。
【注意！】ページでサイドバーが表示されない時のチェックポイント
ゆきお全体設定で表示するよう設定したはずなのに、ページでサイドバーが表示されない…
先ほど解説しましたが、ページの編集画面で個別に「非表示」に設定されている可能性があります。
ページの個別設定は、カスタマイザーの全体設定よりも優先されるので気をつけましょう。
【応用】特定のカテゴリーやタグページだけで表示を制御する方法
さらに一歩進んだ使い方として、特定のカテゴリーやタグのアーカイブページだけでサイドバーの表示を切り替えることもできます。
コンテンツの種類に応じた最適なレイアウトを構築できる、とても便利な機能です。
- 「商品レビュー」カテゴリーでは、サイドバーに関連ランキングを表示したい
- 「雑記」カテゴリーでは、サイドバーを非表示にしてスッキリ見せたい
設定は、カテゴリー（またはタグ）の編集画面から行います。
WordPress管理画面「投稿」＞「カテゴリー」へ進み、設定したいカテゴリー名をクリックしてください。
画面下部にあるSWELL設定内の「サイドバー」項目を変更し、「更新」ボタンを押せば完了です。
SWELLのサイドバーに設置すべき定番ウィジェット7選
サイドバーに何を置くかで、ブログの使いやすさと成果は大きく変わります。
ここでは、多くの人気ブログで採用されている定番のウィジェットを7つ紹介します。
あなたのブログの目的と読者のニーズに合わせて、必要なものを厳選して設置してください。
① プロフィール（運営者の信頼性を示す）
読者が「この記事は信頼できる」と感じるために、運営者プロフィールは必須です。
SWELL専用の「[SWELL] プロフィール」ウィジェットを使えば、アイコン画像、名前、自己紹介文、SNSリンクをまとめて美しく表示できます。
専門性や経歴を記載して、ブログ全体の権威性を高めましょう。
② 人気記事（人気記事へ誘導する）
初めて訪れた読者が次に何を読めばいいか迷わないよう、「人気記事」を設置しておきましょう。
たくさんの人が読んでいる記事は、あなたのブログの「顔」とも言える質の高い記事のはずです。
「[SWELL] 人気記事」ウィジェットを使えば、ランキング形式などでデザインも調整でき、他のページを読んでもらえるようになります。
③ カテゴリー（興味のある分野へ誘導する）
読者が特定のテーマに興味を持っている場合、カテゴリーリストは非常に役立ちます。
記事がジャンルごとに整理されていると、読者は自分の好きな分野の情報をすぐに探せるからです。
「カテゴリー」ウィジェットを置くだけで、読者がサイト内を回遊しやすくなりますよ。
④ 検索ボックス（読者の利便性を高める）
読者が「あの情報は、どこにあるかな？」と思ったときに、すぐに目的の記事を見つけられるように検索ボックスを設置しましょう。
読者の疑問をその場で解決できるため、サイトの利便性が向上し、満足度アップにつながります。
「検索」ウィジェットを追加するだけでサイドバーに表示できますよ。
⑤ 最新の投稿（更新性をアピールする）
「[SWELL]新着記事」ウィジェットは、ブログが現在もアクティブに更新されていることを示す重要なサインです。
定期的に訪れるリピーターにとっては、新しい記事をすぐに見つけるための便利な機能となります。
ブログの鮮度をアピールし、読者に「また来よう」と思ってもらうきっかけを作りましょう。
⑥ 目次（記事全体の構成を示す）
長い記事を読むとき、目次があると読者は記事全体の構造を把握しやすくなります。
SWELLの「[SWELL] 目次」ウィジェットを「追尾サイドバー」に設置するのがおすすめです。
「追尾サイドバー」に追加すると、スクロールしても常に目次が表示されるため、読者はいつでも読みたいセクションにジャンプできますよ。
⑦ 広告バナー（収益化の導線となる）
ブログで収益化を目指すなら、広告バナーの設置は欠かせません。
アフィリエイト広告や自社サービスの案内など、読者にアクションを起こしてほしいコンテンツへの導線を確保します。
「[SWELL]広告コード」ウィジェットを使って、クリックされやすい場所に戦略的に配置しましょう。
SWELLの4つのウィジェットエリアを徹底活用！
代表的なウィジェットが理解できたら、次は「ウィジェットをどこに置くか」を決めましょう。
SWELLには役割の異なる4つのサイドバー用ウィジェットエリアが用意されています。
これらをうまく使いこなして、サイトのレベルを一段階上げましょう！
① 全てのページの基本となる「共通サイドバー」
「共通サイドバー」は、その名の通りサイトのほとんどのページで表示される、基本の場所です。
ここには、自己紹介（プロフィール）や記事のカテゴリー、検索ボタンなど、「どのページにいても読者が使いたいもの」を置いておきましょう。
まずはここから作り始めていきましょう。
WordPress管理画面「外観」＞「ウィジェット」へ進み、「共通サイドバー」から設定していきます。
設置するのは簡単。
たとえば、「[SWELL]プロフィール」を共通サイドバーに設置したい場合は、「[SWELL]プロフィール」を共通サイドバーにドラッグ＆ドロップするだけです。
② スマホ表示を最適化する「共通サイドバー【スマホ版】」
SWELLには、スマホ専用のサイドバー設定があります。
これは、スマホで見た時にだけ、パソコン版とは別の内容を表示させるためのものです。
ここに何も設置しないと、パソコンと同じ内容がスマホの記事の下に表示されます。
アッフィー「パソコンでは大きな広告を出したいけど、スマホだと画面が邪魔になっちゃうな…」という時に、スマホ版だけ広告を消す、といった工夫ができるんです！
WordPress管理画面「外観」＞「ウィジェット」画面の「共通サイドバー【スマホ版】」から設定していきます。
スマホで自分のサイトを見る読者のために、ぜひこだわってみてください。
③ サイトの顔を飾る「トップページ専用サイドバー」
「トップページ専用サイドバー」は、最初のページ（トップページ）にだけ出る特別な場所です。
一番の特徴は、ここに置いたものが「共通サイドバー」よりも上に表示されること。
サイトの一番目立つ場所をかっこよくしたい時に大活躍します。
- 一番見てほしいイベント情報をのせる
- 一番クリックしてほしいおすすめ記事へのボタンを置く
設定は、WordPress管理画面「外観」＞「ウィジェット」へ進み、「トップページ専用サイドバー」から行っていきます。
④ クリック率が変わる「追尾サイドバー」
「追尾サイドバー」は、画面を下にスクロールしても、そのまま画面についてくる場所です。
ずっと読者の目に入るので、とても注目されやすく、ボタンなどを押してもらえる確率が上がります。
使い方は簡単で、ここに入れたいパーツをドラッグ＆ドロップするだけです。
![「追尾サイドバー」エリアに「[SWELL] 目次」ウィジェットを置いているところ](https://affi-weblog.com/wp-content/uploads/2026/01/aa7f287a50a6f50d4a1213b4fa9d845a-1024x581.png)
- 目次を置く
-
長文記事でもどこを読んでいるかわかり、読者の離脱を防げる。
- 広告を置く
-
ずっと表示されるので、収益化のチャンスが増える。
- CTAボタンを置く
-
申し込ページや購入ページへいつでもジャンプできる。
【応用】ブログパーツ機能で「特定ページ専用ウィジェット」を作る
この方法は、
みゆき「このカテゴリーのページだけに、特別なランキングを出したい！」
という、もっと凝ったことがしたい人向けの方法です。
SWELLのブログパーツブロックと制限エリアブロックを組み合わせます。
ここでは、検索窓を「blog」カテゴリーのみ表示するように設定してみましょう。
「ブログパーツ」＞「投稿を追加」とクリックしてブログパーツを作成します。
作成するブログパーツのタイトルは「カテゴリページのサドバーで表示するウィジェット」としました。
次に作成したブログパーツの中に制限エリアブロックを追加します。
さらに、制限エリアブロックの中に検索ブロックを追加してください。
すると、制限エリアブロックの中に検索ブロックが追加されます。
次に制限エリアブロックをどこで表示するかを設定します。
①制限エリアブロックを選択し、②サイドバーの「ブロック」タブをクリックすると、③制限設定が表示されます。
blogカテゴリーだけに検索窓が表示されるようにします。
制限設定は以下のように設定してください。
- 「ページで制限する」をON
- 制限方法：タームを選択
- 「アーカイブページを対象にする」にチェック
- カテゴリータブから「blog」を選択
これでブログパーツ側での設定は完了です。
次にブログパーツをウィジェットエリアで表示させます。
ブログパーツ一覧を開き、作成したブログパーツの「呼び出しコード」をコピーしておきましょう。
「外観」＞「ウィジェット」をクリックしウィジェット画面を開いてください。
共通サイドバーにカスタムHTMLをドラッグ＆ドロップしましょう。
カスタムHTMLの「内容」欄の中に、コピーしたブログパーツの呼び出しコードを貼り付けます。
以上でカスタマイズは完了です。
この設定をすると、下図のように「blog」カテゴリでは検索窓が表示されますが、「SWELL」カテゴリでは表示されません。
「blog」カテゴリ
「SWELL」カテゴリ
手順は少し多くなりますが、「このサイト、詳しいな！」と思ってもらいたい時にとても役立つテクニックです。
なお、ブログパーツと制限エリアブロックについては以下の記事で詳しく説明しています。
参考にして下さい！
回遊率UPに繋がるSWELLサイドバーのコツ
ただウィジェットを並べるだけでは、読者の回遊率は思うように上がりません。
情報が整理されていて見やすいサイドバーを作るための「黄金法則」を3つお伝えします。
これらを意識するだけで、あなたのブログは素人っぽさを脱却し、プロのように洗練された印象になりまよ。
設置する項目は5〜7個に厳選して情報を整理する
サイドバーに情報を詰め込みすぎると、読者は逆に何も見なくなってしまいます。
表示するウィジェットは5〜7個に絞り込むのが最適です。
なぜなら、選択肢が多すぎると読者はどれを見ればいいか判断できなくなり、本当に伝えたい情報が埋もれてしまうからです。
- プロフィール
- 人気記事
- カテゴリー
- 検索ボックス
- 広告バナー
まずはこの5つを基本とし、ブログの目的に応じて「目次」や「最新の投稿」を1〜2個追加する程度に留め、情報を整理しましょう。
最も読んでほしいコンテンツを上部に配置する
人間の視線は自然と上から下に移動するため、最も重要な情報はサイドバーの上部に配置するのが鉄則です。
特に、ページを開いて最初に目に入る「ファーストビュー」のエリアは、最も注目され、クリックされやすい場所だからです。
例えば、まず「プロフィール」で信頼性を示し、その直下に最も収益につながる「広告バナー」や、ブログのファンになってほしい「人気記事」を配置するのが定石です。
読者の視線の動きを意識して、戦略的に順番を並び替えましょう。
スマホ表示を前提に本当に必要な情報だけを残す
現代のブログ閲覧は、スマートフォンが中心です。
スマホではサイドバーは記事下に回り込んで表示されるため、本当に必要な情報だけを残すという視点が不可欠です。
PCでは便利な情報も、記事を読み終えた後に長々と表示されると、読者の体験を損なう邪魔な要素になってしまいます。
ゆきおたしかに、スマホで記事を読み終わった後の長いサイドバーは、スクロールするのが面倒です…
SWELLには、「② スマホ表示を最適化する「共通サイドバー【スマホ版】」」で解説したようにウィジェットごとにPCとスマホで表示を切り替える機能があります。
この機能を活用して、スマホでは表示する項目を減らすなどの工夫をしましょう。
SWELLのサイドバーのデザインを変える【CSSあり】
中身（機能）だけでなく、見た目もかっこよくしたいですよね。
SWELLなら、サイドバーのタイトルのデザインを簡単に変更できます。
おまけに、CSSをコピペするだけで枠線をつけられるコードも紹介しますね。
サイドバーのタイトルのデザインを変える方法
タイトルの見た目は、マウスでクリックするだけで変わります。
難しい操作なしでサイトの雰囲気がパッと変わるのが、SWELLのすごいところです。
画面で今の様子をチェックしながら、自分のサイトに一番似合うデザインを見つけてくださいね。
PCの場合
スマホの場合
PCで「下線」、「左に縦線」、「左右に横線」、「塗り」を選んだ場合のデザインは以下の通りです。
下線
左に縦線
左右に横線
塗り
SWELLのサイドバーに枠線をつける【コピペOK】
次に、初心者でも簡単にできる、サイドバーに枠線をつけるCSSコードをご紹介します。
上記CSSは、WordPress管理画面の「外観」＞「カスタマイズ」の「追加CSS」に貼り付けてください。
貼り付けたら、忘れずに「公開」をクリックして保存しましょう。
「サイト内検索」と「プロフィール」のウィジェットには最初から枠がついています。
枠をつけると上記2つのウィジェットの枠が二重になってしまいます。
そこで、「サイト内検索」と「プロフィール」のウィジェットの枠は非表示にしてあります。
以下のような感じになります。
コードの知識がなくても、このようにコピペするだけでデザインの幅が広がります。
色コード（#c0c0c0の部分）などを変更して、あなたのサイトに合うデザインを試してみてください。
まとめ：SWELLのサイドバーで読者が回遊するサイトを作ろう
今回は、SWELLのサイドバー設定について、基本から応用、デザインカスタマイズまで網羅的に解説しました。
本記事の重要ポイントをもう一度おさらいします。
特に、記事ごとの表示設定や、クリック率を高める「追尾サイドバー」を使いこなせば、読者の満足度を上げ、サイト内をスムーズに案内する設計が可能です。
SWELLは、難しいコードを知らなくても、直感的な操作でこれほど細かくサイドバーを制御できるのが最大の強みです。
さあ、この記事をガイドブック代わりに、あなたのサイトのサイドバーを、読者のための最強の「おもてなし空間」に変えていってください！
まだSWELLを導入していない方は、以下のレビュー記事で、サイドバー以外のすごい機能も確認してみてはいかがでしょうか。
