SWELLの基本設定とカスタマイズ方法｜最初に整える項目と確認手順【2026年版】

2026年8月11日2026年10月9日

SWELLを導入したものの、カスタマイズ画面には項目が多く、「どこから設定すればよいのか」「変更して表示が崩れないか」と迷う方も多いでしょう。

最初から全項目を変更する必要はありません。まず色と文字・横幅を整え、次にヘッダーや記事表示へ進みます。一項目ずつ変更し、保存後の公開ページまで確認すると、違和感が出たときも原因を絞りやすくなります。

この記事では、導入済みのSWELLで最初に整える項目、設定する場所、保存と確認の手順を解説します。読み終えたら、必要な項目を選び、表示が変わらない場合の確認先も判断できます。購入・インストール・ユーザー認証がまだの場合は、先に「SWELLの始め方｜購入・インストール・初期設定の全手順」を確認してください。

この記事で分かること

SWELLをカスタマイズする前の準備
カスタマイザーで最初に整える共通設定
ヘッダー・フッター・記事表示の設定方法
PC・スマートフォンでの確認とトラブル対処

SWELLをカスタマイズする前に確認すること

設定を始める前に、変更する項目と元の値を確認しましょう。この記事で扱うのは、管理画面から行う表示設定です。PHPやテーマファイルの編集は必要ありません。

子テーマが必要になる変更を見分ける

カスタマイザーの設定値だけを変える場合、子テーマは必須ではありません。子テーマは、親テーマの更新で独自のファイル編集が失われないようにする仕組みです。将来テーマファイルを編集する場合に検討し、この記事を進めるためだけにテーマを切り替える必要はありません。詳しくはWordPress公式の子テーマ解説を確認してください。テーマ自体を見直したい場合は、「WordPressテーマの選び方」も参考になります。

変更前の状態を記録する

変更前の画面に加え、設定名・色コード・数値・チェックの有無を控えます。見た目のスクリーンショットだけでは、元の値を正確に戻せないためです。ロゴを変えるなら元の画像も分かるようにしておきましょう。表示が崩れたら直前の項目を控えた値へ戻し、保存後に確認します。

HOAI Point

おすすめは「色と文字」→「ヘッダー・フッター」→「記事表示」の順番です。見た目の細部より、読みやすさと移動しやすさを優先し、それぞれの変更後にPCとスマートフォン表示を確認しましょう。

カスタマイザーの開き方と設定場所

SWELLの多くの表示設定は、「外観」→「カスタマイズ」から操作します。左側に設定項目、右側にサイトのプレビューが表示されます。

設定は役割ごとに分かれている

カスタマイザーは主に見た目を整える場所です。メニューに載せるリンクや、サイドバーに置く内容は、別の管理画面で編集できます。目的に合わせて次の入口を選びます。

変えたいもの	最初に開く場所
色・文字・横幅	外観 → カスタマイズ → サイト全体設定
ロゴ・共通部分の見た目	外観 → カスタマイズ → ヘッダー／フッター
目次・記事一覧の見た目	外観 → カスタマイズ → 投稿・固定ページ／記事一覧リスト
メニューのリンク・並び順	外観 → メニュー
サイドバーに置く内容	外観 → ウィジェット

一項目を変更して、保存後まで確認する

ここではメインカラーの変更を例にします。色以外の設定でも「一項目を変更 → プレビュー → 保存 → 公開ページ」の流れは共通です。

STEP

一項目だけ変更する

例として「サイト全体設定」→「基本カラー」を開きます。現在のメインカラーの値を控えてから「色を選択」で変更します。最初は文字色や背景色を同時に変えず、影響を見分けられる状態にします。

STEP

PC・スマホで見た目を確認

右側のプレビューで見出しやボタンの色を確認します。左下の端末アイコンでモバイル表示にも切り替え、文字が読みづらくなっていないか見ます。意図と違えば、保存する前に元の値へ戻します。

STEP

「公開」で設定を保存する

問題がなければ、カスタマイザー左上の「公開」を押します。すでに公開中のサイトでは、この操作で変更が閲覧者にも反映されます。「公開済み」になることを確認し、エラーが出た場合は次の変更へ進まないでください。

