MENU

当ブログ愛用のWordPressテーマ

広告

\乗り換え先おすすめテーマ!/

/ブロガーとして本格的に取り組む\

✓優秀なデザイン性 ✓最新のSEO ✓サイト高速化に対応|CocoonからSWELLに乗り換えた私の感想と口コミを見る >>

SWELLを使ってみた私の感想と口コミを見る >>

クリック

タップ

【全23項目】SWELLの初期設定|これさえやっておけば間違いなし!

「SWELL導入後に何を設定すればいいの?」

「他テーマからSWELLへ移行後にすべき設定は?」

「サイトデザインの設定をしたい…」

この記事ではそんな方に向けて、SWELLでやっておくべき初期設定を解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • SWELL導入後にやっておきたい初期設定が分かる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、今では記事の作成に集中できています。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください!

SWELLの購入&導入方法

SWELLの購入や会員登録、WordPressへのインストールがまだの人は、以下の記事から読んでください。

目次

SWELLの初期設定14つ

SWELL導入後、初めにやったほうがいい設定14つをまとめました。

それぞれ詳しく解説します。

パーマリンクの設定

記事を1ページ以上公開している人や他テーマからSWELLへ移行した人は、本設定を飛ばしてください。

WordPressでサイトを作成するとき、初めにやっておくべきことはパーマリンクの設定です。

パーマリンクとは…Webサイトにあるページ毎に設定しているURLのこと

ドメインやURLという言葉と混同してしまいますが、本記事のURLを例に違いを説明します。

URL

https://www.kamecompass.com/swell-initial-setting/

ドメイン

www.kamecompass.com

パーマリンク

swell-initial-setting

かめコンパス

パーマリンクはURLの一部だよ

途中でパーマリンクを変更するとSEOに悪影響を与えるので、初めに設定しておきましょう。

設定方法は以下のとおりです。

STEP

WordPress管理画面で、設定パーマリンクの順にクリックする

SWELLでパーマリンクを設定する手順-1
STEP

「パーマリンク構造」で以下6つの項目からパーマリンク構造を選びます。

  • 基本 
  • 日付と投稿名 
  • 月と投稿名 
  • 数字ベース 
  • 投稿名 
  • カスタム構造
SWELLでパーマリンクを設定する手順-2

URLから記事の内容が分かるようにしたいので、「投稿名」がおすすめです。

STEP

変更を保存をクリックします。

SWELLでパーマリンクを設定する手順-3

これでパーマリンク構造を設定できます。

PR表記の設定

2023年10月1日にステマ規制が施行され、アフィリエイト広告を掲載するページでは、広告を掲載していることをユーザーに分かるようPR表記が必要になりました。

ステマ規制(景品表示法)とは…ユーザーに広告であることを隠して商品やサービスを宣伝することを規制する法律のこと

SWELLにはPR表記の自動挿入機能があり、かんたんにステマ規制対策できます。

PR表記の例
SWELLのPR表記のスタイル「小」
PR表記(小)
SWELLのPR表記のスタイル「大」
PR表記(大)

PR表記の設定方法は以下のとおりです。

STEP

WordPress管理画面で、外観カスタマイズの順にクリックする

SWELLでPR表記を設定する手順-1
STEP

投稿・固定ページをクリックする

SWELLでPR表記を設定する手順-2
STEP

PR表記をクリックする

SWELLでPR表記を設定する手順-3
STEP

表示されたページでPR表記を設定する

SWELLでPR表記を設定する手順-4
STEP

公開をクリックする

SWELLでPR表記を設定する手順-5

これでPR表記を設定できます。

かめコンパス

後回しにして違反にならないよう、初めに行うべき設定だよ

PR表記の表記例やページごとに設定する方法は以下の記事にまとめています。

プラグインの導入と整理

SWELLでは多くの機能が標準搭載されていますが、プラグインを導入することで搭載されていない必要な機能を追加することができます。

プラグインとは…WordPressの機能を追加するツール

ただ、導入するプラグインが多すぎると、

  • サイトの表示速度が悪化
  • セキュリティの脆弱性が発生
  • 機能が重なることで不具合が出る

