【完全図解】SWELLの初期設定手順マニュアル【最短最速で終わる】

「SWELLの初期設定は、何をすれば良いの？」

SWELLを購入した後にやるのが「初期設定」。

難しそうに思えますが、実際はめちゃくちゃ簡単でトータル1時間ほどで終わります。

この記事を書いている人

SWELLの初期設定手順は、下記の7つだけ。

ただ、「SWELLの初期設定が難しくて初心者にはできない」なんて声も。

なので、100枚以上の画像を使い、見て真似るだけで設定できるように解説していきますね。

＞＞関連記事：【SWELLレビュー】ブログの継続がラクになるWordPressテーマ

SWELLの初期設定まとめ【設定すべき7項目】

結論、SWELLの初期設定は下記を行えば十分です。

順番にお伝えしますね。

SWELLの初期設定手順①：プラグインを入れる

まずは、プラグインを導入します。

ため

というのも、プラグインを入れないとブログの運営ができないからですね。

要れるべきプラグインは下記8つ。

プラグイン検索を使って、導入します。

「ダッシュボード」⇒「プラグイン」⇒「新規追加」

お使いのワードプレスブログにログインしてください。

ログインしたら、「プラグイン」⇒「新規追加」と進みます。

検索窓にプラグイン名を入力

検索窓にプラグイン名を入力します。

「今すぐインストール」をクリック

プラグイン名を入力したら、「今すぐインストール」をクリック。

「有効化」をクリック

「有効化」をクリックします。

ため

これで完了です。

SWELLの初期設定手順②：Googleアナリティクスの設定をする

次は、Googleアナリティクスの設定をします。

後回しにするとやり忘れる可能性があるので、先に設定しましょう。

ため

・Googleアナリティクス
・GoogleアナリティクスGA4

の2種類があるため、両方の設定手順を解説します。

Googleアナリティクス

まずは、普通のGoogleアナリティクスの設定手順です。

「ログイン」⇒「管理」

Googleアナリティクスにログインしてください。

下記の画面が表示されたら、左下の「管理」をクリックします。

「プロパティ設定」をクリック

「プロパティ設定」をクリック。

トラッキングIDをコピー

トラッキングIDをコピーします。

例）
・UA-1234
・UA-abcd

この「UA-〇〇」を全てコピーしてください。

お使いのワードプレスブログにログイン

お使いのワードプレスブログにログインします。

「ダッシュボード」⇒「SEO PACK」⇒「一般設定」

ダッシュボードが表示されたら、「SEO PACK」⇒「一般設定」と進んでください。

「Googleアナリティクス」をクリック

「Googleアナリティクス」をクリック。

「トラッキングIDを貼り付ける」⇒「設定を保存する」

赤背景の部分にトラッキングIDを貼り付け、「設定を保存する」をクリックします。

「UA-」から始まる英数字を貼り付けてください。

ため

これで完了です。

GoogleアナリティクスGA4

GoogleアナリティクスGA4の設定手順です。

「ログイン」⇒「管理」

Googleアナリティクスにログインしてください。

下記の画面が表示されたら、左下の「管理」をクリックします。

「設定アシスタント」をクリック

「設定アシスタント」をクリック。

「タグの設定」をクリック

「タグの設定」をクリックします。

「お使いのサイト名」をクリック

「お使いのサイト名」をクリック。

「測定ID」をコピー

「測定ID」をコピーします。

「G-」から始まる英数字をコピーしてください。

お使いのワードプレスにログイン

お使いのワードプレスブログにログインしてください。

「ダッシュボード」⇒「SEO PACK」⇒「一般設定」

「ダッシュボード」⇒「SEO PACK」⇒「一般設定」と進んでください。

「Googleアナリティクス」 をクリック

「Googleアナリティクス」をクリックします。

「測定IDを貼り付ける」⇒「設定を保存する」

赤背景の部分にトラッキングIDを貼り付け、「設定を保存する」をクリックします。

「G-」から始まる英数字をコピーしてください。

ため

これで完了です。

SWELLの初期設定手順③：Googleアドセンスの設定をする

