MENU
カテゴリー
アーカイブ
「記事を見て欲しい時」のための"ブログ添削記事添削サービス"!超具体的フィードバックで記事が生まれ変わる

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

URLをコピーする
URLをコピーしました!
悩む人

SWELLを購入したけど、初期設定の項目が多そう。何をすれば良いの?

そんな悩みを解決します。

この記事を書いている人

ため(@tame3_tame3

今回は、完全図解でSWELLの初期設定手順について解説します。(使用画像数:150枚以上)

SWELLを導入したものの、

  • 「設定項目が多そう」
  • 「何を設定すれば良いの?」

と思いますよね?

ため

僕は思いましたね。

とは言え、やることはそんな多くありません。8項目だけ設定すればOKです。

そこで今回は、SWELLの初期設定で「設定すべき8項目」についてお伝えします。

ため

完全図解なので、見て真似るだけでサクッと初期設定が完了しますよ。

総使用画像数:150枚上、所要時間:50ぐらい

なので、1時間後には記事を書き始められます!

ちなみに、SWELL導入後の作業をやっていない方は、先にSWELLの導入手順5ステップ!44枚の画像を使って解説【テーマ移行にも対応】をご覧ください。

ため

それでは、本文を見ていきましょう。

目次

\ みんな使い始めてる /

WordPressテーマSWELL【あなたのブログ生活を180度変える魔法のテーマ】

HTML/CSSを操作する必要が一切ない

・機能が豊富!カスタマイズサイトを見て自作する必要が無い!
・上位表示されやすい「JSON-LD」に対応!検索TOP10連発も夢じゃない

・だから、1/2の労力でライバルに圧倒的な差を付けられる!(非常に有利になる)

結論:(短期間で)ブログを資産化したり、人気ブロガーになるのも夢ではありません!

参考【SWELLレビュー】ブログが楽しくなって継続がラクになるWordPressテーマ

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

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

SWELLの初期設定まとめ
  1. SWELLS' IDとサイトを紐付ける
  2. プラグインを入れる
  3. Googleアナリティクスの設定をする
  4. Googleアドセンスの設定をする
  5. サイト全体のレイアウトを決める
  6. サイドバーの表示設定をする
  7. 投稿・固定ページのレイアウトを決める
  8. エディタの設定をする

順番にお伝えしますね。

SWELLの初期設定手順①: SWELLES' IDとサイトを紐付ける

まずは、SWELLES' IDとサイトを紐付けます。

手順は下記のとおり。

紐付け手順
  1. 会員ページで「SWELLERS' ID」をコピー
  2. 「ダッシュボード」⇒「SWELL設定」→「SWELLERS' ID」
  3. SWELLERS' IDを登録

一つずつ説明しますね。

会員ページで「SWELLERS' ID」をコピー

会員ページにログインします。※リンクをクリックすると会員ページに移動します

ため

ログイン画面に移動したら、


①:ユーザー名
②:パスワード
③:キャプション



を入力。「サインイン」をクリックしてください。

「マイページ」をクリック

ログインしたら、画面右上の「マイページ」をクリックします。

「SWELL公式サイト」⇒「マイページ」

SWELLERS' IDをコピーする

そして、画面をスクロールし、SWELLERS' IDをコピー

SWELLERS' IDをコピー

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

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

下記の画面が表示されたら、「SWELL設定」⇒「SWELLERS' ID」と進んでください。

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

SWELLERS' IDを登録

赤背景の部分に「SWELLERS' ID」を貼り付け、「保存する」をクリックします。

『SWELLERS' ID』を貼り付け → 『保存する』をクリック
ため

これで完了です。

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

紐づけが終わったら、プラグインを入れます。

ため

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

導入すべきプラグインは下記8つ。

導入すべきプラグイン
  • SEO SIMPLE PACK
  • WebSub/PubSubHubbub
  • WordPress Ping Optimizer
  • Contact Form 7
  • Google XML Sitemaps
  • Wordfence Security
  • WP-Optimize
  • EWWW Image Optimizer

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

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

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

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

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

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

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

入れるプラグイン
  • SEO SIMPLE PACK
  • WebSub/PubSubHubbub
  • WordPress Ping Optimizer
  • Contact Form 7
  • Google XML Sitemaps
  • Wordfence Security
  • WP-Optimize
  • EWWW Image Optimizer

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

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

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

「有効化」をクリック

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

「有効化」をクリック
ため

これで完了です。

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

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

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

ため

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

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

Googleアナリティクス

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

Googleアナリティクスの設定手順
  1. 「ログイン」⇒「管理」
  2. 「プロパティ設定」をクリック
  3. トラッキングIDをコピー
  4. お使いのワードプレスにログイン
  5. 「ダッシュボード」⇒「SEO PACK」⇒「一般設定」
  6. 「トラッキングIDを貼り付ける」⇒「設定を保存する」

「ログイン」⇒「管理」

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

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

「Googleアナリティクスにログイン」⇒「管理」

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

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

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

トラッキングIDをコピー

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

「トラッキングID」をコピー

例)
・UA-1234
・UA-abcd

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ため