といった悪影響を及ぼします。

ですので、プラグインを必要最低限の導入にとどめ、不要なプラグインは削除しましょう。

かめコンパス

私はプラグイン数を1桁に抑えているよ

推奨・非推奨のプラグインについてSWELL公式サイトでも紹介されてますが、本記事でもかんたんにまとめました。

推奨な機能プラグインの例
SEOSEO SIMPLE PACK
セキュリティ対策Wordfence Security
お問い合わせフォームの設置Contact Form 7
検索エンジン向けサイトマップの作成XML Sitemap & Google News
バックアップBackWPup
非推奨な機能プラグインの例
サイト高速化Autoptimize
目次生成Table of Contents Plus
画像遅延読み込みLazy Load
キャッシュ系WP Super Cache
W3 Total Cache
画像軽量化EWWW Image Optimizer

公式推奨プラグインと非推奨・不要・注意すべきプラグインについて

プラグインを導入・削除する方法は以下のとおりです。

STEP

プラグイン新規プラグインを追加の順にクリックする

SWELLでプラグインを導入する手順-1
STEP

検索窓に導入したいプラグイン名を入力する

SWELLでプラグインを導入する手順-2
STEP

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

SWELLでプラグインを導入する手順-3
STEP

有効化をクリックする

SWELLでプラグインを導入する手順-4

これでプラグインを導入できます。

以下の記事では、当ブログでも導入しているプラグインや不要なプラグインを具体的に紹介していますので、あわせてご覧ください。

サイト高速化の設定

SWELLでは、独自のサイト高速化機能が搭載されています。

サイト高速化の設定をしないとページの表示速度をが遅くなり、以下のようなデメリットが生じます。

  • ユーザーにストレスを与えてしまう
  • ページの途中で離脱される
  • SEO評価が悪くなる

ですので、初めのうちに設定しましょう。

かめコンパス

表示スピードの速さがSWELLの特徴なので、設定するに越したことはないね

サイト高速化を設定する方法は下記のとおりです。

STEP

SWELL設定SWELL設定の順にクリックする

SWELLでサイト高速化を設定する手順-1
STEP

高速化タブ内でサイト高速化の設定をする

SWELLでサイト高速化を設定する手順-2
サイト高速化でおすすめな設定
  • キャッシュ機能…すべての項目にチェックする
  • ファイルの読み込み…「SWELLのCSSをインラインで読み込む」と「コンテンツに合わせて必要なCSSだけを読み込む」にチェックする
  • 遅延読み込み機能
    • コンテンツの遅延読み込み…すべての項目にチェックする
    • 画像等のLazyload…「スクリプト(lazysizes.js)を使って遅延読み込みさせる」を選択する
    • スクリプトの遅延読み込み…「スクリプトを遅延読み込みさせる」をONにする
  • ページ遷移高速化
    • 高速化の種類…「使用しない」を選択する
STEP

変更を保存をクリックする

SWELLでサイト高速化を設定する手順-3

これでサイト高速化を設定できます。

ふきだしの作成

SWELLでは以下のようなセリフを言うアイコン=ふきだしを設定できます。

かめコンパス

私がふきだしだよ

ふきだしを使えば以下のようなメリットがありますので、必ず設定しましょう。

  • 自分の意見や感情を伝えられる
  • オリジナルな記事に仕上がる
  • 記事がおしゃれに仕上がる
かめコンパス

テキストばかりの記事だと読みづらさがあるよね

ふきだしを設定する方法は下記のとおりです。

STEP

WordPress管理画面で、ふきだし新規ふきだし追加をクリックする

SWELLでふきだしを設定する手順-1
STEP

表示されたページで以下8つの項目を設定し、登録をクリックする

  • アイコン画像 
  • ふきだしの名前 
  • アイコンの丸枠 
  • ふきだしの形 
  • ふきだしの向き 
  • ふきだしの線 
  • ふきだしの色 
  • テイストとアイコンの並び
SWELLでふきだしを設定する手順-2
STEP

これでふきだしの設定完了です。

SWELLでふきだしを設定する手順-3

ふきだしの主な活用例や推奨のアイコンサイズについては以下の記事でまとめています。