次は、Googleアドセンスの設定をします。

後でやると面倒くさくなるので、先にやっちゃいましょう。

ため

設定手順は下記のとおりです。

一つずつ説明しますね。

アドセンスとの紐づけ

まずは、アドセンスとの紐づけをします。

手順は下記のとおり。

紐づけ手順

アドセンスにログイン

アドセンスにログインします。

「広告」⇒「コード」を取得

「広告」⇒「コードを取得」と進んでください。

「コードをコピー」をクリック

「コードをコピー」をクリック。

「ダッシュボード」⇒「外観」⇒「カスタマイズ」

お使いのワードプレスブログにログインします。

下記の画面が表示されたら、「外観」⇒「カスタマイズ」と進んでください。

「高度な設定」をクリック

「高度な設定」をクリック。

「headタグ直前に出力するコード </head直前> 」にアドセンスコードを貼り付け

コピーしたアドセンスコードを、「headタグ直前に出力するコード</head直前>」に貼り付けます。

ため

メニュー上部の「公開」を押して完了です。

ads.textの登録する

次は、ads.textを登録します。

手順は以下のとおりです。

登録手順

アドセンスにログイン

アドセンスにログインします。

「今すぐ修正」をクリック

画面右上の「今すぐ修正」をクリック。

「ダウンロード」をクリック

「ダウンロード」をクリックします。

「ads.txt」をクリック → テキスト本文をコピー

画面左下の「ads.txt」をクリックし、テキスト本文をコピー。

「ダッシュボード」⇒「SWELL設定」⇒「ads.txtを編集」

お使いのワードプレスブログにログインします。

下記の画面が表示されたら、「SWELL設定」⇒「ads.txtを編集」と進んでください。

「ads.txtを貼り付け」⇒「ads.txtを変更する」

ads.txtを貼り付けた後、「ads.txtを変更する」をクリックします。

ため

これで完了です。

広告を貼る準備

最後は、広告を貼る準備をします。

手順は以下のとおりです。

広告を貼る準備手順

アドセンスにログイン

アドセンスにログインしてください。

「広告」をクリック

「広告」をクリック。

「広告ユニットごと」をクリック

「広告ユニットごと」をクリックします。

「コードを取得」をクリック

「コードを取得」をクリック。

「コードをコピー」をクリック

「コードをコピー」をクリックします。

「ダッシュボード」⇒「SWELL設定」 ⇒ 「SWELL設定」

お使いのワードプレスにログインしてください。

下記の画面が表示されたら、「SWELL設定」⇒「SWELL設定」と進みます。

「広告コード」⇒「記事内広告に貼り付け」

アドセンス広告のコードを、「記事内広告」に貼り付けてください。

「変更を保存」をクリック

スクロールして、下部にある「変更を保存」をクリック。

ため

これで完了です。

SWELLの初期設定手順④：サイト全体のレイアウトを決める

次は、サイト全体のレイアウトを決めます。

ため

このタイミングでは、下記を行うと良いです。

一つずつ見ていきましょう。

SNS情報の設定

SNSマークが表示させるために、SNS設定をします。

事前準備として、「ダッシュボード」⇒「外観」⇒「カスタマイズ」と進んでください。

「SNS情報」をクリック

「SNS情報」をクリックします。

「SNSリンクを入力」⇒「公開をクリック」

下記の赤枠部分に、SNSリンクを入力してください。

ため

入力したら、メニュー上部の「公開」を押します。

これで完了です。

ヘッダーの設定

次は、ヘッダーの設定をします。

「ダッシュボード」⇒「外観」⇒「カスタマイズ」⇒「ヘッダー」と進んでください。

ヘッダーカラーの設定

まずは

を変更します。

ため

終わったら、下にスクロールしてください。

レイアウト・デザインの設定

次は、ヘッダーのレイアウトを変更します。

から、好きなものを選んでください。

PCヘッダーのレイアウト

• ヘッダーナビを右寄せに
• ヘッダーナビを左寄せに
• ヘッダーナビを下に
• ヘッダーナビを上に