これで完了です。

GoogleアナリティクスGA4

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

GoogleアナリティクスGA4の設定手順
  1. 「ログイン」⇒「管理」
  2. 「設定アシスタント」をクリック
  3. 「タグの設定」をクリック
  4. 「お使いのサイト名」をクリック
  5. 「測定ID」をコピー
  6. お使いのワードプレスにログイン
  7. 「Googleアナリティクス」をクリック
  8. 「ダッシュボード」⇒「SEO PACK」⇒「一般設定」
  9. 「測定IDを貼り付ける」 ⇒「設定を保存する」

「ログイン」⇒「管理」

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

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

「ログイン」⇒「管理」

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

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

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

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

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

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

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

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

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

「測定ID」をコピー

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

「測定ID」をコピー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ため

これで完了です。

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

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

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

ため

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

Googleアドセンスの設定
  • アドセンスとの紐づけ
  • ads.textを登録する
  • 広告を貼る準備

一つずつ説明しますね。

アドセンスとの紐づけ

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

手順は下記のとおり。

紐づけ手順

  1. アドセンスにログイン
  2. 「広告」⇒「コード」を取得
  3. 「コードをコピー」をクリック
  4. 「ダッシュボード」⇒「外観」⇒「カスタマイズ」
  5. 「高度な設定」をクリック
  6. 「headタグ直前に出力するコード </head直前> 」にアドセンスコードを貼り付け

アドセンスにログイン

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

アドセンスにログイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ads.textの登録する

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

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

登録手順

  1. アドセンスにログイン
  2. 「今すぐ修正」をクリック
  3. 「ダウンロード」をクリック
  4. 「ads.txt」をクリック ⇒ テキスト本文をコピー
  5. 「ダッシュボード」⇒「SWELL設定」⇒「ads.txtを編集」
  6. ads.txtを貼り付け ⇒ ads.txtを変更する

アドセンスにログイン

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

Googleアドセンスにログイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これで完了です。

広告を貼る準備

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

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

広告を貼る準備手順

  1. アドセンスにログイン
  2. 「広告」をクリック
  3. 「広告ユニットごと」をクリック
  4. 「コードを取得」をクリック
  5. 「コードをコピー」をクリック
  6. 「ダッシュボード」⇒「SWELL設定」⇒「SWELL設定」
  7. 「広告コード」⇒「記事内広告に貼り付け」
  8. 「変更を保存」をクリック

アドセンスにログイン

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

Googleアドセンスにログイン

「広告」をクリック

「広告」をクリック。

「広告」をクリック

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これで完了です。

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

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

ため

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

サイト全体のレイアウト設定
  • SNS情報の設定
  • ヘッダーの設定
  • フッターの設定
  • 基本カラーの設定
  • 基本デザインの設定
  • 下部固定ボタンの設定
  • 記事一覧リストの設定

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

SNS情報の設定

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

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

設定手順
  • 「SNS情報」をクリック
  • 「SNSリンクを入力」⇒「公開をクリック」

「SNS情報」をクリック

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

「SNS情報」をクリック

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

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

入力するSNSリンク
  • Facebook
  • Twitter
  • Instagram
  • LINE@
  • Pinterest
  • Github
  • Youtube
  • Amazon欲しいものリスト
  • Feedly
  • RSS
  • お問い合わせフォーム
ため

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

これで完了です。

ヘッダーの設定

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

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

ヘッダーカラーの設定

まずは

  • ヘッダー背景色
  • ヘッダー文字色

を変更します。

ため

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

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

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

  • PCヘッダーのレイアウト・・・4種類
  • スマホヘッダーのレイアウト・・・3種類

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

PCヘッダーのレイアウト

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

ため

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

ヘッダーの追従設定

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

  • ヘッダーを追従させる(PC)・・・チェック
  • ヘッダーを追従させる(SP)・・・チェック

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

ため

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

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

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

  • 背景色を設定しない場合・・・「背景色は設定しない」にチェック
  • 背景色を設定する場合・・・「背景色を設定する」にチェック

