SWELLのサイドバー設定とカスタマイズのコツ10選

この記事ではSWELLのサイドバーの設定とカスタマイズについて解説していきます。

この記事を読むと分かる事

SWELLのサイドバー設定画面と、各エリアの役割の違いが分かる
プロフィールや検索ボックスなど、必要なウィジェットだけを整理して配置できる
追尾サイドバーやスマホ専用サイドバーをきちんと使い分けられる
ブログの目的に合ったサイドバー構成の「型」を自分で作れる

SWELLでのサイドバー設定やサイドバーのカスタマイズに悩んでいるなら、この記事を上から順番にたどってもらえれば、ひと通り自分で調整できるところまで行けるはずです。

SWELLサイドバー設定の基本とこの記事のゴール
SWELLサイドバー設定のやり方（カスタマイズ前の下準備）
SWELLサイドバーのカスタマイズ：中身（ウィジェット）を整える
デザインと回遊性を高めるSWELLサイドバーのカスタマイズ
ちょっと上級者向けのSWELLサイドバーカスタマイズ
よくある質問（FAQ）
まとめ：SWELLのサイドバー設定とカスタマイズの最初の一歩

SWELLサイドバー設定の基本とこの記事のゴール

ごとう

最初に、SWELLのサイドバーがどんな役割を持っているのかと、「どこを触ると何が変わるのか」という全体像を整理しておきます。いきなり細かい設定に入る前に、ざっくり地図を頭に入れておくイメージです。

SWELLサイドバーでできることをざっくり整理

まずは、SWELLのサイドバーで何ができるのかを一覧で見てみましょう。一言でサイドバーと言っても、実はいくつかの設定が重なって動いています。

項目	できること	主な設定場所
表示・非表示	サイドバーを出す／出さないを切り替える	カスタマイザー / 投稿・固定ページ編集画面
位置	右サイドバー / 左サイドバーを選べる	カスタマイザー
ページごとの出し分け	トップ・投稿・固定ページなどで表示を変えられる	カスタマイザー / 各ページのSWELL設定
中身（ウィジェット）	プロフィール・検索・新着記事などを自由に配置	ウィジェット画面
スマホ専用サイドバー	スマホ表示だけ別の内容にできる	ウィジェット画面
追尾サイドバー	スクロールしても画面に固定表示されるエリア	ウィジェット画面
デザイン	ウィジェットタイトルの装飾などを調整	カスタマイザー

ざっくりまとめると、「どのページにサイドバーを出すか」と「左右どちらに置くか」はカスタマイザーで決めて、「サイドバーの中身（どのウィジェットを置くか）」はウィジェット画面で決める、という役割分担になっています。

SWELLのサイドバー設定の全体像

SWELLのサイドバーまわりを触るときは、主に次の3つの場所を使います。

外観 → カスタマイズ → サイドバー：サイト全体の表示位置や表示有無
外観 → ウィジェット：サイドバーの中身（ウィジェット）の設定
各投稿・固定ページの編集画面：そのページだけレイアウトを上書き

基本の流れは、カスタマイザーで「標準」のレイアウトを決めて、ウィジェット画面で中身を整え、必要なページだけ投稿や固定ページのSWELL設定で微調整する、という三段構えです。この流れを頭に入れておくと、あとで迷いにくくなります。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

SWELLサイドバー設定のやり方（カスタマイズ前の下準備）

ごとう

ここからは、SWELLのサイドバー設定のうち「土台」になる部分を一気に済ませてしまいます。先にここを決めておくと、そのあとウィジェットをいじるときに迷いづらくなります。

サイドバーの表示・非表示を決める

まずは「そもそもサイドバーを出すのか、出さないのか」をページの種類ごとに決めてしまいましょう。

たとえば、次のような考え方が分かりやすいです。

ページタイプ	サイドバーのおすすめ設定	理由
ブログ記事（投稿）	表示する	関連記事やカテゴリーへの導線になり、回遊性が上がる
トップページ	表示する（もしくは非表示）	プロフィールやカテゴリーをまとめるのに便利
LP・サービス紹介ページ	非表示（1カラム）	余計な情報を消して、内容に集中してもらえる
プロフィールページ	どちらでもOK	サイドバーにSNSや実績を置くのもアリ

私のブログでも、通常の記事ページにはサイドバーを表示して、LP風のページや特定の固定ページではサイドバーを消して「縦長1カラム」で読ませるようにしています。ページごとの役割を意識して、SWELLのカスタマイザーからサイドバーの表示・非表示を決めてみてください。

サイドバーの位置（右・左）を決める

次に、サイドバーを右に置くか左に置くかを決めます。SWELLでは、カスタマイザーから簡単に左右の入れ替えができます。

よくあるパターンは次の2つです。

サイドバー右：ブログやメディアでよく見る、もっとも無難な配置
サイドバー左：ナビゲーションを強く見せたいサイト向け