ファビコンの設定

ファビコンとは…Webサイトのアイコンのこと

ファビコンを設定すると以下の4カ所に表示され、自サイトに認知度や信頼性を高めることができますよ。

検索結果のページタイトルに表示されるファビコン
検索結果のページタイトル
Webブラウザのタブに表示されるファビコン
Webブラウザのタブ
ブックマークしたページタイトルに表示されるファビコン
ブックマークしたページタイトル
スマホにショートカットを作成したアイコンに表示されるファビコン
スマホにショートカットを作成したアイコン
かめコンパス

自分のブログだという実感も湧くね

SWELLでファビコンを設定する方法は以下のとおりです。

STEP

WordPress管理画面で、外観カスタマイズの順にクリックする

SWELLでファビコンを設定する手順-1
STEP

WordPress設定をクリックする

SWELLでファビコンを設定する手順-2
STEP

サイト基本情報をクリックする

SWELLでファビコンを設定する手順-3
STEP

「サイトアイコンを選択」をクリックしてファビコンに設定したい画像をアップロードする

SWELLでファビコンを設定する手順-4
STEP

公開をクリックする

SWELLでファビコンを設定する手順-5

これでファビコンを設定できます。

ファビコンに設定する画像を用意する方法や画像の推奨サイズについては、以下の記事でまとめています。

プロフィールの設定

SWELLでは、以下4つの場所でプロフィールを設定することができます。

当ブログに設置しているプロフィールウィジェット
プロフィールウィジェット
当ブログに設置している「この記事を書いた人」
この記事を書いた人
当ブログに設置しているプロフィール用ウィジェット
プロフィール用ブログパーツ

プロフィールを書くことで以下のようなメリットが得られるので、初めに設定しましょう。

  • 安心感(=悪質サイトではないか)
  • 親近感(=趣味が同じ、年齢が近いなど)
  • 信頼感(=間違った情報が書かれてないか、実績があるかなど)

上記で紹介したプロフィールは、場所によって設定方法が異なります。

以下の記事ではプロフィールの設定方法のほかに、おすすめな設置場所を解説していますので参考にしてください。

プライバシーポリシーの設定

プライバシーポリシーは、ユーザーの個人情報の利用目的や管理方法、またブログ運営者が負う責任の範囲などをまとめたものです。

プライバシーポリシーがないとユーザーとトラブルがあった場合に回避できなくなるので、必ず初めに作りましょう。

>>当ブログのプライバシーポリシーを見る

かめコンパス

プライバシーポリシーは基本コピペがおすすめ!

プライバシーポリシーの作り方や書いたほうがいい内容は以下の記事でまとめています。(雛形あり!コピペOKです)

お問い合わせフォームの設定

お問い合わせフォームは、個人や企業、広告主と連絡をとれる場所です。

お問い合わせフォームがあれば、

  • 著作権違反を指摘してもらえる
  • 記事内容の誤りを教えてくれる
  • 企業から仕事の依頼がもらえる

などのメリットがあります。

反対に、お問い合わせフォームがないと著作権違反や記事内容の誤りに気づかず、損害賠償請求されたり、ブログを閉鎖しなければならないことが最悪起こります。

また、あなたに仕事の依頼をしたいがコンタクトを取れず、ビジネスチャンスを逃してしまうといったデメリットもあります。

かめコンパス

連絡が取れないブログだと不安にもなるね

ですので、ブログを開設したら初めに設定しましょう。

お問い合わせフォームの作り方について、詳しくは下の記事を参考にしてください。

Googleサーチコンソールの設定

Googleサーチコンソールとは…Google検索結果でWebサイトの掲載順位を調べることができる無料ツール

Googleサーチコンソールでは以下のようなことができます。

  • Webページがどんな単語で検索され、掲載順位はどれくらいか分かる(=記事をリライトすべきか)
  • Webページごとでクリック数や表示回数が分かる(=クリック率を改善すべきか)
  • Webページを検索エンジンに登録リクエストする(=インデックス登録)
  • Webページの表示速度が分かる(=表示速度を改善すべきか)
  • 自サイトが他サイトにリンクされているか分かる(=被リンク数の確認)
