こんにちは "osaboo"
です。"@osaboo_Bot"
SWELLの初期設定とカスタマイズ方法｜初心者が最小限で始める手順ガイド
WordPressテーマ「SWELL」の初期設定とカスタマイズ方法を初心者向けに解説。必要最小限の手順で始められる導入ガイドです。
QuestionSWELLの初期設定？どうする…
WordPressテーマ「SWELL」は、デザイン性と使いやすさを兼ね備えた人気の有料テーマです。
しかし、初めて導入する初心者さんにとっては「何から設定すればいいの？」と迷ってしまうことも多いですよね。
この記事では、SWELLを購入してからブログを始めるまでに必要な初期設定と、最低限おさえておきたいカスタマイズ方法をわかりやすく解説します。
必要最小限の手順だけをまとめているので、初めての方でも安心して導入を進められます。
こんな方におすすめ！
- SWELLを購入したけど、初期設定のやり方がわからない
- どこまでカスタマイズすれば良いか迷っている
- 最低限の設定だけで、すぐにブログを始めたい
- 難しい操作なしでSWELLを使いこなしたい
この記事でわかること！
- SWELLの初期設定で最初にやるべきこと
- トップページや記事ページの基本的なカスタマイズ方法
- 初心者でも失敗しない設定の流れ
- 必要最小限で整えておけば安心なポイント
それではご覧ください。
目次 "Contents"
SWELLとは？
SWELLは、WordPress専用の有料テーマで、デザイン性と使いやすさを兼ね備えた大人気のテーマです。
直感的に操作できる「ブロックエディター完全対応」が特徴で、HTMLやCSSの知識がなくてもおしゃれなブログやサイトを作成できます。
また、表示速度の速さやSEO対策に優れており、ブログ初心者はもちろん、中級者以上のユーザーからも高い支持を得ています。
初期設定① WordPressの一般設定を整える
SWELLをインストールしたら、まずはWordPress全体の基本設定を確認しましょう。ここを整えておくと、サイト運営をスムーズに進められます。
Menu『WordPress管理＞ダッシュボード＞設定＞一般』をクリックします。
一般設定
- サイトのタイトル
- ブログ名を入力します。検索結果にも表示されるため、わかりやすく設定しましょう。
- キャッチフレーズ
- 短い説明文。SEOにも影響するので、サイト内容を端的にまとめると効果的です。（任意）
- サイトアイコン
- 小さく表示されるので、シンプルで視認性の高いロゴやマークがおすすめです。（任意）
- WordPress アドレス (URL)
- https://〇〇〇.〇〇〇.〇〇〇
通常は変更不要ですが、SSL（https://）になっているか確認しましょう。
- https://〇〇〇.〇〇〇.〇〇〇
- サイトアドレス (URL)
- https://〇〇〇.〇〇〇.〇〇〇
通常は変更不要ですが、SSL（https://）になっているか確認しましょう。
- https://〇〇〇.〇〇〇.〇〇〇
- 管理者メールアドレス
- 〇〇〇＠〇〇〇.〇〇〇
重要なお知らせや更新通知、コメント管理、パスワードリセットなどが届きます。
- 〇〇〇＠〇〇〇.〇〇〇
- メンバーシップ
- チェックを外します。（通常はこの設定で問題ありません）
- 新規ユーザーのデフォルト権限グループ
- 購読者（通常はこの設定で問題ありません）
- サイトの言語
- 日本語（通常はこの設定で問題ありません）
- タイムゾーン
- 東京（通常はこの設定で問題ありません）
- 日付形式
- Y年n月j日（通常はこの設定で問題ありません）
- 時刻形式
- g:i A（通常はこの設定で問題ありません）
- 週の始まり
- 月曜日（通常はこの設定で問題ありません）
- すべての設定を確認し、変更を加えたら『変更を保存』をクリックして完了です。
ポイント
- サイトタイトルやキャッチフレーズは後から変更可能ですが、最初に整えておくと検索エンジンにも認識されやすくなります。
- SSL対応（https）は必須なので、httpのままになっていないか必ず確認しましょう。
初期設定② パーマリンクを整える
WordPressで記事を投稿する際のURLの形式を「パーマリンク」といいます。最初に設定しておくと、後から変更する手間が減り、SEOにも有利です。
Menu『WordPress管理＞ダッシュボード＞設定＞パーマリンク』をクリックします。
パーマリンク設定
- パーマリンク構造
- カッスタム構造→『/%postname%/』
- 変更を加えたら『変更を保存』をクリックして完了です。
ポイント
- 記事タイトル（スラッグ）がURLに含まれるため、検索エンジンに認識されやすくなります。
- 記事公開後に変更するとリンク切れになる可能性があるため、初めに設定するのがおすすめです。
初期設定③ SWELLカスタマイザーで基本デザインを整える
次はカスタマイザーを使ってサイト全体のデザインを整えましょう。カスタマイザーは、リアルタイムでデザインを確認しながら設定できる便利な機能です。
ヘッダーに配置される各パーツの表示位置と名称は、以下のようになります。
ここでご紹介するカスタマイザーでの設定項目は次の通りです。
カスタマイザーで設定できる主な項目
- サイト基本情報
- 基本カラー（メインカラー・背景色）
- 基本デザイン（フォント設定・コンテンツ幅の設定）
- コンテンツのデザイン（見出しのデザイン設定）
- 変更を加えたら『公開』をクリックして完了です。
それでは順番に見ていきましょう。
サイト基本情報（サイトのタイトル・キャッチフレーズ・サイトアイコン）
ここで設定する内容は、ブログ全体の「顔」となる大切な部分です。
検索結果やSNSシェア時にも表示されるので、わかりやすくシンプルにまとめるのがおすすめです。
💡 アドバイス
最初から完璧に決める必要はありません。記事が増えて方向性が見えてきたら、あとで変更しても大丈夫です。
カスタマイザーを起動します。
Menu『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。
カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。
「カスタマイザー」画面で以下の手順で進み、詳細を設定します。
ここでは、「サイト基本情報」の詳細設定項目について紹介していきます。
WordPress設定
➡︎
サイト基本情報
➡︎
詳細設定項目
⬇︎
詳細設定項目
- サイトのタイトル
-
- ブログ名やサイト名を入力
（必須）
- ブログ名やサイト名を入力
- キャッチフレーズ
-
- サイト内容を端的にまとめた短い説明文を入力
（任意）
- サイト内容を端的にまとめた短い説明文を入力
- サイトアイコン
-
- シンプルで視認性の高いロゴやマークを設定
（任意）
- シンプルで視認性の高いロゴやマークを設定
基本カラー（メインカラー・背景色）
サイト全体の印象を左右する重要な設定です。メインカラーは「目次・ふきだし・リスト・ボーダー ・リンク。ボタン」などに使われ、背景色は全体のトーンを決めます。
💡 アドバイス
まずはシンプルな色を選び、記事が増えてから雰囲気に合わせて調整すると失敗しにくいです。ブランドカラーがある場合は、早めに反映させると統一感が出ます。
カスタマイザーを起動します。
Menu『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。
カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。
「カスタマイザー」画面で以下の手順で進み、詳細を設定します。
この記事では、「基本カラー」の詳細設定項目について紹介していきます。
サイト全体設定
➡︎
基本カラー
➡︎
詳細設定項目
⬇︎
詳細設定項目
- メインカラー
-
- #081114（デフォルト）
- サイト全体に影響する色
- #081114（デフォルト）
- テキストカラー
-
- #333（デフォルト）
- 文字の色はデフォルトがおすすめ
- #333（デフォルト）
- リンクカラー
-
- #1176d4
- リンクの色は青系がおすすめ
- #1176d4
- 背景色
-
- #fdfdfd（デフォルト）
- 背景色は薄い色がおすすめ
- #fdfdfd（デフォルト）
基本デザイン（フォント設定・コンテンツ幅の設定）
フォントやコンテンツ幅は、記事の読みやすさや全体の印象に直結します。フォントはサイトの雰囲気に合わせて選び、コンテンツ幅はPC・スマホ両方で見やすいサイズに設定しましょう。
💡 アドバイス
最初はデフォルト設定で十分です。記事数が増えてから「見やすさ」「読みやすさ」を意識して調整すると効率的です。
カスタマイザーを起動します。
Menu『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。
カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。
「カスタマイザー」画面で以下の手順で進み、詳細を設定します。
この記事では、「基本デザイン」の詳細設定項目について紹介していきます。
サイト全体設定
➡︎
基本デザイン
➡︎
詳細設定項目
⬇︎
詳細設定項目
- サイト全体の見た目
- 全体の質感
-
- 全体をフラットにする
- OFF（デフォルト）
- 全体に丸みをもたせる
- OFF（デフォルト）
- 全体をフラットにする
- コンテンツの背景を白にする
-
- オフ（デフォルト）
- ラジオボタンから選択して設定
- オン
- オン（メインエリアのみ）
- オフ（デフォルト）
- フォント設定
- ベースとなるフォント
-
- 游ゴシック・Noto Sans JP・明朝体（Noto Serif JP）から選択可
- ヒラギノゴシック > メイリオ
- おすすめ
- フォントサイズ(PC・Tab)
-
- 極小（14px）〜 極大（18px）から選択可
- 中（16px）
- デフォルト
- フォントサイズ(Mobile)
-
- 固定サイズ・デバイス可変と小・中・大を選択可
- デバイス可変：中
- デフォルト
- 字間(letter-spacing)
-
- .25em〜.1emから選択可
- 標準（normal）
- デフォルト
- コンテンツ幅の設定
- サイト幅
-
- 1200（デフォルト）→ 1156（おすすめ目安）
- １カラム時の記事コンテンツ幅
-
- 1200（デフォルト）→ 900（おすすめ目安）
- サブメニューの表示形式
-
- サブメニューをアコーディオン化する
- OFF（デフォルト）
- サブメニューをアコーディオン化する
- ページ背景
- ページ背景画像(PC)
-
- 任意（おすすめしません）
- ページ背景画像(SP)
-
- 任意（おすすめしません）
コンテンツのデザイン（見出しのデザイン設定）
見出しのデザインは、記事全体の読みやすさとデザイン性を大きく左右します。カラーや装飾を調整することで、重要な部分を強調しつつ読みやすいレイアウトに整えられます。
💡 アドバイス
派手にしすぎると本文とのバランスが崩れるため、シンプルで統一感のあるデザインがおすすめです。まずはデフォルトから始めて、サイトの雰囲気に合わせて少しずつ調整しましょう。
カスタマイザーを起動します。
Menu『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。
カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。
「カスタマイザー」画面で以下の手順で進み、詳細を設定します。
この記事では、「コンテンツデザイン」の詳細設定項目について紹介していきます。
投稿・固定ページ
➡︎
コンテンツのデザイン
➡︎
詳細設定項目
⬇︎
詳細設定項目
- 見出しのデザイン設定
- 見出しのキーカラー
-
- デフォルトではメインカラーが表示
- #RRGGBB（デフォルト）
- 任意→ #e22f26（当サイトの設定）
- 見出し2のデザイン
-
- 12種類から選択可
- 帯（デフォルト）
- 任意 → 左に縦線（当サイトの設定）
- 見出し3のデザイン
-
- 8種類から選択可
- ２色の下線（メイン・グレー）（デフォルト）
- 見出し4のデザイン
-
- 3種類から選択可
- 左に縦線（デフォルト）
- セクション見出しのデザイン設定
- セクション見出しのキーカラー
-
- #RRGGBB（デフォルト）
- セクション用見出し2のデザイン
-
- 3種類から選択可
- 装飾なし（デフォルト）
- 太字
-
- 太字の下に点線をつける
- OFF（デフォルト）
- 太字の下に点線をつける
- テキストリンク
-
- テキストリンクにアンダーラインをつける
- OFF（デフォルト）
- テキストリンクにアンダーラインをつける
トップページの初期設定
トップページをちょっとおしゃれにするコツをご紹介しています。あわせてご覧ください。
osaboo's SWELL
SWELL トップページのコンテンツ設定方法｜初心者でもできるカスタマイズ手順
WordPressテーマSWELLのトップページを記事数が少ない時でもおしゃれに演出！画像・レイアウト調整で初心者でも簡単にできるカスタマイズ手順を紹介します。
ヘッダー周りの「色・ロゴ」をカスタマイズしたい方は、ぜひご覧ください。
osaboo's SWELL
SWELL カスタマイザー完全ガイド｜ヘッダー設定のポイントと使い方を解説
SWELLのヘッダー設定をカスタマイザーでカスタマイズする方法を詳しく解説！ロゴの配置、メニューの設定、デザインの調整など、初心者でも簡単にできるポイントをまとめました。SWELLのヘッダーを自分好みにカスタマイズしたい方は必見！
フッター周りの「色・コピーライト・CTA」をカスタマイズしたい方は、ぜひご覧ください。
osaboo's SWELL
SWELL カスタマイザー完全ガイド｜フッター設定のポイントと使い方を解説
SWELLのカスタマイザーでできる「フッター」のポイントと使い方を初心者さん向けにご紹介。「フッター」の設定項目を一つ一つ全て徹底的に解説。サイトをカスタマイズするステップアップにお役立てください。
メニューの初期設定
必要なメニューの作り方や設定方法をご紹介しています。あわせてご覧ください。
osaboo's SWELL
SWELLのメニュー設定「最初はこれだけ！」ヘッダー＆フッターメニューの作り方【初心者必見】
SWELLのメニュー設定を初心者向けに解説！最初にやるべき2つのステップを押さえれば、ナビゲーションメニューの作成も簡単。SWELLのカスタマイズをスムーズに進めるための基本設定をわかりやすく紹介します。
まとめ！SWELLの初期設定とカスタマイズ方法｜初心者が最小限で始める手順ガイド
SWELLの初期設定は、まず「一般設定」「サイト基本情報」「カラー・デザイン」だけ整えれば十分です。
最初から完璧に仕上げる必要はなく、デフォルト設定でもブログ運営をスタートできます。
フォントや見出しのデザインは、記事が増えてからでも調整可能です。
カスタマイザーを使えば、画面を見ながら直感的に設定できるので安心です。
初期設定は必要最小限にとどめ、ブログ運営を進めながら少しずつ自分好みに整えていきましょう。
この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
