【完全図解】SWELLの初期設定マニュアル【ブログ初心者向け】

こんなあなたのための記事です
  • SWELLの初期設定手順を知りたい人
  • SWELLの初期設定をしたい人

画像を使って解説しますね。

悩む人

SWELLを導入したけど、初期設定のやり方が分からない。

後で検索するのが嫌だから、詳しく教えて欲しいな。

ご覧いただきありがとうございます。そんな悩みを解決します。

この記事で解決できること・分かること
  • 初期設定前の作業4つ
  • やるべき初期設定4つ

この記事を書いている人

ためのTwitterアカウント(@tame3_tame3

SWELLの初期設定は項目があって大変そうに見えますが、

  • プラグインの導入
  • アドセンスの設定
  • アナリティクスの設定

などの細かな作業を含めても40分程度で終わります。

悩む人

そんな掛かるの?
何だか面倒だな...

と思うかもしれませんが、最初にしっかりやっておくことで、後々稼げるかどうかが変わってきます。

そこで、今回は、完全図解でSWELLの初期設定についてお伝えします。

ため

迷わずに初期設定ができますよ!

ちなみに、SWELLの導入がまだでしたら、先にこちらお読み下さい。

関連記事

>>【図解】SWELLの導入手順【とても簡単】

>>【感想レビュー】SWELLを使って感じたリアルな本音|微妙な点も

目次

初期設定前に...SWELL購入後の作業4つ

SWELLの初期設定の前に、購入後の作業をサクッと終わらせましょう!

悩む人

何をすれば良いの?

ため

以下4つの作業です。

リンクをクリックするとページが移動します

一つずつ説明しますね。

会員登録をする

まず、会員登録をします。

これをしないとサポートが受けられず、アフィリエイトプログラムも使えないので、忘れずにやっておきましょう!

ため

5分程度で終わりますよ。

作業手順

STEP
「公式サイト」>「フォーラム」と進んで下さい。
STEP
「マイページ」をクリック。
STEP
「会員登録はこちら▶」を押します。
STEP
SWELL購入者限定パスワードを送信。
  1. 購入時のメールに記載されている、「購入者限定パスワード」を入力
  2. 「送信」ボタンを押す
STEP
「ユーザー名」と「メールアドレス」を入力し、「登録」をクリックします。
STEP
受信箱に以下のメールが届いているので、本文の「パスワード設定リンク」をクリック。
STEP
パスワードを設定します。
ため

会員登録が終わりました。

この章のトップへ戻る

アフィリエイトプログラムへ登録

ついでに、アフィリエイトプログラムへ登録しましょう!

これをやると、ブログでSWELLを宣伝して購入されたら、紹介料が入ってきますよ。

作業手順

STEP
ユーザーページに登録。

ユーザーページに移動し、画面に沿って必要事項を入力し、最後に「プロフィールを更新」をクリックします。

STEP
SWELLERS' IDをコピーします。

マイページの「SWELLERS' ID」をコピー。

STEP
「ダッシュボード」>「SWELL設定」>「SWELLERS’」と進んで下さい。
STEP
SWELLERS’ IDを貼り付けます。

STEP2でコピーした「SWELLERS' ID」を貼り付けて下さい。

悩む人

終わりました!

ため

ばっちりです!

この章のトップへ戻る

プラグインを導入する

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

悩む人

何を入れればいいの?

ため

下記を入れましょう。

導入するプラグイン
  • Useful Blocks
  • Contact Form 7
  • SEO SIMPLE PACK
  • Google XML Sitemaps
  • EWWW Image Optimizer

導入手順

導入する際、プラグイン検索を使うと楽ですよ。

作業手順

STEP
「ダッシュボード」>「プラグイン」>「新規追加」と進みます。
STEP
検索窓にプラグイン名を入力。

以下を検索します。

  • Useful Blocks
  • Contact Form 7
  • SEO SIMPLE PACK
  • Google XML Sitemaps
  • EWWW Image Optimizer
STEP
「今すぐインストール」をクリックします。
STEP
「有効化」をクリック。
悩む人

導入しました!

ため

OKです!

この章のトップへ戻る

Googleアドセンスの設定

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

既に広告を作っているなら、以下の手順でOKです。

作業手順

STEP
アドセンスにログインします。
STEP
「広告」>「広告ユニットごと」と進み、「コードを取得」をクリック。
STEP
広告コードをコピーします。
STEP
「ダッシュボード」>「SWELL設定」>「広告コード」と進みます。
STEP
「広告コード」をクリック。
STEP
アドセンスコードを貼り付けます。
STEP
「変更を保存」をクリック。
悩む人

できました!

ため

ばっちりです!

この章のトップへ戻る

ads.textの編集

悩む人

ところで、ads.textって登録した方が良いのかな。

ため

広告配信を止めないためにも、登録をした方が良いですね。

ads.textとは、偽造広告を防止するツールです。

導入するとドメインに悪評がつかなくなるので、広告配信とアドセンス収益を堅持できますよ。

作業手順

STEP
アドセンスにログインします。
STEP
「今すぐ修正」をクリック。
STEP
「ダウンロード」をクリックします。
STEP
ads.text本文をコピー。
STEP
「ダッシュボード」>「SWELL設定」>「ads.text」と進みます。
STEP
ads.text本文を貼り付け、「ads.textを変更する」をクリック。
悩む人

できました!

ため

OKです!

この章のトップへ戻る

Googleアナリティクスの設定

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

手順は以下のとおり。

作業手順

STEP
「Googleアナリティクスホーム」>「管理」>「トラッキング情報」>「トラッキングコード」と進みます。
STEP
トラッキングIDをコピー。
STEP
「ダッシュボード」>「SEO PACK」>「Googleアナリティクス」と進み、「トラッキングID」に貼り付けます。
悩む人

できました!

ため

これで購入後の作業は終了です!

この章のトップへ戻る

SWELLの初期設定一覧

続いてSWELLの初期設定をします。

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

リンクをクリックするとページが移動します

それぞれ見ていきましょう。

サイト全体のレイアウトを決める

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

悩む人

何をすれば良いの?

ため

以下の8つです。

リンクをクリックするとページが移動します

一つずつ説明しますね。

SNS情報を設定する

1番めはSNS情報の設定です。

これをやるとTwitterなどでシェアされやすくなるので、SNSからの流入が増えますよ。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「SNS情報」と進みます。
STEP
SNS情報を入力。

画面左側の入力欄に、以下を記入します。

  • FacebookページのURL
  • TwitterアカウントのURL
  • InstagramアカウントのURL
  • LINE@のURL
  • PinterestのURL
  • GithubのURL
  • YoutubeのURL
  • Amazon欲しいものリストのURL
  • FeedlyのURL
  • RSSのURL
  • お問い合わせフォームのURL
ため

SNS情報の設定が終わりました!

この章のトップへ戻る

ヘッダーを設定する

2番めはヘッダーの設定です。

やることは以下のとおり。

  • ヘッダーカラーの設定
  • ヘッダーレイアウトの変更
  • 固定ヘッダーの設定
  • ヘッダーバーの設定
  • 検索ボタンの設置

一つずつ説明しますね。

ヘッダーカラーの設定

まずはヘッダーカラーの設定です。

ワンクリックで変えられます。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「ヘッダー」と進みます。
STEP
「①ヘッダー背景色」「②ヘッダー文字色」を変更。

この章のトップへ戻る

ヘッダーレイアウトの変更

次にヘッダーのレイアウトを変えます。

こちらは選ぶだけです。

作業手順

STEP
「レイアウト・デザイン設定」まで画面をスクロールして下さい。
STEP
ヘッダーのレイアウト(PC)を変更します。

レイアウトは以下4種類です。

  1. ヘッダーナビをロゴの横に(右寄せ)
  2. ヘッダーナビをロゴの横に(左寄せ)
  3. ヘッダーナビを下に
  4. ヘッダーナビを上に

1.ヘッダーナビをロゴの横に(右寄せ)

2.ヘッダーナビをロゴの横に(左寄せ)

3.ヘッダーナビを下に

4.ヘッダーナビを上に

この章のトップへ戻る

固定ヘッダーの設定

その次に固定ヘッダーの設定をします。

悩む人

固定ヘッダーの設定はした方が良いの?

ため

した方が良いですね。
というのは、ブログ名が覚えられ、指名検索されやすくなるから。

作業手順

STEP
「ヘッダーの追従設定」までスクロールします。
STEP
「ヘッダーを追従させる」にチェック。

この章のトップへ戻る

ヘッダーバーの設定

その次にヘッダーバーの設定をします。

ボタンを押すだけで変更できます。

作業手順

STEP
「ヘッダーバー設定」までスクロールします。
STEP
背景色・文字色を変えて、「SNSアイコンリストを表示する」にチェック。

この章のトップへ戻る

検索ボタンの設置

最後は検索ボタンの設置をします。

作業手順は以下のとおり。

STEP
「検索ボタン設定」までスクロール。
STEP
「検索ボタンの表示位置」を設定します。

検索ボタンの位置は3種類あるので、好きな表示を選んで下さい。

1.表示しない

2.アイコンリストに表示

3.ヘッダーメニューに表示

ため

ヘッダーの設定が終わりました!

この章のトップへ戻る

フッターを設定する

3番めはフッターの設定です。

ボタンを押して文字を入力するだけでできますよ。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「フッター」を選択。
STEP
各種設定をします。

以下の設定をします。

設定項目

  1. フッター背景色
  2. フッター文字色
  3. ウィジェットエリアの背景色
  4. ウィジェットエリアの文字色
  5. コピーライトのテキスト
ため

フッターの設定が終わりました!

この章のトップへ戻る

サイドバーを表示させる

4番めはサイドバー表示の設定です。

手順を説明しますね。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「サイドバー」と進んで下さい。
STEP
チェックを入れます。

以下にレ点が入っていればOKです。

  • トップページにサイドバーを表示する
  • 投稿ページにサイドバーを表示する
  • 固定ページにサイドバーを表示する
  • アーカイブページにサイドバーを表示する
ため

サイドバーの表示設定が終わりました!

この章のトップへ戻る

基本カラーの設定をする

5番めは基本カラーの設定です。

ここでは、メインカラーと背景色の変更をします。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「サイト全体設定」と進んで下さい。
STEP
「基本カラー」をクリック。
STEP
「メインカラー」と「背景色」を変更します。

「リンクカラー」を変更すると、全ページのリンク色が変わります。

ため

基本カラーの設定が終わりました!

この章のトップへ戻る

基本デザインを設定する

6番めは基本デザインの設定です。

ここでは、アイキャッチとコンテンツ背景色を白に変更します。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「サイト全体設計」と進んで下さい。
STEP
「基本デザイン」をクリック。
STEP
「全体の質感」を変更します。

デザインは以下2種類です。

  1. 全体をフラットにする
  2. 全体に丸みをもたせる

1.全体をフラットにする

2.全体に丸みをもたせる

STEP
「コンテンツの背景色を白にする」の設定。

以下3つから選べます。

  1. オフ
  2. オン
  3. オン(メインエリアのみ)

1.オフ

2.オン

3.オン(メインエリアのみ)

補足

  • コンテンツを線で囲むは、白の背景色の部分にグレーの枠線が付く
  • 固定ページ・投稿ページのみ有効は、記事コンテンツの背景色が白になる

です。

ため

基本デザインの設定が終わりました!

この章のトップへ戻る

下部固定ボタンを設定する

7番めは下部固定ボタンの設定です。

行うことは以下の2つ。

  1. ページトップボタンの表示設定
  2. 目次表示ボタンの設定

一緒にできるので、併せてやっちゃいましょう!

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「サイト全体設定」と進んで下さい。
STEP
「下部固定ボタン・メニュー」をクリック。
STEP
ページトップボタンの表示設定をします。

ページトップボタンは以下の2種類です。

  1. 四角形
  2. 丸形

1.四角形

2.丸み

STEP
目次表示ボタンの設定

目次表示ボタンは2種類あります。

  1. 四角形
  2. 丸形

1.四角形

2.丸形

ため

下部固定ボタンの設定が終わりました!

この章のトップへ戻る

スマホ用固定フッターの設定もしよう

下部固定ボタンでは、スマホ用固定フッターメニューの設定もできます。

ため

ついでに設定しちゃいましょう。

設定手順は以下のとおり。

作業手順

STEP
チェックを入れます。

以下の項目にチェックを入れます。

チェックを入れる項目

  • メニュー開閉ボタンを表示する
  • 検索ボタンを表示する
  • ページトップボタンを表示する
  • 目次メニューを表示する
STEP
表示名を入力。

以下の入力をします。

入力項目

  1. メニューボタン名
  2. 検索ボタン名
  3. 目次ボタン名
  4. ページトップボタン名

表示例

STEP
背景色と文字色を決めます。

固定フッターメニューの背景色と文字色を変更します。

表示例

ため

これで完了です!

この章のトップへ戻る

記事一覧リストを設定する

8番めは記事一覧リストの設定です。

手順は以下のとおり。

  1. リストレイアウトの変更
  2. 抜粋文の表示変更
  3. タブの切り替え

順を追って説明しますね。

手順1.リストレイアウトの変更

まずはリストのレイアウトを変えます。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「記事一覧リスト」と進みます。
STEP
リストレイアウトの選択。

レイアウトは6種類あります。

  1. カード型
  2. リスト型
  3. リスト型(左右交互)
  4. サムネイル型
  5. ブログ型
  6. テキスト型

1.カード型

2.リスト型

3.リスト型(左右交互)

4.サムネイル型

5.ブログ型

6.テキスト型

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

この章のトップへ戻る

手順2.抜粋文の表示変更

次に抜粋文の文字数を変えます。

  • 非表示
  • 40文字
  • 80文字
  • 120文字
  • 160文字
  • 240文字
  • 320文字

この章のトップへ戻る

手順3.タブの切り替え

最後は①・②・③を設定します。

①:表示するタブの設定

  • 新着記事タブにチェックを入れる
  • 人気記事タブにチェックを入れる

②:タブの表示名を変更

  • 新着記事タブの表示名に名前を入れる
  • 人気記事タブの表示名に名前を入れる

③:タブデザインの変更

タブデザインは、以下3つから選べます。

標準
グレーボックス
下線
ため

終わりました!

この章のトップへ戻る

記事スライダーを設定する

最後は記事スライダーの設定です。

ワンクリックで設置できます。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「トップページ」と進みます。
STEP
「記事スライダー」をクリック。
STEP
「設置する」にチェックを入れます。
ため

記事スライダーの設定が終わりました!

ピックアップバナーを使いたい場合、SWELLの公式サイトで手順を確認して下さい。

悩む人

できました!

ため

OKです!

この章のトップへ戻る

サイドバーのレイアウトを決める

次はサイドバーのレイアウトを決めます。

選ぶだけで変更できます。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「サイト全体」と進んで下さい。
STEP
「タイトルデザイン」をクリック。
STEP
サイドバータイトルのデザインを変更。

デザインは4種類あります。

  1. 下線
  2. 左に縦線
  3. 左右に横線
  4. 塗り

1.下線

2.左に縦線

3.左右に横線

4.塗り

悩む人

できました!

ため

ばっちりです!

投稿・固定ページのレイアウトを決める

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

悩む人

何をすれば良いんですか?

ため

以下4つの作業です。

リンクをクリックするとページが移動します

一つずつ説明しますね。

目次の設定

1番めは目次の設定です。

作業手順は以下のとおり。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「投稿・固定ページ」と進みます。
STEP
「目次」をクリック。
STEP
チェックを入れます。

以下にチェックを入れます。

  • 投稿ページに目次を表示
  • 固定ページに目次を表示
STEP
目次タイトルの変更。

目次の表示名を変えます。

STEP
目次のデザインを変えます。

目次のデザインは以下4種類です。

1.シンプル

2.ボックス

3.上下ボーダー

4.ストライプ背景

STEP
目次リストタグの変更。

下記が選べます。

  • olタグ
  • ulタグ

olタグ

ulタグ

STEP
目次の表示範囲を決めます。

表示範囲は以下が選べます。

  • h2まで
  • h3まで
STEP
目次を表示する見出し個数を設定

見出しが何個以上あれば目次を表示するかを決めます。

ため

目次の設定が終わりました!

この章のトっプへ戻る

見出しの設定

2番めは見出しの設定です。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「投稿・固定ページ」と進みます。
STEP
「コンテンツのデザイン」をクリック。
STEP
見出しのカラーを変更します。

アドバイス:ヘッダーカラーと合わせると、統一感が出て、見やすくなります。

STEP
見出しデザインを変更。

デザインはh2・h3・h4ごとに選べます。

h2見出し

h3見出し

h4見出し

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

ため

見出しの設定が終わりました!

この章のトっプへ戻る

記事下エリアの設定

3番めは記事下エリアの設定です。

悩む人

記事下エリアってなんですか?

記事下エリアとは、この記事を書いた人などが表示される場所です。

設定しておくと回遊率や滞在時間が伸びるので、忘れずにやりましょう!

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「投稿・固定ページ」と進みます。
STEP
「記事下エリア」をクリック。
STEP
「SNSアクションエリアの設定」をします。

入力項目

  1. Twitterアカウント
  2. FacebookページURL
  3. FacebookページのappID
STEP
前後ページの設定
STEP
「著者情報エリアの設定」をします。

設定項目

  1. 「著者情報を表示」にチェックを入れる
  2. 著者情報表示のタイトルを記入する
STEP
関連記事エリアの設定

設定項目

  1. 関連記事エリアのタイトル
  2. 関連記事のレイアウト※

※関連記事のレイアウトは、カード型とリスト型があります。

カード型

リスト型

ため

記事下エリアの設定が終わりました!

この章のトっプへ戻る

SNSシェアボタンの設定

悩む人

SNSシェアボタン?

ため

ボタンを押すとSNSに投稿できる機能です。

SNSシェアボタン

SWELLは記事上・記事下・画面左に表示することができます。

設定手順

設定手順は以下のとおり。

作業手順

STEP
「ダッシュボード」>「外観」>「カスタマイズ」>「投稿・固定ページ」と進みます。
STEP
「SNSシェアボタン」をクリック。
STEP
チェックを入れて下さい。
悩む人

テスト投稿してみました!

ため

OKです!

この章のトっプへ戻る

エディタの設定をしてボックス色などを変える

最後はエディタの設定をしてボックス色などを変えます。

ワンクリックで変更できます。

作業手順

STEP
「ダッシュボード」>「SWELL設定」>「エディター設定」と進んで下さい。
STEP
エディターの設定をします。

お好みのデザインに変えてください。

悩む人

できました!

ため

ばっちりです!

これでSWELLの初期設定が終わりました!

まとめ:SWELLの初期設定を終わらせ、夢を叶えていこう!

今回は、完全図解でSWELLの初期設定についてお伝えしました。

地味な作業ばかりでしたが、後の結果を大きく変えます。

悩む人

次はどうすれば良いの?

ため

PVや収益を増やすために、キーワード選定について学びましょう!

>>【ブログ初心者向け】キーワード選定のやり方とコツを徹底解説

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

コメント

コメント一覧 (1件)

コメントする

目次
閉じる