スマホヘッダーのレイアウト

• ロゴ：左 / メニュー：右
• ロゴ：中央 / メニュー：右
• ロゴ：中央 / メニュー左

ため

終わったら、画面を下にスクロールしてください。

ヘッダーの追従設定

次は、ヘッダーの追従設定をします。（固定ヘッダーの設定）

を入れると、固定ヘッダーの設定ができますよ。

• PC固定ヘッダー
• スマホ固定ヘッダー

ため

終わったら、画面を下にスクロールしてください。

ヘッダーメニューの背景色の設定

最後は、ヘッダーメニューの背景色の設定をします。

を入れましょう。

• 背景色を設定しない場合
• 背景色を設定した場合

ため

終わったら、メニュー画面上部の「公開」を押してください。

フッターの設定をする

ヘッダーの次は、フッターの設定をします。

ため

といっても


・コピーライトの変更
・SNSアイコンの表示設定


だけですが。

「ダッシュボード」⇒「外観」⇒「カスタマイズ」⇒「フッター」と進んでください。

コピーライトの変更

まずは、コピーライトの変更します。

「コピーライトのテキスト」の文章を変えてください。

SNSアイコンの表示設定

次は、フッターアイコンの表示設定をします。

「フッターにSNSアイコンを表示する」にチェックを入れてください。

ため

終わったら、メニュー画面上部の「公開」を押しましょう。

基本カラーの設定

フッターの次は、基本カラーの設定をします。

ため

具体的には


・サイトのメインカラー決め
・サイトの背景色決め


などですね。

設定手順

「ダッシュボード」⇒「外観 」⇒「カスタマイズ」⇒「サイト全体設定」⇒「基本カラー」と進んでください。

すると、下記が表示されます。

表示されたら

に変更してください。

ため

終わったら、「公開」を押してくださいね。

基本デザインの設定

基本カラーの次は、基本デザインの設定をします。

「ダッシュボード」⇒「外観 」⇒「カスタマイズ」⇒「サイト全体設定」⇒「基本デザイン」と進んでください。

全体の質感

全体の質感は、

から選べます。

• 無し
• 全体をフラットにする
• 全体に丸みを持たせる

コンテンツの背景色を白にする

次は、コンテンツの背景色を白にする。

の3つが選べます。

• オフ
• オン
• オン（メインエリアのみ）

ため

ちなみに、おすすめは「オン」です。

というのも、見やすいからですね。

フォントの設定をする

次は、フォントの設定をする。

読みやすくするために

を選びましょう。

コンテンツ幅の設定

次は、コンテンツ幅の設定。

にすると、見やすくなります。

サブメニューの表示形式

最後は、サブメニューの表示形式。

「サブメニューをアコーディオン化する」にチェックを入れると、ヘッダーメニューがアコーディオンになります。

ため

変更したら、「公開」を押してください。

下部固定ボタンの設定

基本デザインの次は、下部固定ボタンの設定をします。

「ダッシュボード」⇒「外観 」⇒「カスタマイズ」⇒「サイト全体設定」⇒「下部固定ボタン・メニュー」と進んでください。

ページトップへ戻るボタンの設置

ページトップへ戻るボタンは、3種類あります。

• 非表示
• 表示する（四角形）
• 表示する（円形）

この3つの中から、好きなデザインを選んでください。

ため

もし実装するなら「四角形」がおすすめです。

画面右下に目次ボタンの設置

ページトップへ戻るボタンと同様

があります。

• 非表示
• 表示する（四角形）
• 表示する（円形）

非表示・四角形・円形の中から、好きなデザインを選んでください。

ため

個人的には「円形」がおすめです。

スマホ用固定フッターメニューの設置

スマホ用固定フッターメニューを設置すると、このように表示されます。

設置する場合、下記にチェックを入れてください。

ため

「公開」を押して完了です。

記事一覧リストの設定

下部固定ボタンの次は、記事一覧リストの設定をします。

「ダッシュボード」⇒「外観 」⇒「カスタマイズ」⇒「記事一覧リスト」と進んでください。