かめコンパス

SEOの観点でページの分析や改善ができるよ

SWELLでGoogleサーチコンソールを設定するには、Googleサーチコンソールに登録済みか未登録かで異なりますので、詳しくは下の記事を参考にしてください。

Googleアナリティクスの設定

Googleアナリティクスとは…Webサイトにアクセスしたユーザーの属性や行動を分析できる無料ツール

Googleアナリティクスでは以下のようなことができます。

  • Webページに訪れたユーザー数や滞在時間はどれくらいか分かる(=記事をリライトすべきか)
  • どの媒体からユーザーが訪れたか分かる(=流入経路ごとの改善)
  • 過去30分以内の訪問者数やページの表示回数が分かる(=時間帯別でPV数の確認)
  • Webページに訪れたユーザーの性別や年齢が分かる(=訪問者の属性を知る)
かめコンパス

Googleサーチコンソールと同様、SEOの観点でページの分析や改善ができるよ

SWELLでGoogleアナリティクスを設定するのも同じく、Googleアナリティクスに登録済みか未登録かで異なりますので、詳しくは下の記事を参考にしてください。

Googleアドセンスの設定

Googleアドセンスとは…WebサイトにGoogleが提供している広告を掲載し、収益を得るためのサービスのこと

自身のサイトで広告収益を得るためにGoogleアドセンス審査を受ける必要がありますが、SWELLでGoogleアドセンスの設定方法はアドセンス審査に合格前と合格後で異なります。

以下の記事では、Googleアドセンスの設定方法やアドセンス広告のおすすめな設置場所を解説していますのでご覧ください。

Googleアドセンス審査に合格していない方はこちら

SNSリンク設定

SWELLではサイト内に表示されるSNSアイコンリストのリンク先を設定することができます。

以下の画像は、当ブログのページ下部に表示されている𝕏(旧Twitter)フォローボタンで、このリンク先を設定できます。

当ブログのページ下部に表示されている𝕏(旧Twitter)フォローボタンの表示例
かめコンパス

SNSをやっている方はサイトからの流入でフォローしてもらえるかも…

SNSリンクを設定する方法は下記のとおりです。

STEP

WordPress管理画面で、外観カスタマイズの順にクリックする

SWELLでSNSリンクを設定する手順-1
STEP

SNS情報をクリックする

SWELLでSNSリンクを設定する手順-2
STEP

「SNSリンク設定」でSNSのURLを貼り付ける

SWELLでSNSリンクを設定する手順-3
STEP

公開をクリックする

SWELLでSNSリンクを設定する手順-4

これでSNSリンクを設定できます。

かめコンパス

私「かめコンパス」の𝕏(旧Twitter)もフォローしてもらえると嬉しいです!

OGP設定

OGP設定は、プラグイン「SEO SIMPLE PACK」で行います。

OGPとは…WebページのURLが𝕏(旧Twitter)やFacebookなどのSNSに投稿されたときに、ページタイトルやアイキャッチ画像などの情報を表示させるための仕組み

OGP設定をすれば、テキスト情報だけではなく画像で情報を伝えることができるので、以下のようなメリットがあります。

  • 視認性がアップする
  • ユーザーが興味を持ちやすくなる
  • クリック率が上がる
かめコンパス

検索エンジンからではなく、SNSを通じて自サイトを見てくれたら嬉しいよね

SWELLでOGP設定を行う方法は、下の記事を参考にしてください。

SWELLサイト全体のデザイン設定6つ

SWELLでは以下6つの項目に分けてサイト全体のデザインを設定できます。

サイト全体のデザイン設定6つ

それぞれ詳しく解説します。

上記の項目によっては説明が長くなりそうなので、別記事でまとめています。

デモサイト着せ替えデータの利用

SWELLには無料で使えるデモサイト着せ替えデータが以下の6種類あります。

SWELLのデモサイト着せ替えデータ01

画像引用:SWELL DEMO 01

SWELLのデモサイト着せ替えデータ02

画像引用:SWELL DEMO 02

SWELLのデモサイト着せ替えデータ03

画像引用:SWELL DEMO 03

SWELLのデモサイト着せ替えデータ04

