悩んでいる人SWELLを買ったはいいけど、設定が多すぎて何から始めればいいのかわからない……。
最初に必要な設定を知りたい！！
こんなお悩みを解決します。
WordPressテーマ「SWELL」は、見た目もおしゃれで高機能な人気テーマです。
ですがそのぶん、最初にやっておきたい設定も多くて、初心者にはちょっとハードルが高く感じてしまうことも。
この記事では、初心者でも迷わず進められるように、画像つき＆順を追ってSWELLの初期設定をわかりやすく解説しています。
「これだけはやっておけば大丈夫！」というポイントに絞っているので、手順通りに進めれば、すぐに記事作成に取りかかれるようになりますよ！
SWELLの初期設定が重要な理由
ブログを書き始めたものの、書く前に設定をしておくことが必要だと気づいて「え、そこから!?」と思わず手が止まってしまい……、一気にやる気がなくなって書くのをやめてしまった……
そんな経験をした人は、実は少なくありません。
SWELLは見た目もおしゃれで、機能も豊富な優秀なWordPressテーマですが、そのぶん最初にやるべき設定が少し多めです。
ただし、最初からすべてを設定する必要はありません。
この記事では、「これだけは最初にやっておきたい設定」だけに絞って、初心者の方でも迷わず進められるよう、順番に解説していきます。
記事を読みながら、一緒に初期設定を進めていきましょう。
初期設定がブログの完成度を左右する
初期設定は、あなたのブログ全体の「印象」を左右する大事な土台です。
たとえば、見出しの装飾をしていないので記事が読みにくかったり、ページの表示速度が遅かったりすると、それだけで読むのをやめてしまった……
そんな経験、あなたにもありませんか？
SWELLには、ふきだしやボックスといった装飾だけでなく、おしゃれな見出しデザインやアニメーション表示、すぐに使えるブロックパーツが多数そろっています。
これらの便利な機能を最大限活かすには、最初の設定がとても大切。
かかみ最初に少しだけ手をかけておくだけで、記事を書くたびに悩まずに済みますし、あとからの修正もほとんどいりませんよ。
SWELLのインストールから初期設定の流れ
ここでは、SWELLを導入してブログを書き始めるまでに必要な作業の流れを、順を追ってご紹介します。
作業時間の目安もあわせて記載しているので、全体のイメージがしやすくなるはずです。
- SWELLテーマと子テーマをインストール（5分）
- WordPress側の基本設定（10分）
- カラーや見出しのデザイン設定（15〜30分）
- プラグイン導入（15分）
- GoogleアナリティクスとGoogleサーチコンソールの設定（10分）
SWELLのインストールとユーザー認証
まずは、SWELLのインストールとユーザー認証について解説します。
SWELLの親テーマ・子テーマのインストール
SWELLテーマを使用する際は、「親テーマ」と「子テーマ」の両方をインストールし、子テーマを有効化することがオススメです。
子テーマを使用することで、親テーマのアップデート時にもカスタマイズした内容が上書きされる心配がなくなります。
SWELLのインストール手順は以下の通りです。
WordPressにログイン後、管理画面の「外観」→「テーマ」をクリック後、「テーマを追加」をクリックします。
「テーマをアップロード」をクリックします。
「ファイルを選択」をクリックし、「SWELLの親テーマ」を選択し、「今すぐインストール」をクリックします。
その後、子テーマも同様にインストールします。
子テーマをインストールしたら、「有効化」をクリックします。
以下の画像のように「有効」と表示されていればOKです。
次にユーザー認証をします。
ユーザー認証をしていないと、WordPressに画像のように表示されます。
メールアドレスを入力後、「認証リクエストを送信」をクリックします。
画像のようなメールを受信したら、認証を完了させましょう。
メールの内容
認証が完了すると、画像のように表示されます。
これでSWELLのインストールは完了です。
【補足】手っ取り早く整えたいなら「着せ替えデザイン」がおすすめ
SWELLテーマでは、デモサイトのデザインをそのままインポートできる便利な「着せ替えデザイン」機能があります。
この機能を利用することで、初心者でも簡単にプロのようなデザインを適用できます。
「着せ替えデザイン」の手順は以下の通りです。
以下のボタンからSWELLのデモサイトページを開きます。
デモサイトの見本の下に画像の部分があるので、クリック。
SWELLERS’から希望するデモサイトのデータをダウンロードする
プラグイン「Customizer Export/Import」をインストール、有効化
「外観」→「カスタマイズ」をクリック。
左側メニューの一番下に「エクスポート/インポート」が表示されています。
①datにしたファイルを選択
②チェックを追加
③インポートをクリック
これで完成です。
これにより、短時間で魅力的なデザインのブログが完成です！
SWELLのインストールが完了したら、次はWordPress本体の基本設定に進みましょう！
WordPress側の基本設定
まずは、WordPress側の基本設定をしましょう。
| STEP1 | ・ブログのタイトル、キャッチフレーズを設定 ・デザインの初期設定 ・ヘッダーの設定 ・フッターの設定 ・サイドバーの設定 ・目次の設定 ・見出しの設定 |
| STEP2 | ・ヘッダーメニューの設定 ・フッターメニューの設定 |
| STEP3 | ・エディターの設定 ・プラグインの導入（機能追加） ・Googleアナリティクスとサーチコンソールの設定 |
STEP1：カスタマイズ画面で設定
STEP1は、WordPressの管理画面の「外観」→「カスタマイズ」からの設定になります。
①ブログのタイトル、キャッチフレーズを設定
ブログのタイトルやキャッチフレーズは、読者に「どんなブログか」を最初に伝える重要な入口です。
かかみしっかり設定しておくことで、ブログ全体の印象がグッと伝わりやすくなりますよ。
では、ブログタイトルとキャッチフレーズを以下の手順で設定していきましょう。
「Wordpress設定」をクリック
「サイト基本情報」をクリック
「サイトのタイトル」にブログ名を記載
「キャッチフレーズ」にブログのキャッチフレーズを記載
「サイトアイコン」に画像を設定
「サイトのタイトル」「キャッチフレーズ」「サイトアイコン」を設定したら、「公開」をクリック
デザインの初期設定
次にデザイン面を設定します。
基本カラーの設定
基本カラーは、ブログ全体に適用されます。
設定手順です。
「サイト全体設定」をクリック
「基本カラー」をクリック
「メインカラー」「テキストカラー」「リンクカラー」「背景色」を設定
画像（07基本カラー）
| 名称 | 説明 |
| メインカラー | 見出しやボタンなどに使われるアクセントカラー |
| テキストカラー | 記事本文の文字色に適用される |
| リンクカラー | 記事内リンクテキストの色に適用される |
| 背景色 | サイト全体の背景に適用される |
色の設定方法です。
「色を選択」をクリックすると、カラーパレットから選ぶことができます。
あるいは、「色を選択」の隣の枠にカラーコードを入力します。
カラーコードは以下を参考にしてみてください！
色選びのポイント
- テキストカラー：真っ黒（#000）よりも #333 や #444 のような柔らかい黒が、目にやさしく読みやすくなります。
- リンクカラー：青が一般的です。たとえば #0066cc や #1e90ff などの青系カラーは、「クリックできる場所」としてユーザーが直感的に認識しやすいためおすすめです。
- メインカラー：ブログの印象に合わせて選ぶのがポイントです：
| 印象 | おすすめの色 |
| 信頼感を出したい | ネイビー、グリーン |
| やさしい雰囲気にしたい | ベージュ、ラテカラー、淡いピンク |
| 明るく元気な印象にしたい | オレンジ、ライトブルー |
ヘッダーの設定
次にヘッダーの設定をします。
「ヘッダー」をクリックします。
まずは、ヘッダーのカラー設定をします。
次にその下の
- レイアウト・デザイン設定
- トップページでの特別設定
- ヘッダーの追従設定
- ヘッダーバー設定
- キャッチフレーズ設定
- ヘッダーメニュー（グローバルナビ）設定
- ヘッダーメニュー（SP）設定
- 検索ボタン設定
- メニューボタン設定
- カスタムボタン設定
を設定していきます。
ちなみに僕は、以下のように設定しています。
レイアウト・デザイン設定まとめ表
| 設定項目 | 内容 |
| ヘッダーのレイアウト（PC） | ヘッダーナビを下に |
| ヘッダーのレイアウト（SP） | ロゴ：左 / メニュー：右 |
| ヘッダー境界線 | 影 |
トップページでの特別設定
| 設定項目 | 内容 |
| ヘッダーの背景を透明にするかどうか | しない |
ヘッダーの追従設定
※スクロールしても画面上に固定される設定
| 設定項目 | 内容 |
| ヘッダーを追従させる（PC） | チェックあり |
| ヘッダーを追従させる（SP） | チェックあり |
ヘッダーバー設定
| 設定項目 | 内容 |
| ヘッダーバー | 設定なし |
ヘッダーバーとは、画像のようにヘッダーの上に表示されます。
ヘッダーバーの表示なし
ヘッダーバーの表示あり
キャッチフレーズ設定
| 設定項目 | 内容 |
| キャッチフレーズの表示位置 | 表示しない |
ヘッダーメニュー（グローバルナビ）設定
| 設定項目 | 内容 |
| マウスホバーエフェクト | ラインの出現（中央から） |
| ホバー時のラインの色 | メインカラー |
| ヘッダーメニューの背景色 | 背景色は設定しない（チェックあり） |
| サブメニューの背景色 | ホワイト |
ヘッダーメニュー（SP）設定
| 設定項目 | 内容 |
| ヘッダーメニュー（SP） | 設定なし |
検索ボタン設定
| 設定項目 | 内容 |
| 検索ボタンの表示位置（PC） | 表示しない |
| 検索ボタンの表示位置（SP） | 表示しない |
メニューボタン設定
| 設定項目 | 内容 |
| メニューボタン | 設定なし |
カスタムボタン設定
| 設定項目 | 内容 |
| カスタムボタン | 設定なし |
フッターの設定
次にフッターの設定をします。
「フッター」をクリックします。
各項目をヘッダーのように設定していきます。
僕は画像のように設定しています。
コピーライトは、フッターに表示されます。
サイドバーの設定
次にサイドバーの設定をします。
「サイドーバー」をクリック。
サイドバーを表示したいページにチェックを入れます。
表示するにチェックを入れると画像のようにサイドバーが表示されます。
かかみ僕はすべてのページにサイドバーが表示されるように設定してます。
サイドバーのデザインを設定します。
サイドバーのタイトルデザインは違う場所で設定します。
サイト全体の「タイトルデザイン」から設定。
ウィジェットでサイドバーをカスタマイズ
ウィジェットを使って、サイドバーに何を表示させるかカスタマイズします。
「外観」→「ウィジェット」をクリック
右側にサイドバー関連が4種あります。
| サイドバー名称 | 表示場所 | 表示条件 | 表示デバイス | 特徴 |
| 共通サイドバー | 全ページ | 常に表示 | PC・スマホ共通 | 基本のサイドバー |
| 共通サイドバー【スマホ版】 | 全ページ（スマホのみ） | スマホ用ウィジェットが未設定の場合は「共通サイドバー」が代わりに表示 | スマホのみ | スマホ専用のサイドバー表示が可能 |
| トップページ専用サイドバー | トップページ | トップページでのみ表示 | PC・スマホ共通 | 共通サイドバーの上部に表示される特別なウィジェットエリア |
| 追尾サイドバー | 全ページ | 「共通サイドバー」の下部に表示、スクロールしても固定表示 | PCのみ | 常に画面に表示され続ける追従型サイドバー |
表示するサイドバーに左側の項目からドラッグ・アンド・ドロップをします。
たとえば、僕の場合は、画像のように
共通サイドバーに、「[SWELL]プロフィール」
追尾サイドバーに、「カスタムHTML」と「[SWELL]目次」を追加しています。
そうすると、記事の隣に「[SWELL]プロフィール」、「カスタムHTML」と「[SWELL]目次」が表示されるようになります。
プロフィール画像
カスタムHTMLと目次
サイドバーによく見かけるのは、
- 人気記事
- 新着記事
- アーカイブ
- カテゴリー
などです。
かかみサイドバーに色々詰め込んでしまうと、ごちゃごちゃしてしてしまうので気をつけましょう！！
目次の設定
次に目次の設定をします。
記事内に目次を表示させることで、読者の利便性がアップします。
投稿・固定ページをクリック
次に目次をクリックします。
一番上の「目次を表示するかどうか」の「投稿ページに目次を表示」にチェックを入れる
かかみちなみに、上述したように、ウィジェットでサイドバーにも目次を入れています。
見出しの設定
記事の見出し部分のデザインです。
「投稿・固定ページ」をクリックし、「コンテンツのデザイン」をクリックします。
「コンテンツのデザイン」をクリック
「見出し2のデザイン」「見出し3のデザイン」「見出し4のデザイン」を設定します。
STEP2：メニューの設定
ここでは、ヘッダーメニューとフッターメニューの設定方法を紹介します。
ヘッダーメニュー
フッターメニュー
ヘッダーメニューの設定
ヘッダーメニューとフッターメニューは、「外観」→「メニュー」から作成します。
1つ目のメニューを作成する方法と2つ目以降のメニューを作成する方法は、少し違います。
ヘッダーメニューは1つ目のメニューになることが多いので、まず1つ目のメニューを作成する方法で説明します。
①「メニュー名」に名称を記載。「ヘッダーメニュー」で良いです。
②「メニュー設定」で、表示させたいメニューの位置を設定します。
「グローバルナビ」と「スマホ開閉メニュー内」でOKです。
③「メニューを作成」をクリックします。
そうすると、左の「メニュー項目を追加」が表示されるので、ヘッダーメニューに追加したいページにチェックを入れ、「メニューに追加」をクリックします。
その後、「メニューを保存」をクリックするとヘッダーにメニューが追加されます。
フッターメニューの設定
次にフッターメニューを作成します。
一つでもメニューを作成していれば、画像のような表示がありますので、「新しいメニューを作成しましょう」をクリックします。
フッターメニューの作成方法です。
①「メニュー名」に名称を記載。「フッターメニュー」で良いです。
②「メニュー設定」で、表示させたいメニューの位置を設定します。
「フッター」でOKです。
③「メニューを作成」をクリックします。
左の「メニュー項目を追加する」が表示されるので、フッターメニューに追加したいページにチェックを入れ、「メニューに追加」をクリックします。
その後、「メニューを保存」をクリックするとヘッダーにメニューが追加されます。
STEP3：その他の基本設定
次にその他の設定をします。
エディターの設定
次に「エディター設定」です。
エディター設定をしておくことで、使いやすさ・書きやすさが一気にアップします。
かかみ少し設定に時間がかかるかもしれませんが、最初にやっておけばずっと快適に使えますよ！
「SWELL設定」→「エディター設定」をクリック
エディター設定のページを開いたら、メニューにある箇所を設定していきましょう。
プラグインの導入
SWELLはテーマ自体に多くの機能が備わっているため、プラグインは必要なものだけを厳選して導入するのがポイントです。
特に初心者の方は、最初からたくさん入れるのではなく、本当に必要なものを少しずつ追加していくのが良いでしょう！
ここでは、SWELLと相性がよく、最低限入れておきたいオススメのプラグインだけを厳選してご紹介しています。
かかみ「まずはこれだけ入れておけば大丈夫」というプラグインなので、ぜひ参考にしてみてください。
| プラグイン名 | 用途 | 備考・理由 |
| SEO SIMPLE PACK | SEO設定 | SWELL開発者が作った軽量SEOプラグイン。 All in One SEOよりもSWELLとの相性◎ |
| WP Multibyte Patch | 日本語対応 | 日本語サイトの文字化け・検索不具合を防ぐ定番プラグイン |
| Snow Monkey Forms | お問い合わせフォーム | ブロックエディター完全対応のフォームプラグイン。Contact Form 7よりも直感的で使いやすい |
| EWWW Image Optimizer | 画像圧縮・高速化 | 画像を自動で最適化して表示速度を改善。 初心者でも扱いやすい |
| Site Kit by Google | アクセス解析 | Googleアナリティクス・サーチコンソールなどをまとめて導入できるGoogle公式プラグイン。 初心者でも簡単に設定可能 |
これらのプラグインを入れておくと、SWELLがさらに使いやすくなって、ブログもスムーズに運営できますよ！
プラグインのインストール方法
プラグインの導入は以下の手順で行います。
WordPressの管理画面にログインし、左メニューから「プラグイン」→「プラグインを追加」をクリック
右上の検索窓に導入したいプラグイン名（例：「SEO SIMPLE PACK」）を入力
検索したプラグインが表示されたら「今すぐインストール」をクリック。
検索したプラグインが表示されたら「今すぐインストール」をクリック。
必要なプラグインを導入したあとは、最初から入っている不要なプラグインは削除してもOKです！
スッキリさせておくと、管理もしやすくなりますよ。
GoogleアナリティクスとGoogleサーチコンソールの設定
「Site Kit by Google」を使えば、GoogleアナリティクスとGoogleサーチコンソールを難しい設定なしで導入することができます。
専門的な知識やコードの貼り付けも不要なので、初心者でも安心してブログのアクセス解析を始められますよ。
Googleアナリティクス：サイトの訪問者数や行動を分析するためのツール
Googleサーチコンソール：サイトの検索パフォーマンスを監視・改善するためのツール
Site Kit by Googleの設定手順
プラグイン検索で「Site Kit by Google」を探し、有効化する。
プラグインを有効化すると、WordPressの管理画面左側のメニュー部分に「Site Kit」と表示されるようになります。
「Site Kit」→「ダッシュボード」をクリック。
①チェックを追加
②チェックを追加
その後、「Googleアカウントでログイン」をクリックします。
メールアドレスを選択します。
チェックを追加します。
「続行」をクリックします。
①〜④までを進めていきましょう。
赤枠部分を確認し、最後に「アカウントを作成」をクリックします。
「日本」選択し、チェックを追加します。
必要と思われる箇所にチェックを追加し、「同意する」をクリックします。
「Go to my Dashuboard」をクリックします。
ダッシュボードに移動し、データを収集中になります。
PR表記とステマ規制への対応
2023年10月1日から施行されたステルスマーケティング（ステマ）規制により、アフィリエイト広告などを掲載する際には、明確な「PR表記」が必要になりました。
広告であるにもかかわらず、広告であることを隠すことがいわゆる「ステルスマーケティング」です。
景品表示法は、うそや大げさな表示など消費者をだますような表示を規制し、消費者がより良い商品・サービスを自主的かつ合理的に選べる環境を守ります。
そのため、記事内にアフィリエイト広告を掲載しているブロガーさんやアフィリエイターさんは、「広告」や「PR」などの表記をページ内にしっかり記載する必要があります。
SWELLでのPR表記方法
管理画面の「外観」→「カスタマイズ」をクリック
「投稿・固定ページ」をクリック
「PR表記」をクリック
①どのページ（投稿ページ）に表示させるかを選択
②表示タイプ：④、⑤の表記タイプを選択
③固定ページに表示させるかを選択
④テキスト（小）の表示例
⑤テキスト（大）の表示例
まとめ：最初に初期設定をすませ、効率よく記事を書いていきましょう！
今回は、SWELLの初期設定について紹介しました。
少し時間はかかりますが、ブログを書く前に初期設定をしておくことで、記事を書く時に楽になりますよ！！
以下の設定を最初にしておけばOKです！
| STEP1 | ・ブログのタイトル、キャッチフレーズを設定 ・デザインの初期設定 ・ヘッダーの設定 ・フッターの設定 ・サイドバーの設定 ・目次の設定 ・見出しの設定 |
| STEP2 | ・ヘッダーメニューの設定 ・フッターメニューの設定 |
| STEP3 | ・エディターの設定 ・プラグインの導入（機能追加） ・Googleアナリティクスとサーチコンソールの設定 |
最後までお読みいただき、ありがとうございます！
この記事があなたのお役に立っていましたら大変うれしいです！
SWELLの初期設定ができたら、どんどんブログ記事を書いていきましょう！！