リストレイアウトの変更

まず、リスト（記事一覧）レイアウトの変更をします。

デザインは6種類があるので、好きなものを選んでください。

• カード型
• リスト型
• リスト型（左右交互）
• サムネイル型
• ブログ型
• テキスト型

投稿情報の表示内容を変更

次は、投稿情報の表示内容を変更します。

下記のとおりに設定してください。

カテゴリー表示位置の変更

次は、カテゴリー表示位置の変更します。

サムネ画像の上だと見づらくなるので、「投稿日時の横に表示」を選んでください。

タブ切り替えの設定

最後は、タブ切り替えの設定します。

としてください。

ため

そうすると、


・デフォルトのトップページ
・カテゴリーページ


に「タブ切り替え」が表示されますよ。

• デフォルトのトップページ
• カテゴリーページ

終わったら、画面左上にある「公開」を押してください。

SWELLの初期設定手順⑤：サイドバーの表示設定をする

次は、サイドバーの表示設定をします。

手順は下記のとおりです。

一つずつ見ていきましょう。

サイトバーの表示設定の変更

まず、サイドバーの表示設定の変更をします。

「ダッシュボード」⇒「外観 」⇒「カスタマイズ」⇒「サイドバー」と進んでください。

サイドバーを表示するかどうかの

となります。

ため

そして


・「左」をクリック・・・サイドバーが左側
・「右」をクリック・・・サイドバーが右側


になりますよ。

変更が終わったら、メニュー上部の「公開」をクリックしてください。

サイドバーウィジェットのタイトルのデザインを変更する

次は、サイドバーウィジェットのタイトルのデザインを変更します。

「ダッシュボード」⇒「外観 」⇒「カスタマイズ」⇒「サイト全体設定」⇒「タイトルデザイン」と進んでください。

下記の4種類から選びます。

• 下線
• 左に横線
• 左右に横線
• 塗り

合わせてやった方が良いこと

この際、

を変更すると良いです。後がかなりラクになりますよ。

ため

終わったら、「公開」を押してくださいね。

サイドバーにウィジェットを追加する

最後は、サイドバーにウィジェットを追加します。

好きなウィジェットを、サイドバーにドラッグ＆ドロップしてください。

SWELLの初期設定手順⑥：投稿・固定ページのレイアウトを決める

次は、投稿・固定ページのレイアウトを決めます。

ため

やることは以下4つです。

一つずつ見ていきましょう。

目次の設定

まずは、目次の設定をします。

「ダッシュボード」⇒「外観 」⇒「カスタマイズ」⇒「投稿・固定ページ」⇒「目次」と進んでください。

目次の表示設定

上記の画面が表示されたら、赤枠の部分にチェックを入れます。

目次デザインの設定

チェックを入れたら、目次デザインを選んでください。

目次デザイン

目次デザインは4種類、olタグとulタグがあります。

• シンプル
• ボックス
• 上下ボーダー
• ストライプ背景

クリックすると画像が大きくなります

この中から、好きなデザインを選んでください。

目次の表示範囲の設定

目次デザインを選んだら、赤枠の部分の設定をします。

ため

終わったら、メニュー画面上部の「公開」を押してくださいね。

見出しの設定

目次の次は、見出しの設定をします。

「ダッシュボード」⇒「外観 」⇒「カスタマイズ」⇒「サイト全体設定」⇒「コンテンツデザイン」と進んでください。

見出しカラーの変更

カラーパレットを使って、好きな色を選択してください。

見出しのデザイン変更

下記の中から、好きなデザインを選んでください。

• h2見出しデザイン
• h3見出しデザイン
• h4見出しデザイン

ため

画面上部の「公開」を押して完了です。

記事下エリアの設定

見出しの次は、記事下エリアの設定をします。

「ダッシュボード」⇒「外観 」⇒「カスタマイズ」⇒「投稿・固定ページ」⇒「記事下エリア」と進んでください。

SNSアクションエリア

まずは、SNSアクションエリアの設定をします。

①にチェックを入れ、②にSNSのIDを入力してください。