STEP

別タブで公開ページを確認する

公開URLを別タブで開き、再読み込みします。トップページと記事ページで変更箇所を確認し、可能なら実際のスマートフォンでも見ます。保存済みで、狙った箇所が読みやすく表示されていれば、この項目の作業は完了です。変わらない場合は、後述の症状別の確認へ進みます。

一部の項目はプレビューへ即時反映されないため、保存後の確認が必要です。詳しくはSWELL公式のテーマカスタマイザー解説を参照してください。

最初に整えるサイト全体設定

「サイト全体設定」には、基本カラー、基本デザイン、パンくずリスト、ページャーなどがあります。初心者はすべてを触らず、サイトの土台となる項目から始めます。

基本カラーを決める

「サイト全体設定」→「基本カラー」では、メインカラー、テキストカラー、リンクカラー、背景色を設定できます。

設定項目	役割	初心者向けの考え方
メインカラー	見出しやボタンなどの基準色	ブランドを示す1色を基本にする
テキストカラー	本文の文字色	十分なコントラストを保つ
リンクカラー	本文中のリンク色	本文と区別できる色にする
背景色	サイト全体の背景	明るい無彩色を基本にする

色数を増やしすぎると、重要な場所が分かりにくくなります。メインカラーとアクセントカラーの役割を分け、リンクは本文と識別できる状態を保ちましょう。各項目の詳細はSWELL公式の基本カラー設定を参照してください。

フォントと本文サイズを整える

「サイト全体設定」→「基本デザイン」で、フォント、本文サイズ、コンテンツ幅を調整できます。日本語記事では、装飾性より長文の読みやすさを優先します。本文サイズはPCだけでなくスマートフォンでも確認し、まず文字サイズと記事の横幅の組み合わせを確認しましょう。設定項目はSWELL公式の基本デザイン設定で確認できます。

パンくずリストとページャーを確認する

パンくずリストは「ホーム＞ WordPress ＞記事名」のように、サイト内の現在位置を示すリンクです。表示されるカテゴリーが記事の分類と合っているか確認します。ページャーは記事一覧の「次へ」やページ番号です。記事が複数ページに分かれる場合に、次の一覧へ移動できるか確認しましょう。

HOAI Point

色を決めるときは「好きな色」だけでなく、「本文・リンク・ボタンの役割が見分けられるか」で判断します。色だけに意味を持たせず、文字や形でも違いを伝えると分かりやすくなります。

ヘッダーとフッターを整える

ヘッダーはページ上部、フッターは最下部にある共通エリアです。ここを先に整えると、サイト全体の印象と移動しやすさが安定します。

ヘッダーのロゴとレイアウトを設定する

「外観」→「カスタマイズ」→「ヘッダー」で、背景色、文字色、ロゴ画像、PC・スマートフォンのレイアウト、追従表示などを設定できます。ロゴは端末ごとの表示サイズを確認し、メニューや検索ボタンと重ならないようにします。

追従ヘッダーは記事を読んでいる途中でもメニューへ移動しやすい一方、画面を占有します。スマートフォンでは本文領域が狭くなるため、実機相当の幅で確認してください。

メニュー項目を増やしすぎない

グローバルナビは、ヘッダーに置く主要メニューです。「外観」→「メニュー」でリンクと並び順を編集し、表示位置を「グローバルナビ」に指定して「メニューを保存」します。主要カテゴリーや案内ページに絞ると、目的の入口を探しやすくなります。初めて作る場合はSWELL公式のグローバルナビ設定手順を参照してください。

フッターへ補助的なリンクを置く

フッターにはプライバシーポリシー、免責事項、運営者情報、お問い合わせなど、サイトの信頼性や利用条件に関わるページを置くと整理しやすくなります。リンクは「外観」→「メニュー」で編集し、表示位置を「フッター」に指定して保存します。コピーライト表記や背景色は「外観」→「カスタマイズ」→「フッター」で整えます。詳しい設定項目はSWELL公式のフッター設定で確認できます。