日本語は左から右へ読んでいくので、「左側に本文、右側にサイドバー」という配置にしておくと、多くの人にとって読みやすく感じられます。特別な理由がなければ、まずは右サイドバーから始めてみるのがおすすめです。

ページごとにサイドバーのレイアウトを調整する

SWELLでは、サイト全体の基本レイアウトとは別に、記事や固定ページごとにサイドバーの有無や位置を上書きできます。

イメージとしては、

カスタマイザー：サイト全体の「標準レイアウト」を決める場所
投稿・固定ページのSWELL設定：例外的なページだけ個別に変更する場所

という感じです。

たとえば、「普段はサイドバーありの2カラムだけど、商品紹介のページだけサイドバーなしの1カラムにする」といった使い方ができます。こうして役割を分けておくと、あとから構成を見直すときも整理しやすくなります。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

SWELLサイドバーのカスタマイズ：中身（ウィジェット）を整える

ごとう

ここからは、サイドバーの中身をどうするか、つまりウィジェットをどう配置するかを決めていきます。「とりあえず全部入れる」ではなく、必要なものだけに絞るのがポイントです。

基本ウィジェットのおすすめ配置

まずは、どんなウィジェットをどんな順番で入れると使いやすいか、私のおすすめパターンを紹介します。

並び順	ウィジェット名	役割・ポイント
1	プロフィール	「誰が書いているか」を最初に伝えて信頼感を出す
2	検索ボックス	読者が知りたい情報を自分で探せるようにする
3	カテゴリー	記事をジャンル別に整理して見せる
4	人気記事 or 新着記事	気になる記事を見つけてもらい、掘り読みにつなげる
5	アーカイブ	過去記事の入り口にする（優先度は少し低め）
6	バナー・広告	アフィリエイト案件や自分の商品への導線
7	メルマガ・SNSフォロー	読者にファンになってもらう入口

全部を一気に入れる必要はなくて、最初は「プロフィール」「検索」「カテゴリー」「人気記事（または新着記事）」くらいで十分です。慣れてきたら、広告やメルマガを追加していくイメージで少しずつ育てると失敗しにくいです。

私も、最初は「あれもこれも」と詰め込みすぎて、結局ほとんどクリックされていないウィジェットだらけになっていました。アクセス解析を見て、あまり使われていないものはどんどん外していくと、サイドバーがすっきりして読者も迷いづらくなります。

ブログの目的別サイドバー構成パターン

ブログといっても、日記に近い雑記ブログから、がっつり収益を狙う特化ブログまで目的はいろいろです。目的ごとにサイドバーの「型」を決めておくと、迷わずに配置を選べます。

ブログタイプ	上部に置きたいもの	中央に置きたいもの	下部に置きたいもの
雑記ブログ	プロフィール / 検索	カテゴリー / 人気記事	アーカイブ / SNS
特化ブログ	プロフィール（専門性のアピール）	人気記事 / カテゴリー	メルマガ / 商品LPへのバナー
アフィリエイトブログ	プロフィール（実績・信頼）	ランキング / 比較記事へのリンク	限定キャンペーン / メール登録
企業サイト風ブログ	会社・運営者情報	サービス紹介 / お問い合わせ	資料DL / 採用情報など

自分のブログがどのタイプに近いかを考えて、表をベースにサイドバー構成を決めてみてください。「何を足すか」よりも「何を削るか」を意識したほうが、読者にとって親切なサイドバーになります。

スマホ版サイドバー設定のポイント

SWELLには「スマホ専用の共通サイドバー」エリアがあります。PCだと画面右に出ているサイドバーも、スマホでは記事の下に回るため、役割が少し変わってきます。

ざっくり分けると、

PCのサイドバー：記事を読みながらチラチラ見る「ながら導線」
スマホのサイドバー（実質フッター）：読み終わったあとに踏む「次の一手」

というイメージです。

スマホ専用サイドバーに入れるなら、次のような内容と相性がいいです。

「この記事もおすすめ」的な関連記事や人気記事
メルマガ登録フォームやLINE登録
アフィリエイト案件へのバナー
細かいカテゴリーではなく「人気カテゴリ」だけ

アーカイブなど細かいメニューをそのまま全部入れると、スマホの画面がとても長くなってしまいます。スマホ版は「優先度の高い導線だけをギュッとまとめる」くらいの気持ちでカスタマイズしてみてください。

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

センスが必要
文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

デザインと回遊性を高めるSWELLサイドバーのカスタマイズ

ごとう

この章では、見た目と使い勝手の両方を底上げするカスタマイズをまとめて紹介します。同じ内容のサイドバーでも、デザインと配置を少し変えるだけでクリック率が変わってきます。

ウィジェットタイトルデザインを整える

SWELLは、サイドバーのウィジェットタイトル（見出し部分）のデザインをカスタマイザーから簡単に変えられます。ここを整えるだけで、一気に「ちゃんと作り込まれたブログ感」が出ます。