前後ページエリア

次は、前後ページエリアの設定をします。

下記のようにしてください。

著者情報エリア

次は、著者情報エリアの設定をします。

「著者情報を表示」にチェックを入れてください。

関連記事エリア

最後は、関連記事エリアの設定をします。

下記のように設定してください。

関連記事のレイアウト

ちなみに、関連記事のレイアウトは2種類あります。

• カード型
• リスト型

見やすくするため、当ブログではリスト型を選択しました。

ため

終わったら、メニュー上部の「公開」を押してくださいね。

SNSシェアボタンの設定

記事下エリアの次は、SNSシェアボタンの設定をします。

「ダッシュボード」⇒「外観 」⇒「カスタマイズ」⇒「投稿・固定ページ」⇒「SNSシェアボタン」と進んでください。

SNSシェアボタンの表示位置

下記のとおり、全てにチェックを入れます。

ため

というのも、SNSでシェアされやすくなるからです。

表示するボタンの種類

全部にチェックを入れてください。

SNSシェアボタンのデザインを選ぶ

SNSシェアボタンのデザインは、下記の5種類あります。

• ブロック
• ボタン
• ボタン（小）
• アイコン
• ボックス

この中から、好きなデザインを選んでください。

ため

当ブログでは押しやすさを考慮して、「ブロック」に設定しています。

URLコピーボタン

押せば、記事URLのコピーができる「URLコピーボタン」。

上記3種類があります。

• 表示しない
• 小さく表示
• 大きく表示

この中から、好きなデザインを選んでください。

ため

ちなみに、当ブログは「大きく表示」を選びました。

終わったら、メニュー上部の「公開」を押してくださいね。

SWELLの初期設定手順⑦：エディタの設定をする

最後は、エディタの設定をします。

ため

やることは下記のとおりです。

「ダッシュボード」⇒「SWELL設定」⇒「エディター設定」と進んでください。

カラーセットの設定

カラーセットの設定で行うことは、下記のとおりです。

カラーパレット設定

まずは、カラーパレットの設定をします。

具体的には、文字色や文字背景色決めですね。

ため

デフォルトでも問題はありません。

リスト設定

次は、リスト設定（箇条書き色の変更）をします。

個人的におすすめなのは

です。

ため

「WEB色見本 原色大辞典」を参考に、サイトカラーのトーンと合わせると良いですよ。

キャプションブロック設定

次は、キャプションブロックの設定をします。

リストと使うことが多いので、リスト色と合わせると良いですよ。

Q&A設定

最後は、Q&A設定をします。

といっても、これはデフォルトのままでOKです。

ため

終わったら、「変更を保存」をクリックしてくださいね。

ボーダーセットの設定

カラーセットの次は、ボーダーセットの設定をします。

当ブログの設定

参考までに、当ブログの設定値を紹介します。

上記のとおりに設定しました。

ため

変更が終わったら、「変更を保存」をクリックしてください。

マーカーの設定

ボーダーセットの次は、マーカーの設定をします。

ため

具体的には、マーカースタイルの変更ですね。

マーカースタイルの種類

マーカースタイルは、4種類あります。

• 細線
• 太線
• 細ストライプ
• ストライプ

この中から、好きなデザインを選んでください。

ため

ちなみに、当ブログは「ストライプ」にしています。

変更が終わったら、「変更を保存」をクリックしてください。

ボタン設定

マーカーの次は、ボタン設定をします。

ため

やることは、ボタンの丸みやボタンカラーの変更ですね。

当ブログの設定

ちなみに、当ブログは下記のように設定しています。

ため

「WEB色見本 原色大辞典」を参考に、サイトカラーのトーンと合わせました。

変更が終わったら、「変更を保存」をクリックしてください。

アイコンボックスの設定

ボタンの次は、アイコンボックスの設定をします。

具体的には

ですね。

小アイコンのレイアウトの変更

まずは、小アイコンのレイアウトの変更から。

好きな色とスタイルを選びます。

小アイコンのスタイル3種類

小アイコンのスタイルは下記の3種類です。