画像引用:SWELL DEMO 04

SWELLのデモサイト着せ替えデータ05

画像引用:SWELL DEMO 05

SWELLのデモサイト着せ替えデータ06

画像引用:SWELL DEMO 06

デザイン設計が苦手な方でも、おしゃれなサイトを作成することができますよ。

以下の記事では、これらデモサイト着せ替えデータの利用方法や着せ替え後にやるべき修正点などをまとめています。

また、中級者~上級者向けではありますが、ご自身で一から作成してトップページをサイト型にすることもできますよ。

before / ブログ型

当ブログのブログ型トップページの例-1
当ブログのブログ型トップページの例-2
当ブログのブログ型トップページの例-3
当ブログのブログ型トップページの例-4

after / サイト型

当ブログのサイト型トップページの例-1
当ブログのサイト型トップページの例-2
当ブログのサイト型トップページの例-3
当ブログのサイト型トップページの例-4

>>当ブログのサイト型トップページを見る

サイト型トップページの作成方法について、詳しくは下の記事を参考にしてください。

メインカラーの設定

SWELLではメインカラーを設定でき、見出しやボタン、その他デザイン装飾などサイトで重要となるポイントで利用される色を決めれます。

メインカラーの設定方法は下記のとおりです。

STEP

WordPress管理画面で、外観カスタマイズの順にクリックする

SWELLでメインカラーを設定する手順-1
STEP

サイト全体設定をクリックする

SWELLでメインカラーを設定する手順-2
STEP

基本カラーをクリックする

SWELLでメインカラーを設定する手順-3
STEP

「メインカラー」で色を指定する

SWELLでメインカラーを設定する手順-4
STEP

公開をクリックする

SWELLでメインカラーを設定する手順-5

これでメインカラーを設定できます。

ヘッダーの設定

ヘッダーとは…サイト上部の場所のこと

当ブログのヘッダー

SWELLでヘッダーを設定する方法について、詳しくは下の記事を参考にしてください。

グローバルナビ(ヘッダーメニュー)の設定

グローバルナビ(ヘッダーメニュー)とは…ヘッダーに表示されるページリンクをまとめたメニューのこと

当ブログのグローバルナビ(ヘッダーメニュー)

SWELLでグローバルナビ(ヘッダーメニュー)を設定する方法について、詳しくは下の記事を参考にしてください。

フッターの設定

フッターとは…サイト下部の場所のこと

当ブログのフッター

SWELLでフッターを設定する方法について、詳しくは下の記事を参考にしてください。

サイドバーの設定

当ブログのサイドバー

SWELLでサイドバーを設定する方法について、詳しくは下の記事を参考にしてください。

※準備中

SWELLページ内のデザイン設定3つ

SWELLではページ内のデザインを設定でき、本記事では以下の3項目に絞って解説します。

ページ内のデザイン設定3つ
  1. 目次の設定
  2. 見出しの設定
  3. ページタイトル付近に表示する情報設定

※上のリンクをクリックすると見たい場所へジャンプします。

目次の設定

SWELLでは目次のデザインを以下の4種類から選べます。

SWELLの目次デザイン「シンプル」の表示例
SWELLの目次デザイン「ボックス」の表示例
SWELLの目次デザイン「上下ボーダー」の表示例
SWELLの目次デザイン「ストライプ背景」の表示例

目次デザインの設定方法は以下のとおりです。

STEP

WordPress管理画面で、外観カスタマイズの順にクリックする

SWELLで目次のデザインを設定する手順-1
STEP

投稿・固定ページをクリックする

SWELLで目次のデザインを設定する手順-2
STEP

目次をクリックする

SWELLで目次のデザインを設定する手順-3
STEP

「目次のデザイン」で利用したい目次のデザインを選ぶ

  • シンプル 
  • ボックス 
  • 上下ボーダー 
  • ストライプ背景
SWELLで目次のデザインを設定する手順-4
STEP

公開をクリックする

SWELLで目次のデザインを設定する手順-5

これで目次のデザインを設定できます。

また、目次に表示させたい見出しの階層や目次リストの色も設定することもでき、詳しくは下の記事を参考にしてください。