投稿・固定ページの表示を整える

「外観」→「カスタマイズ」→「投稿・固定ページ」では、タイトル、アイキャッチ、見出し、目次、SNSシェア、記事下エリアなどを調整できます。設定項目の全体像はSWELL公式の投稿・固定ページ設定で確認できます。

見出しは本文階層が分かるデザインにする

H2（大見出し）とH3（その中の小見出し）の違いが、見た目でも分かるデザインを選びます。装飾が強すぎると本文より目立つため、記事全体で統一し、色や形を頻繁に変更しないようにします。

目次は記事の長さに合わせる

目次は長い記事の現在地を把握するのに役立ちます。表示する見出しレベルや省略条件を調整し、短い記事に大きな目次を表示して本文を遠ざけないようにします。詳しい条件はSWELL公式の目次設定で確認できます。

アイキャッチと記事下エリアを確認する

アイキャッチは記事本文だけでなく、記事一覧やSNS共有でも使われます。設定中のサムネイル比率に合わせて、安全領域に文字や重要要素を収めます。記事下の関連記事や著者情報は、読後の次の行動につながるものだけを表示します。

記事一覧とサイドバーを整える

記事一覧は、読者が読みたい記事を見つける場所です。見た目だけでなく、タイトル、抜粋、カテゴリー、画像比率の関係を確認します。

記事一覧の形式と画像比率を選ぶ

カード型は画像とタイトルを見せやすく、リスト型は縦方向に多くの記事を並べやすい形式です。「外観」→「カスタマイズ」→「記事一覧リスト」でPC用・スマートフォン用をそれぞれ確認します。画像比率は元のアイキャッチに合わせ、重要な文字が切れていないか実際の一覧で見ましょう。レイアウト形式と列数はSWELL公式の記事一覧リスト設定も確認してください。

項目	選択の基準	確認ポイント
一覧形式	画像重視ならカード型、情報量重視ならリスト型	PCとスマホでタイトルが読めるか
抜粋文	記事の違いを補足する場合に表示	一覧が間延びしないか
カテゴリー表示	分類判断を助ける場合に表示	ラベルが画像や文字を隠さないか
画像比率	アイキャッチの制作比率と合わせる	重要な文字やイラストが切れないか

サイドバーは役割を絞る

サイドバーは本文の横などに配置される補助エリアです。「外観」→「ウィジェット」で内容を選び、新着記事やカテゴリーなど、別の記事を探す助けになるものを優先します。バナーやウィジェットを増やしすぎると本文への集中を妨げます。追従サイドバーには、長い記事で役立つ目次など、スクロール中も必要な要素を置きます。

SNS情報とスマートフォン表示を確認する

「外観」→「カスタマイズ」→「SNS情報」には、自分が運営するアカウントのプロフィールURLを設定します。使っていないSNSのアイコンを表示する必要はありません。

SNS共有とOGPを混同しない

SNSプロフィールはサイト運営者のアカウントへの導線、シェアボタンは記事を共有する機能、OGPは共有時のタイトルや画像の表示情報です。それぞれ役割が異なります。SEO SIMPLE PACKなどでOGPを設定している場合も、プロフィールURLの登録だけで共有画像まで変わるわけではありません。共有時のタイトルや画像はOGP側で確認しましょう。

スマートフォンで重点的に見る場所

ヘッダーロゴとメニューボタンが重ならない
本文の文字が小さすぎず、横スクロールが発生しない
表やFAQが画面幅からはみ出さない
記事一覧の画像とタイトルが切れない
追従要素が本文やボタンを隠さない
フッターのリンクを押しやすい

HOAI Point

カスタマイザーのモバイルプレビューだけで完了にせず、保存後の公開ページも確認します。テーマ、キャッシュ、画像の読み込みによって、プレビューと実表示に差が出ることがあるためです。

変更が反映されないときの確認ポイント

変更が見えない場合は、まず保存状態を確認し、症状に合う確認先を選びます。表示が変わらないという理由だけで、全設定をリセットしないでください。