• 塗り（フラット）
• 塗り（浮き出し）
• ボーダー

この中から選択してください。

ため

ちなみに、当ブログは「塗り（浮き出し）」に設定しています。

大アイコンのレイアウトの変更

続いて、大アイコンのレイアウトの変更です。

小アイコンと同じく、 好きな色とスタイルを選びます。

大アイコンのスタイル2種類

ちなみに、大アイコンのスタイルは下記の2種類

• フラット
• 立体

この中から、好きなデザインを選んでください。

ため

参考までに、当ブログは「フラット」に設定しています。

変更が終わったら、「変更を保存」をクリックしてください。

吹き出しの設定

アイコンボックスの次は、吹き出しの設定をします。

赤枠のカラーパレットを使って、好きな色を選んでください。

色が分からない場合

と良いですよ。

ため

変更が終わったら、「変更を保存」をクリックしてください。

ブログカート・引用の設定

最後は、

の設定をします。

ブログカート

まずは、ブログカートから。

のデザインを選びます。

ブログカート（内部）のデザイン

ブログカート（内部）のデザインです。

• タイプ 1
• タイプ 2
• タイプ 3

ブログカート（外部）

一方、ブログカート（外部）のデザインがこちら。

• タイプ 1
• タイプ 2
• タイプ 3

ため

僕は


・ブログカート内部・・・タイプ3
・ブログカート外部・・・タイプ2


にしています。

引用

次は、引用です。

から選びます。

• シンプル
• クオーテションマーク表示

変更が終わったら、「変更を保存」をクリックしてください。

ため

これで完了です！

お疲れさまでした！！

【参考】SWELL初期設定が終わった後にすること

悩む初心者ブロガー

SWELLの初期設定が終わったら、何をすれば良いの？

ため

下記4つです。

Font Awesomeの設定

Font Awesomeとは、アイコンを文字として使うことができるものです。

ため

SWELLの場合、設定すれば使えるようになります。

なので、ダウンロードをする必要がありません。

設定手順

設定手順です。

STEP

「ダッシュボード」⇒「SWELL設定」⇒「SWELL設定」

STEP

「 Font Awesome 」をクリック

STEP

「CSSで読み込む」⇒「変更を保存」

ため

実際の使い方は、こちらをご覧ください。

SWELLの高速化設定をする

サイト表示速度が遅いとSEOでマイナスなので、高速化設定をしましょう。

ため

詳しいやり方は、下記をご覧ください。

図解なので、真似るだけで爆速にできますよ。

関連記事

あわせて読みたい

【速度改善】SWELLを高速化する設定方法3つ【モバイル80超・PC99になった】

SWELLのトップページをカスタマイズする

CSSを使わずにカスタマイズができるので、好きなトップページを作りましょう。

ため

ちなみに、当ブログにもカスタマイズ記事があります。

ページセッションが増やせるので、少ないアクセスでPVが稼げますよ。

関連記事

あわせて読みたい

【SWELLカスタマイズ】サイト型トップページの作り方【利便性&回遊率UP】

SWELLのブロックエディターを使って記事を書く

上記の作業が終わったら、ブログ記事を書きましょう。

下記を読んでもらえれば、

ブロックエディタの使い方から記事の書き方まで

分かりますよ。

関連記事

あわせて読みたい

SWELLのブロックエディターの使い方｜ブログ記事の書き方も解説【動画あり】

【完全図解】SWELLの初期設定手順マニュアル【最短最速で終わる】：まとめ

ブログを運営できるところまで来ましたね。お疲れさまでした。

ため

最初にやるかやらないかで、後々大きな差が出ます。

では、一息ついたら

上記を行いましょう。

関連記事

あわせて読みたい

【速度改善】SWELLを高速化する設定方法3つ【モバイル80超・PC99になった】

あわせて読みたい

【SWELLカスタマイズ】サイト型トップページの作り方【利便性&回遊率UP】

あわせて読みたい

SWELLのブロックエディターの使い方｜ブログ記事の書き方も解説【動画あり】

今回は以上です。