SWELLのウィジェット画面には、共通サイドバー、記事下部、フッターなど多くの設置場所が並びます。どこに何を置けばよいか迷ったら、まずは「新着記事を案内する」など、表示したい内容を一つ決めましょう。
最初からすべてのエリアを埋める必要はありません。 ウィジェットで中身を用意し、表示先と表示条件を確認する。この順に進めれば、必要な場所だけを整えられます。
この記事では、共通サイドバーへ［SWELL］新着記事を置く例から始め、フッター・記事下の使い分け、PCとスマートフォンでの確認方法を解説します。SWELLを有効化し、WordPress管理画面へログインできる方が対象です。
- ウィジェットの追加・保存・並べ替えの手順
- サイドバー・フッター・記事下の設定場所と使い分け
- スマートフォンの表示条件と、表示されないときの確認順
画面と設定は2026年10月4日に、WordPress 7.1.2／SWELL 2.18.0で確認しています。バージョンや導入プラグインにより、画面の見た目が異なる場合があります。
ウィジェットと表示場所の基本
ウィジェットは、新着記事・カテゴリー・目次などを表示するための部品です。ウィジェットエリアは、その部品を置く場所を指します。記事本文へ挿入するブロックとは、設定する場所が異なります。
図はPCでの位置関係のイメージです。スマートフォンでは配置が変わります。
| 設定するもの | 決めること | 主な操作場所 |
|---|---|---|
| ウィジェット | 何を表示するか | 外観 → ウィジェット |
| ウィジェットエリア | どこに配置するか | ウィジェット画面の右側 |
| テーマの表示条件 | サイドバーの有無・位置など | 外観 → カスタマイズ |
例えば、新着記事を共通サイドバーへ追加しても、そのページでサイドバーを非表示にしていると表示されません。中身と表示条件を分けて確認することが大切です。
ウィジェットの追加・保存手順
ここでは共通サイドバーに［SWELL］新着記事を3件、リスト型で表示する例で進めます。同じウィジェットがすでにある場合は追加せず、既存の設定を開いてSTEP 3から確認してください。
WordPress管理画面の「外観」から「ウィジェット」を開きます。左側が「利用できるウィジェット」、右側が配置先のエリアです。右側の「共通サイドバー」を開き、すでに入っている内容を確認します。
左側の［SWELL］新着記事をクリックし、追加先の「共通サイドバー」を選んで「ウィジェットを追加」を押します。右側の共通サイドバー内に設定欄が追加されます。
「共通サイドバー」を選んだ状態です。下の「ウィジェットを追加」で確定します。
「表示する投稿数」を3、「リスト型」を選びます。必要ならタイトルを入力し、下部の「保存」を押してください。保存後は「保存しました」と表示されます。
「非表示にするページを選択」は、チェックしたページで表示を隠す設定です。投稿記事に表示したい場合は「投稿ページ」にチェックを入れません。サイトの目的に合わせて他のページも選びます。
HOAI Journalの保存済み設定です。枠内は「表示するページ」ではなく「非表示にするページ」です。
ウィジェットの見出し部分をドラッグすると、同じエリア内で並べ替えられます。新着記事を先に案内したい場合は、カテゴリーなどの上へ移動します。別のエリアへ移すと表示場所も変わるため、移動先を確認してください。
投稿記事を開き、サイドバーに新着記事が表示され、件数と順番が意図どおりかを確認します。続けてスマートフォンでも開き、ページ下部まで見てください。保存済みの表示と公開ページの結果がそろえば、この設定は完了です。
公開記事での表示例です。掲載される記事は更新に伴って変わります。
使わなくなったウィジェットの戻し方
いったん非表示にして設定を残したいときは、「使用停止中のウィジェット」へドラッグします。「削除」を選ぶとそのウィジェットの設定も失われるため、再利用する可能性がある場合は使用停止を選びましょう。削除や使用停止は、追加手順を終えるための必須操作ではありません。
サイドバーの使い分け
通常の案内は「共通サイドバー」、PCでスクロール中も見せたい内容は「追尾サイドバー」に置きます。最初は新着記事やカテゴリーなど、他の記事を探す入口から整えると分かりやすくなります。
| エリア | 表示の特徴 | 使い方の例 |
|---|---|---|
| 共通サイドバー | 通常のサイドバー。スマホ専用欄が空ならスマホでも使用 | 新着記事・カテゴリー |
| 共通サイドバー【スマホ版】 | 設定するとスマホで共通サイドバーの代わりに使用 | スマホ向けに案内を減らす |
| 追尾サイドバー | 共通サイドバーの下で追従。PCのみ表示 | ［SWELL］目次 |
| トップページ専用サイドバー | トップページで共通サイドバーの上に追加 | トップページ限定の案内 |
サイドバーを表示するページと左右位置
「外観」→「カスタマイズ」→「サイドバー」で、表示するページの種類や左右の位置を設定します。変更した場合は、カスタマイザー上部の「公開」で保存し、対象のページを開いて確認します。投稿ごとの「SWELL設定」で指定した表示条件にも注意してください。
共通サイドバー・スマートフォン版・追尾サイドバーの仕様は、SWELL公式のサイドバー設定（外部サイト）で確認できます。
スマートフォンと追尾サイドバー
スマートフォンではサイドバーの内容が本文より下へ回ります。「共通サイドバー【スマホ版】」を空にしても、共通サイドバーの内容が使われるため、サイドバー全体を消す設定にはなりません。一方、追尾サイドバーがスマートフォンに出ないのは仕様です。
スマートフォンで案内が多すぎるときは、共通サイドバーの内容を一律に削る前に、スマホ専用欄を使うか考えましょう。PCの案内を保ちながら、スマホで見せる内容を減らせます。
HOAI Journalでは、共通サイドバーに新着記事・カテゴリー・タグクラウド、追尾サイドバーに［SWELL］目次を配置しています。別の記事を探す入口と、読んでいる記事の中を移動する機能を分けた構成です。自分のサイトでは、タグが整理されていなければ無理にタグクラウドまで追加する必要はありません。
フッターの設定
フッターはページ下部の補助的な案内に使います。「フッター（ PC ）1〜3」と「フッター（スマホ）」は端末ごとに使い分け、「フッター直前」はフッター内部とは別の場所として考えましょう。
PC用とスマートフォン用のエリア
PC用の1〜3は、中身を入れたエリアの数に応じて列数が変わります。1か所だけ使う構成でも問題ありません。「フッター（スマホ）」にウィジェットを入れると、スマートフォンではこちらが優先され、PC用1〜3は表示されません。スマホ用が空の場合はPC用の内容が使われます。
PC用の3列と、スマートフォン用の内容を分けて設定できます。
HOAI JournalのPCフッターは、カテゴリー・人気記事・新着記事の3列です。スマートフォン用は新着記事に絞っています。PCと同じ案内をすべて並べるとページが長くなるため、端末ごとに必要な量を決める例として参考にしてください。
各エリアの位置とPCフッターの列数は、SWELL公式のウィジェットエリア一覧（外部サイト）にも掲載されています。
フッター直前とフッターメニュー
「フッター直前」には、フッター内部より前に共通の案内を置けます。問い合わせなど次の行動へ案内するCTAを設置する場合は、その案内が各ページで必要かを先に考えましょう。CTAは、読者に次の行動を促す案内やボタンのことです。
プライバシーポリシーやお問い合わせへのリンクがフッターメニューにある場合は、ウィジェットでも同じ一覧を重ねる必要はありません。メニューを整える操作は、SWELLのメニュー設定方法で確認できます。
記事下エリアの設定場所
記事下に何かを表示したいときは、自由に追加する案内なのか、著者情報・関連記事などのテーマ標準パーツなのかを先に分けます。どちらも記事の下に出ますが、操作する場所が異なります。
| 表示したいもの | 設定場所 | 確認する項目 |
|---|---|---|
| 任意の案内・ウィジェット | 外観 → ウィジェット | 記事下部・CTAウィジェット・関連記事上／下 |
| 著者情報・自動の関連記事など | 外観 → カスタマイズ → 投稿・固定ページ → 記事下エリア | 各パーツの表示・内容 |
| 特定記事だけの表示条件 | 投稿編集画面 → SWELL設定 | 下部ウィジェットを隠す・CTAウィジェットを隠すなど |
自由に追加する案内は、目的に合うウィジェットエリアへ配置します。
任意の案内と標準パーツの使い分け
「記事下部」は投稿本文の下へ任意の内容を追加する場所です。「関連記事上」「関連記事下」は、テーマが表示する関連記事の前後へ案内を追加する場所であり、関連記事そのものの表示設定ではありません。
著者情報や自動の関連記事を変更したい場合は、カスタマイザーの「記事下エリア」を開きます。設定対象は、SWELL公式の記事下パーツの設定方法（外部サイト）で確認できます。変更後は「公開」で保存し、投稿記事の本文を読み終えた位置までスクロールして確認しましょう。
記事下へ新しい案内を足す前に、すでに表示されている著者情報・関連記事・CTAを一度見渡しましょう。同じ目的の案内が重なっているときは、追加するより一つにまとめる方が、次に何をすればよいか伝わります。
ウィジェットの選び方
SWELL専用かWordPress標準かではなく、必要な機能に合わせて選びます。同じ場所に似た機能を重ねず、まず一つ置いて表示を確認しましょう。
- 他の記事を紹介する：［SWELL］新着記事・［SWELL］人気記事
- テーマ別に記事を探してもらう：カテゴリー
- 長い記事の中を移動する：追尾サイドバーの［SWELL］目次
- 運営者を紹介する：［SWELL］プロフィール
- サイト内を検索する：検索
「カスタム HTML」はHTMLコードを入れるためのウィジェットです。新着記事など既存のウィジェットで目的を満たせる場合は、コードを書く必要はありません。また、タグクラウドはタグを整理して使っているサイトで検討すれば十分です。
表示されないときの確認順
表示されない場合は、追加し直す前に、次の順で原因を絞ります。「どのページで」「どの端末で」出ないのかを分けると、確認箇所が見つかりやすくなります。
- 保存と配置先：対象のエリアにウィジェットがあり、設定が保存済みか確認する。投稿用の「記事下部」と「固定ページ下部」を取り違えていないかも見る。
- ページの表示条件：サイドバーならカスタマイザーの「サイドバー」を確認する。特定記事だけ出ない場合は、その投稿の「SWELL設定」を確認する。
- ウィジェット側の非表示条件：［SWELL］新着記事などの「非表示にするページ」で、表示したいページにチェックが付いていないか確認する。
- 端末ごとの仕様：スマホ専用欄が優先されていないか確認する。追尾サイドバーはスマートフォンには表示されない。
- 保存済み設定と表示の差：ページを再読み込みする。設定が正しいのに古い内容が残る場合は、使用しているキャッシュ機能の手順に沿って対象キャッシュを削除してから確認する。
カスタマイザーで表示できても、特定の投稿だけ非表示になっていることがあります。必ず、問題が出ている記事そのものを開いて確認してください。
PC・スマートフォンでの確認
最後に、公開ページをPCとスマートフォンで確認します。カスタマイザーのモバイルプレビューは幅の確認に便利ですが、手元の端末でもリンクやメニューを操作すると、押しにくさを見つけやすくなります。
- PC：サイドバーの位置、追尾中の目次、フッターの列数を確認する。
- スマートフォン：本文下のサイドバー、スマホ用フッター、ページの長さを確認する。
- 共通：画像や文字のはみ出し、意図しない重複、リンク先、記事下の案内を確認する。
必要な場所に必要な内容が表示され、リンク先へ進めれば完了です。使わないエリアが空でも問題ありません。
よくある質問
- ウィジェットと記事本文のブロックは同じですか？
-
設定場所が異なります。この記事のウィジェットは「外観」→「ウィジェット」でテーマの配置先へ追加します。記事ごとの本文に画像や案内を置きたい場合は、投稿編集画面のブロックを使います。
- 共通サイドバー【スマホ版】を空にすると非表示になりますか？
-
いいえ。空の場合は通常の共通サイドバーが使われます。内容を減らしたい場合はスマホ専用欄へ必要なウィジェットを置き、サイドバー全体の表示条件はカスタマイザーや投稿ごとの設定で確認してください。
- 追尾サイドバーがスマートフォンに出ないのは不具合ですか？
-
不具合ではありません。追尾サイドバーはPCで表示される仕様です。スマートフォンでは本文の目次や通常のサイドバーなど、別の案内を使います。
- 関連記事を変えるには「関連記事上」に追加しますか？
-
「関連記事上」は関連記事の前へ別の内容を追加するエリアです。自動表示される関連記事の条件や見た目を変える場合は、「外観」→「カスタマイズ」→「投稿・固定ページ」→「記事下エリア」を確認します。
- サイドバーに広告バナーは必要ですか？
-
必須ではありません。記事を探す・読むという目的を優先し、内容に関連する案内が必要なときに検討しましょう。バナーを増やす場合も、スマートフォンでページ下部が長くなりすぎないか確認してください。
まとめ
SWELLのウィジェット設定は、表示したい内容と設置場所を決め、保存後に対象ページを確認する流れで進めます。最初は共通サイドバーの新着記事など、目的がはっきりした一つから始めましょう。
- 共通サイドバーと追尾サイドバーは、回遊と記事内移動の役割を分ける。
- フッターはPC用・スマホ用を使い分け、既存メニューとの重複を確認する。
- 記事下の任意の案内と、著者情報・自動関連記事は設定場所を分けて探す。
- 表示されないときは、保存・配置先・非表示条件・端末の仕様の順に確認する。
目的別に次の記事を選ぶ
ウィジェットを整えたら、次に見直したい場所に合わせて関連記事を選んでください。
サイドバーや記事下を含め、サイト全体の表示条件を見直したい方は、カスタマイザーの設定順を確認してください。
ヘッダー・フッター・スマートフォン用メニューの導線を整えたい方は、メニュー設定へ進みましょう。