を入れましょう。

ため

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

フッターの設定をする

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

ため

といっても


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



だけですが。

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

コピーライトの変更

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

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

コピーライトの文章を変更

SNSアイコンの表示設定

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

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

ため

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

基本カラーの設定

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

ため

具体的には


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



などですね。

設定手順

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

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

表示されたら

  • メインカラー・・・好きな色
  • テキストカラー・・・好きな色
  • リンクカラー・・・好きな色
  • 背景色・・・好きな色

に変更してください。

ため

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

基本デザインの設定

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

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

全体の質感

全体の質感は、

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

から選べます。

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

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

  • オフ
  • オン
  • オン(メインエリアのみ)

の3つが選べます。

ため

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

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

フォントの設定をする

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

読みやすくするために

  • ベースとなるフォント・・・ヒラギノゴシック>メイリオ
  • フォントサイズ(PC・Tab)・・・中(16px)
  • フォントサイズ(Mobile)・・・デバイス可変:大

を選びましょう。

コンテンツ幅の設定

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

  • サイト幅・・・1305
  • カラム時の記事コンテンツ幅・・・1305

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

サブメニューの表示形式

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

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

ため

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

下部固定ボタンの設定

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

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

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

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

  • 非表示
  • 表示する(四角形)
  • 表紙する(円形)

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

ため

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

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

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

  • 非表示
  • 表示する(四角形)
  • 表示する(円形)

があります。

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

ため

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

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

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

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

チェックを入れる項目
  • メニュー開閉ボタンを表示する
  •  検索ボタンを表示する
  •  ページトップボタンを表示する
  •  目次メニューを表示する
ため

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

記事一覧リストの設定

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

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

リストレイアウトの変更

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

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

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

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

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

設定値
  • タイトルを隠す・・・チェックを外す
  • 公開日を表示する・・・チェックを外す
  • 更新日を表示する・・・チェックを入れる
  • 抜粋文の文字数(PC・Tab)・・・非表示
  • 抜粋文の文字数(Mobile)・・・非表示

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

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

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

タブ切り替えの設定

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

  • 「新規記事タブ」を追加する・・・チェックを入れる
  • 「人気記事タブ」を追加する・・・チェックを入れる
  • 新規記事タブの表示名・・・新着記事
  • 人気記事タブの表示名・・・人気記事

としてください。

ため

そうすると、


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


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

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

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

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

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

サイドバーの表示設定
  • サイトバーの表示設定の変更
  • サイドバーのレイアウトを変更する
  • サイドバーにウィジェットを追加する

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

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

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

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

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

  • チェックを入れる・・・サイドバーが表示される
  • チェックを外せす・・・サイドバーが表示されない

となります。

ため

そして


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



になりますよ。

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

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

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

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

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

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

この際、

  1. サブコンテンツ(記事下コンテンツ)のタイトルデザイン
  2. フッターのタイトルデザイン
  3. スマホメニュー内のタイトルデザイン

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

ため

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

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

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

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

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

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

ため

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

投稿・固定ページのレイアウトの決め方
  • 目次の設定
  • 見出しの設定
  • 記事下エリアの設定
  • SNSシェアボタンの設定

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

目次の設定

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

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

目次の表示設定

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

チェックを入れる
  • 投稿ページに目次を表示
  • 固定ページに目次を表示

目次デザインの設定

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

目次デザイン

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

olタグ
ulタグ

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

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

目次の表示範囲の設定

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

設定値
  • どの階層の見出しまで抽出するか・・・h3
  • 見出しが何個以上あれば表示するか・・・1
ため

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

見出しの設定

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

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

見出しカラーの変更

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

見出しのデザイン変更

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

ため

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

記事下エリアの設定

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

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

SNSアクションエリア

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

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

  1. 表示するボタンにチェックを入れる
    • Twitterフォローボタン
    • Instagramフォローボタン
    •  Facebookいいねボタン
  2. IDを入力する
    • TwitterのID
    • InstagramのID
    • Facebookいいねボタン対象のURL
    • Facebookいいねボタンに使用するappID

前後ページエリア

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

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

設定項目
  • 前後記事へのページリンクを表示・・・チェックを入れる
  • ページリンクにサムネイル画像を表示する・・・チェックを入れる
  • 同じカテゴリー記事を取得する・・・チェックを入れる
  • 前後記事へのページリンクのデザイン・・・標準

著者情報エリア

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

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

関連記事エリア

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

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

設定項目
  • 関連記事を表示・・・チェック
  • 関連記事エリアのタイトル・・・こちらの記事も読まれています
  • 関連記事のレイアウト・・・リスト型