今の状態	次に確認すること
「公開済み」にならない・保存エラー	保存を完了できているか。エラー文を控え、次の変更を止める
特定の投稿・固定ページだけ違う	そのページの編集画面にあるSWELL設定
同じURLでもブラウザによって違う	再読み込み後の表示とブラウザキャッシュ
保存済みでも複数ページが古いまま	設定の対象範囲と、実際に利用中のキャッシュ機能

公開済みになっているか確認する

カスタマイザー左上が「公開済み」かを確認します。未保存の変更や保存エラーがある場合、公開ページで確認する前に保存を完了させます。保存できないときは、変更した設定名とエラー文を控え、追加の変更を止めて原因を調べます。

古い表示が残る場合だけキャッシュを確認する

キャッシュは、一度読み込んだ内容を再利用する仕組みです。保存済みでも古い見た目が残る場合は、同じURLを再読み込みし、別のブラウザやシークレットウィンドウでも比べます。ログイン状態などの条件が違うと表示も変わるため、それだけでキャッシュが原因とは断定しません。

一つのブラウザだけ古い場合は、そのブラウザのキャッシュされた画像・ファイルを必要な範囲で削除します。複数のブラウザでも古い場合は、実際に有効にしているテーマ・プラグイン・サーバー・CDNのキャッシュを確認し、提供元の手順に従って一つずつ再確認します。使っていない機能を探して追加したり、Cookieやログイン情報まで一括削除したりする必要はありません。

設定場所が正しいか確認する

複数のページで同じ表示になる場合は、「外観」→「カスタマイズ」にあるサイト共通設定を確認します。特定の投稿や固定ページだけ表示が異なる場合は、そのページの編集画面にあるSWELL設定を確認してください。共通設定が正しくても、ページごとの設定で表示が変更されていることがあります。確認項目はSWELL公式のページごとの表示設定を参照してください。

設定後の表示をまとめて確認する

設定を保存したら、管理画面だけで完了とせず、次のチェックリストに沿って公開画面を確認してください。

保存状態：「公開済み」を確認する
代表ページ：トップ、投稿、固定ページ、カテゴリー別の記事一覧を見る
画面幅：PCとスマートフォンで文字・表・画像・追従要素を確認する
リンク：メニューやフッターから目的のページへ移動できるか試す
閲覧状態：可能ならログアウト状態でも確認する
反映されない場合：症状別の確認先へ進み、必要なキャッシュだけ調べる

よくある質問

SWELLの設定は最初にすべて変更する必要がありますか？: 必要ありません。基本カラー、文字、横幅、ヘッダー、記事表示など、読者体験への影響が大きい項目から進めれば十分です。使っていない機能は初期状態のままでも問題ありません。
カスタマイズ中に表示が崩れたらどうしますか？: 直前に変更した項目を、事前に控えた値へ戻して保存します。そのうえで公開ページを再読み込みし、PCとスマートフォンの両方を確認します。「デフォルトに戻す」は自分の変更前の値へ戻す操作とは異なります。
追加CSSはいつ使えばよいですか？: カスタマイザーやSWELL設定で実現できない明確な目的がある場合に限定します。追加前に標準機能で対応できないか確認し、変更内容を記録してください。
カード型とリスト型はどちらがおすすめですか？: アイキャッチを活かしたいサイトはカード型、タイトルや概要を多く見せたいサイトはリスト型が選びやすいです。最終的にはスマートフォンでの一覧性を確認して決めます。
設定後に確認するページはどこですか？: まずトップページ、投稿ページ、固定ページ、カテゴリー別の記事一覧を確認します。検索結果や404ページ（存在しないURLの案内画面）など、変更の影響を受ける表示形式も必要に応じて確認してください。
設定を初期状態へ戻せますか？: SWELLにはカスタマイザー設定をまとめて初期値へ戻す機能があります。ただし、直前の変更だけを取り消す機能ではありません。再設定が必要になるため、通常は対象項目を控えた値へ戻す方法を先に選びます。全体の初期化が目的の場合だけ、残したい色・サイズ・表示設定を記録し、SWELL公式のリセット手順と照合して進めてください。