タイトルデザイン	見た目の印象	向いているブログ
シンプルな下線	すっきり・落ち着いた印象	ノウハウ系・ビジネス系
左に縦ライン	きちんとしていて読みやすい	企業サイト・情報サイト
ボックスで塗りつぶし	ポップで目立つ	雑記ブログ・キャラの強いブログ
角丸ボックスなど	やわらかい・やさしい印象	ママブログ・ライフスタイル系

大事なのは、

本文の見出しデザインとあまりケンカしないこと
サイドバー内のウィジェットタイトルは基本1パターンに統一すること

この2つです。

「ここだけ特別に違う装飾にしよう」とやりすぎると、逆に素人感が出てしまいます。SWELLのサイドバーカスタマイズでは、「決めたデザインをサイドバー全体で使い回す」くらいのほうが、全体がまとまって見えます。

追尾サイドバーの使い方と注意点

追尾サイドバーは、スクロールしても画面の横に固定されるサイドバー用ウィジェットエリアです。うまく使うととても便利ですが、詰め込みすぎると本文の邪魔になってしまいます。

追尾サイドバーにおすすめなのは、次のような内容です。

目次（長文記事との相性がとても良い）
おすすめ記事へのリンク集
アフィリエイト案件へのバナー（1つか2つまで）

【稼げるキーワード教えます】
▼　　▼　　▼

逆に、点滅するバナーや長いプロフィールなどを入れてしまうと、視線を奪いすぎてしまいます。私の感覚では、「追尾サイドバーには1〜2ブロックだけ」がちょうどいいバランスです。

読みながらチラッと目に入るくらいの存在感を意識して、追尾サイドバーに置くウィジェットを選んでみてください。

ブログパーツや広告で回遊率・収益をアップする

SWELLには「ブログパーツ」という便利な機能があります。よく使うブロックの組み合わせを登録しておいて、サイドバーのウィジェットからショートコードで呼び出せる仕組みです。

たとえば、

おすすめ記事3つ＋簡単な説明＋ボタンをひとまとめにしたブロック
特定の商品レビュー記事への導線セット

などをブログパーツとして作っておけば、

サイドバーのテキストウィジェット
サイドバーのカスタムHTMLウィジェット

などにショートコードを貼るだけで、どのページでも同じパーツを表示できます。

こうしておくと、

複数のサイドバーエリアで同じ導線を使い回せる
内容を差し替えたいときも、ブログパーツ側を1回直すだけで全ページに反映される

というメリットがあります。

収益を意識したサイドバーカスタマイズをしたいなら、「クリックしてほしい導線はブログパーツ化してサイドバーに表示する」という流れを作っておくと、運用がかなり楽になります。

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

実際に10万稼いだキーワード
今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

ちょっと上級者向けのSWELLサイドバーカスタマイズ

ごとう

この章では、少し慣れてきた人向けに「できると便利」なサイドバーカスタマイズの考え方を紹介します。コードを触る話も出てきますが、無理にすべてやる必要はありません。

カテゴリー別にサイドバーを変えたいときの考え方

「カテゴリーごとにサイドバーの中身を変えたい」という相談はよくあります。たとえば、

AカテゴリーではAに関する商品リンクや関連記事を表示
BカテゴリーではBに関するものだけ表示

といったイメージですね。

実現する方法としては、

プラグインを使ってウィジェットをカテゴリーごとに出し分ける
子テーマのfunctions.phpに条件分岐を書いて制御する
そもそもサイドバーではなく、本文中の内部リンクで誘導する

など、いくつか選択肢があります。

ただ、SWELLのサイドバー設定やカスタマイズにまだ慣れていない段階でいきなりやると、

どこで何を出しているのか分からなくなる
テーマのアップデート時に不具合が出ても気づきにくい

といったリスクもあります。

個人的には、「まずは全カテゴリー共通のサイドバーをしっかり作り込む → どうしても物足りなくなったら出し分けを検討する」という順番で進めるのがおすすめです。

子テーマ＋コードカスタマイズはほどほどに

SWELLは、サイドバーまわりに限って言えば、基本的なことはほとんど管理画面だけで完結します。どうしてもコードを触りたい場合は、必ず子テーマを使って編集するようにしましょう。

とはいえ、

PHPやCSSのエラーでサイトが真っ白になる可能性がある
テーマ本体のアップデートで、古いコードとの相性が悪くなることがある

といったリスクもあります。

ざっくり「どんな人ならコードカスタマイズをしても良さそうか」を表にすると、こんなイメージです。

タイプ	コードカスタマイズをおすすめできるか	理由
ブログ初心者	あまりおすすめしない	まずは記事を書くことと基本設定を優先したほうが良いから
中級ブロガー	必要なところだけならアリ	サイト運営に慣れてきていて、多少のトラブルにも対応できるから
エンジニア・デザイナー	問題なし	自分でトラブルシュートしながら調整できるから