関連記事のレイアウト

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

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

ため

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

SNSシェアボタンの設定

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

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

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

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

ため

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

チェックを入れる項目
  • 記事上部に表示する
  • 記事下部に表示する
  • 画面端に固定表示する

表示するボタンの種類

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

表示するボタンの種類
  • Facebook
  • Twitter
  • はてブ
  • Pocket
  • Pinterest
  • LINE

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

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

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

ため

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

URLコピーボタン

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

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

上記3種類があります。

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

ため

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

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

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

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

ため

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

エディタ設定
  • カラーセットの設定
  • ボーダーセットの設定
  • マーカーの設定
  • ボタンの設定
  • アイコンボックスの設定
  • 吹き出しの設定
  • ブログカート・引用の設定

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

カラーセットの設定

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

カラーセットでやること
  • カラーパレット設定
  • リスト設定
  • キャプションブロック設定
  • Q&A設定

カラーパレット設定

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

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

ため

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

リスト設定

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

個人的におすすめなのは

  • チェック・・・青
  • 塗り番号・・・青
  • マル・・・緑
  • バツ・・・赤

です。

ため

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

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

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

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

Q&A設定

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

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

ため

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

ボーダーセットの設定

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

当ブログの設定

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

  1. ボーダーの種類
    • ボーダーセット01:sold
    • ボーダーセット02:dashed
    • ボーダーセット03:dashed
    • ボーダーセット04:sold
  2. ボーダーの太さ
    • ボーダーセット01:1px
    • ボーダーセット02:1px
    • ボーダーセット03:1px
    • ボーダーセット04:1px
  3. ボーダーカラー
    • ボーダーセット01:メインカラー
    • ボーダーセット02:メインカラー
    • ボーダーセット03:グレー
    • ボーダーセット04:グレー

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

ため

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

マーカーの設定

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

ため

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

マーカースタイルの種類

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

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

ため

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

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

ボタン設定

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

ため

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

当ブログの設定

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

    • 濃い:#ff3358
    • 薄い:#ff99ac
    • 濃い:#33aaff
    • 薄い:#99d5ff
    • 濃い:#00c2ab
    • 薄い:#66ffa6
  • ボタンのグラデーションをオンにする・・・チェック
  • ボタンの丸み・・・少し丸める
ため

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

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

アイコンボックスの設定

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

具体的には

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

ですね。

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

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

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

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

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

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

ため

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

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

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

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

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

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

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

ため

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

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

吹き出しの設定

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

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

色が分からない場合

と良いですよ。

ため

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

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

最後は、

  • ブログカート
  • 引用

の設定をします。

ブログカート

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

  • ブログカート(内部)
  • ブログカート(外部)

のデザインを選びます。

ブログカート(内部)のデザイン

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

ブログカート(外部)

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

ため

僕は


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


にしています。

引用

次は、引用です。

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

から選びます。

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

ため

これで完了です!

お疲れさまでした!!

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

悩む人

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

ため

下記4つです。

SWELLの初期設定が終わった後にすること
  • Font Awesomeの設定
  • SWELLの高速化設定をする
  • アフィリエイトプログラムに登録する
  • SWELLのトップページをカスタマイズする

Font Awesomeの設定

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

ため

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

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

設定手順

設定手順です。

STEP
「ダッシュボード」⇒「SWELL設定」⇒「SWELL設定」
STEP
「 Font Awesome 」をクリック
STEP
「CSSで読み込む」⇒「変更を保存」
ため

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

SWELLの高速化設定をする

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

ため

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

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

関連記事

アフィリエイトプログラムに登録する

SWELLにはアフィリエイトプログラムがあります。

ため

登録すると、SNSやLineでもアフィリエイトが可能に。

なので、登録しちゃいましょう。

関連記事

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

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

ため

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

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

2021年6月のアナリティクスデータ。ページセッションが3,47あることで、アクセスの3倍のPVがあった

関連記事

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

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

ため

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

では、一息ついたら

  • SWELLの高速化設定
  • アフィリエイトプログラムの登録
  • SWELLのトップページをカスタマイズ

をしましょう。

ため

というのも、先にやっておくと後がラクだからです。

関連記事

今回は以上です。

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

この記事が少しでも役に立ったらシェアしてください!
URLをコピーする
URLをコピーしました!

コメント

コメント一覧 (2件)

WordPressテーマSWELLの「独自の特徴」とは?【9ヵ月使う僕が徹底解説】 へ返信する コメントをキャンセル

目次
閉じる