見出しの設定

SWELLではH2~H4見出しのデザインを設定でき、自分好みのデザインを自由に選ぶことができます。

H○見出しとは…見出しの階層を表したもの。H1~H6まであり、数字が小さいほど階層の高い見出しになる。

SWELLのH2見出しのデザイン一覧
H2見出しのデザイン一覧
SWELLのH3見出しのデザイン一覧
H3見出しのデザイン一覧
SWELLのH4見出しのデザイン一覧
H3見出しのデザイン一覧
SWELLのセクション用H2見出しのデザイン一覧
セクション用H2見出しのデザイン一覧

見出しデザインの設定方法は以下のとおりです。

STEP

WordPress管理画面で、外観カスタマイズの順にクリックする

SWELLの見出しデザインを設定する手順-1
STEP

投稿・固定ページをクリックする

SWELLの見出しデザインを設定する手順-2
STEP

コンテンツのデザインをクリックする

SWELLの見出しデザインを設定する手順-3
STEP

「見出し○のデザイン」で設定する ※〇は2~4

SWELLの見出しデザインを設定する手順-4

「セクション用見出し2のデザイン」もあわせて設定できます。

SWELLの見出しデザインを設定する手順-5
STEP

公開をクリックする

SWELLの見出しデザインを設定する手順-6

これで見出しのデザインを設定できます。

以下の記事では、見出しに画像やアイコンを挿入する方法も解説していますので、気になる方はあわせてご覧ください。

ページタイトル付近に表示する情報設定

SWELLではページタイトル付近に表示する以下のような情報を設定できます。

ページタイトル付近に複数の情報が表示されている様子

カテゴリーページとタグページに飛ぶリンクも設定できるので、回遊率も上がりそうですよ。

設定方法は以下のとおりです。

STEP

WordPress管理画面で、外観カスタマイズの順にクリックする

SWELLでページタイトル付近に表示する情報を設定する手順-1
STEP

投稿・固定ページをクリックする

SWELLでページタイトル付近に表示する情報を設定する手順-2
STEP

タイトルをクリックする

SWELLでページタイトル付近に表示する情報を設定する手順-3
STEP

以下の項目で設定する

  • タイトルの表示位置「コンテンツ上」or「コンテンツ内」 
  • タイトル横に日付を表示する(PC・SP) 
  • タイトル下にカテゴリーを表示する 
  • タイトル下にタグを表示する 
  • カスタム投稿タイプの時、タクソノミーを表示する 
  • タイトル下に公開日を表示する 
  • タイトル下に更新日を表示する 
  • タイトル下に著者を表示する

青色の文字は設定推奨

SWELLでページタイトル付近に表示する情報を設定する手順-4
STEP

公開をクリックする

SWELLでページタイトル付近に表示する情報を設定する手順-5

これでページタイトル付近に表示する情報を設定できます。

まとめ:SWELLの初期設定をサクッと済ませて記事作成に集中しよう

今回は、SWELLでやっておくべき初期設定を紹介しました。

本記事のおさらい

SWELL公式サイトにも各種設定マニュアルがありますので、あわせてご確認ください。

公式SWELLの設定マニュアル

SWELLの初期設定を終えたら、アフィリエイト広告を貼って収益化を目指しましょう。

\おすすめのASP一覧/

スクロールできます
ASP
特徴アフィリエイト満足度13年連続No.1!広告主数は25,000社以上と日本最大級!女性ジャンルに強い!消費税分を上乗せして支払い!振込手数料が無料!『W報酬制度』で報酬が12%アップ!初心者ブロガー向けにノウハウ配信!Yahoo!ショッピング、Amazon、楽天など大手広告主も参加!報酬単価が高い!金融、保険、Eコマース、求人、エンタメ、サービスに強い!振込手数料が無料!金融系ジャンルに強い!報酬単価が高い!
公式サイト

/だれでも会員登録無料!

当ブログではSWELLに関する記事をいくつか書いてます。

下のページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“Twitterフォロー”や“ブックマーク”してくれると嬉しいです!

・   ・   ・

SWELLの関連記事まとめ

SWELLの初期設定の記事

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次