SWELLを入れた直後の管理画面には、デザイン、高速化、広告、SNS、構造化データなど多くの項目が並びます。全部決めてから記事を書こうとすると、設定を行き来するだけで時間が過ぎます。
ナマズノートは2025年8月からSWELLを使い始めました。約1年後の2026年8月24日に管理画面を見直すと、日常的に効いている初期設定は7つに絞れました。
最初に決めるのは、親テーマと子テーマ、ユーザー認証、サイトカラー、記事幅、見出し、目次、高速化・キャッシュです。トップページの作り込みや細かなアニメーションは、1記事目を公開した後でも間に合います。
現在の環境はWordPress 7.1、SWELL 2.19.0、SWELL CHILD有効です。さらにUseful Blocks Proと有料版のPochipp Assistも導入しています。
有料プラグインは、入れたからといって全記事へ使うものではありません。7つの基本設定を先に整え、Useful Blocks Proは比較や判断を助ける場面、Pochipp Assistは実物商品を紹介する場面に限定します。設定値はそのままコピーする正解ではなく、個人ブログを運営しながら現在も残している一例として見てください。
| 順番 | 最初に決めること | ナマズノートの現在値 |
|---|---|---|
| 1 | 親テーマと子テーマ | SWELL CHILDを有効、SWELL親テーマも保持 |
| 2 | ユーザー認証 | 認証完了 |
| 3 | サイトカラー | 基本4色とUseful Blocksの役割色を固定 |
| 4 | 記事幅 | サイト幅1200px、1カラム時の記事幅900px |
| 5 | 見出し | H2は帯、H3は2色下線、H4は左縦線 |
| 6 | 目次 | 投稿のみ表示、H3まで、2項目以上 |
| 7 | 高速化・キャッシュ | 必要な箇所だけ有効、ページ遷移高速化はオフ |
1｜親テーマを残し、SWELL CHILDを有効にする
最初に入れるのはSWELLの親テーマです。子テーマを使う場合も、親テーマを先にインストールし、削除せずに残します。
- 「外観 → テーマ → テーマを追加」を開く
- SWELL親テーマのZIPを解凍せずにアップロードする
- SWELL CHILDのZIPも同じ手順で追加する
- テーマ一覧でSWELL CHILDを有効にする
SWELL公式でも、親テーマと子テーマは同じアップロード手順で追加できると案内されています。子テーマは必須ではありませんが、今後コードやスタイルを調整するなら、テーマ本体と自分の変更を分けやすくなります。
ナマズノートでは、今後の調整を親テーマと分けて管理できるようにSWELL CHILDを有効にしています。親テーマのSWELLは、更新を受け取るために残したままです。
設定後は、公開ページが開くことと、投稿編集画面にSWELLブロックが表示されることまで確認します。
SWELL公式：WordPressテーマ「SWELL」をインストールする方法
2｜ユーザー認証を済ませて更新を受け取る
WordPressへログインできても、SWELLのユーザー認証が終わったことにはなりません。「SWELL設定 → アクティベート」を開き、認証状態を確認します。
認証前は、SWELL本体の更新通知がWordPressの更新画面に出ません。すでに使っている機能は制限されませんが、更新を受け取りやすくするために購入直後に済ませました。
- SWELL購入時のメールアドレスで会員サイトへ登録する
- WordPressの「SWELL設定 → アクティベート」を開く
- 会員サイトに登録したメールアドレスへ認証リクエストを送る
- 届いたメールのURLを30分以内に開く
- WordPressへ戻り「認証完了」を確認する
2026年8月24日のナマズノートでは、認証完了と表示されています。メールアドレスは管理情報なので、説明画像には載せません。
認証メールのURL、パスワード、管理者メールアドレスが説明画像へ写り込まないようにします。認証に失敗したときは、入力を繰り返す前にSWELL公式の現行手順を確認します。
3｜サイトカラーは4色だけ決める
購入直後にすべての装飾色を作る必要はありません。「外観 → カスタマイズ → サイト全体設定 → 基本カラー」で、まず4色を決めます。
| 役割 | 現在の色 | 主に使われる場所 |
|---|---|---|
| メインカラー | #04384c | 見出し、ボタン、アクセント |
| テキストカラー | #333 | 本文 |
| リンクカラー | #1176d4 | 本文中のリンク |
| 背景色 | #fdfdfd | サイト全体の背景 |
色を増やすより、青はリンク、赤は注意、黄色は要点というように役割を揃える方が、記事を追加した後も迷いません。リンク色は本文色と見分けられるか、注意色は白い背景で読めるかを公開画面で確かめます。
記事内のボックス、マーカー、ボタンは、実際の記事画面を見ながら整えると違いが分かります。
Useful Blocks Proは色と役割を先にそろえる
Useful Blocksの色も、記事ごとに変えず用途を固定しています。2026年8月26日時点の基準色は次の4系統です。薄い色は背景、濃い色は文字や線に使えるよう、同じ系統で登録しています。
| 色の系統 | 基準色 | 主な役割 |
|---|---|---|
| 青 | #0b8792 | 手順、判断軸、中立的な案内 |
| 緑 | #4f9b5c | 良かった点、向いている人 |
| ピンク | #c85a4a | 注意点、向いていない人 |
| 黄 | #d9992c | 結論、補足、見落としやすい点 |
比較ボックスは「向いている人・向いていない人」のように左右を見比べる場面で使います。CVボックスは、特徴や注意点を読んだ後に次の行動を選べる場所へ置き、冒頭から購入を迫る用途には使いません。
棒グラフや評価グラフは、計測条件や評価基準を説明できる場合だけ使います。数値の根拠がないまま見栄えのために使うと、読み手が実測値と受け取りやすいためです。独自アイコン用の画像4枠も登録済みですが、意味が合うものだけを選びます。
4｜記事幅はPCで一行が長くなりすぎない値にする
記事幅は「外観 → カスタマイズ → サイト全体設定 → 基本デザイン → コンテンツ幅の設定」にあります。
現在はサイト幅1200px、1カラム時の記事コンテンツ幅900pxです。SWELL側の余白が加わるため、本文の文字が画面いっぱいに広がる設定ではありません。通常の投稿にはサイドバーもあるので、最終的な本文幅は公開ページで判断します。
数字を変えたら、短い段落だけでなく、長い見出し、表、画像、関連記事カードも見ます。PCで読みやすくても、390px前後のスマートフォンで横スクロールが出るなら完了ではありません。
5｜見出しはH2・H3・H4の差が分かればよい
見出しデザインは「外観 → カスタマイズ → 投稿・固定ページ → コンテンツのデザイン」で選べます。
現在の組み合わせは次の3つです。
- H2：帯
- H3：2色の下線（メイン・グレー）
- H4：左に縦線
見た目より大切なのは階層です。記事タイトルがH1、大きな話題がH2、その中を分ける項目がH3です。文字を大きく見せたいだけの理由でH2からH4へ飛ばさないようにします。
デザインを一つずつ試していた時期もありましたが、記事ごとに変えると統一感がなくなります。3段階を決めた後は、見出しの言葉を具体的にする方へ時間を使うようになりました。
6｜目次は投稿だけ自動表示にする
目次は「外観 → カスタマイズ → 投稿・固定ページ → 目次」にあります。現在の設定は次の通りです。
| 項目 | 現在の設定 |
|---|---|
| 投稿ページ | 表示する |
| 固定ページ | 表示しない |
| デザイン | ストライプ背景 |
| リスト | olタグ |
| 抽出する見出し | H3まで |
| 表示条件 | 対象見出しが2個以上 |
| 省略 | 15項目を超えた分を省略 |
投稿は内容を探しやすくするため自動表示、トップページなどの固定ページは独自の案内と重なりやすいため全体設定では非表示にしています。必要な固定ページだけ、編集画面のSWELL設定で上書きできます。
目次のリンクを押し、正しい見出しへ移動するところまで確認します。見出しを直した後に目次だけ古く見える場合は、次のキャッシュ設定も見直します。
7｜高速化・キャッシュは全部オンにしない
高速化は「SWELL設定 → 高速化」にあります。SWELL公式は、特別なカスタマイズや独自の高速化をしていない環境ではキャッシュをすべてオンにする方法を勧めています。
ただし、ナマズノートではConoHa WINGの自動キャッシュクリアも有効で、トップページや共通パーツを頻繁に直します。今は次の控えめな構成を残しています。
| 項目 | 現在の設定 |
|---|---|
| 動的CSSのキャッシュ | オン |
| 外部リンクのブログカード | オン、30日 |
| ヘッダー・サイドバー・トップページなどのキャッシュ | オフ |
| 画像などの遅延読み込み | lazysizes.js |
| SNS埋め込みスクリプトの遅延 | 5秒 |
| ページ遷移高速化 | 使用しない |
高速化の効果は、この設定へ変えただけで速くなったと断定できません。サーバー、プラグイン、画像、広告、埋め込みでも結果が変わるためです。最初は設定を重ねず、変更前後の公開画面を比べます。
設定を保存したのに表示が変わらないとき、同じ場所を何度も変更しないでください。ブラウザ、WordPress・SWELL、ConoHa WINGの順にキャッシュを確認すると、古い表示を見ているだけなのか切り分けやすくなります。
Pochipp Assistは実物商品を紹介するときだけ使う
ナマズノートではPochipp本体と有料版のPochipp Assistを有効にし、Assistのライセンスも確認済みです。Pochipp Proは別の追加プラグインで、現在は入れていません。
Pochipp Assistを使うと、AmazonのPA-APIを利用できない段階でも管理画面から商品を検索できます。ただし、商品検索とアフィリエイト設定は別です。収益用のリンクにするには、Amazon、楽天市場、Yahoo!ショッピングなどで取得した正式なIDを別途設定する必要があります。
まだ物販記事を作っていないため、登録商品は0件です。2026年8月27日に、もしもアフィリエイト経由の楽天市場とYahoo!ショッピングだけ正式なIDを設定しました。Amazonは審査中のため空欄のままです。IDそのものは公開せず、最初の商品を載せるときにカードとリンク先を実画面で確認します。
ConoHa WINGやSWELLは実物商品ではないため、Pochippへ登録しません。現在の収益導線は、それぞれの実体験レビューと確認済みの広告リンクを使います。
最初の商品を載せるときの確認順
- 実際に使った、または現物を確認できる商品を選ぶ
- Pochipp Assistの検索結果で商品名・画像・販売元を確かめ、1件だけ登録する
- PCと390px前後のスマートフォンでカードとリンク先を確認する
- 利用するショップに正式なアフィリエイトIDが設定されているか確認し、記事内に広告・PR表記を入れる
最初は触らなくても困らなかった設定
1記事目を出す前に、次の項目まで完成させる必要はありませんでした。
- メインビジュアルや記事スライダー
- ヘッダーとフッターの細かなレイアウト
- ページ遷移のPrefetchやPjax
- 追加CSSとJavaScript
- 広告コードとクリック計測
- SNSごとの細かな表示
- SWELL設定の「機能停止」に並ぶ項目
- Useful Blocksの全ブロックを一度に試すこと
- 紹介する実物商品がない段階でのPochipp商品登録
トップページを作り込んだのは、記事が増え、初めて来た人の入口が必要になってからです。購入直後から同じ作業をすると、記事がない状態でカードや導線だけを調整することになります。
記事が増えてからトップページを整える場合は、固定ページで作った手順も確認できます。
失敗したのはサイトマップ停止とキャッシュの見落とし
サイトマップを止めて検索エンジンの入口を消した
SWELL設定の「機能停止」にある「コアのサイトマップ機能を停止する」が有効になり、WordPress標準の/wp-sitemap.xmlが404になったことがあります。
停止を解除した後は、親サイトマップと投稿・固定ページ・カテゴリーの子サイトマップがHTTP 200で開くことを確認しました。検索関連の設定は、管理画面のチェックを外すだけで終わらせず、公開URLを直接開きます。
購入後の良かった点だけでなく、この失敗と復旧の経過も使用レビューに残しています。
保存したのに表示が変わらず、さらに設定を触りかけた
トップページや関連記事カードを直しても、公開画面に古い内容が残ることがありました。原因が設定とは限らず、ブラウザ、SWELL、サーバーのどこかに古いキャッシュが残っている場合があります。
今は一度に一つだけ変更し、通常の公開URLとログアウト状態の画面を見ます。反映されないときだけキャッシュを順番に確認します。原因が分からないまま設定を増やさない方が、元へ戻しやすくなりました。
設定変更後は7つの順番で確認する
- 管理画面を再読み込みし、選んだ値が保存されているか見る
- 公開URLをログアウト状態またはシークレットウィンドウで開く
- PCで本文、見出し、目次、画像、関連記事カードを見る
- 390px前後のスマートフォンで横スクロールと文字切れを見る
- 目次、ボタン、関連記事カードを実際に押す
https://自分のドメイン/wp-sitemap.xmlが開くか見る- Useful BlocksやPochippを使った場合は比較の意味、商品情報、PR表記も確認し、問題がなければ次の設定を一つだけ変更する
アイキャッチを入れた後は、タイトル、画像、リンク、PC・スマートフォンの表示まで続けて確認します。
まとめ｜7つを決めたら1記事目へ進む
SWELL購入直後にすべての設定を完成させる必要はありません。
- 親テーマを残してSWELL CHILDを有効にする
- ユーザー認証を済ませる
- サイトカラーを4色に絞る
- 記事幅を公開画面で確認する
- H2・H3・H4の役割を揃える
- 目次を投稿と固定ページで分ける
- キャッシュは一度に増やさない
この7つが決まれば、次に直すべき場所は実際の記事を見て判断できます。Useful Blocks ProとPochipp Assistも、使う場面が決まってから必要な機能だけを足せば十分です。設定画面を埋めることより、1記事を書き、PCとスマートフォンで読める状態まで確かめる方が先です。
コメント