MENU
やぬさんぼんちゃん
14歳差夫婦ブロガー
「書こう 未来のために」をコンセプトに、家族の時間を増やしたい方へブログノウハウを発信中。目標は1億円稼ぐこと(大真面目)。

SWELLの初期設定7つを解説!購入後にやるべきことがすべてわかる

本記事では、このような悩みを解決できます。

ぼんちゃん

読みたい内容にジャンプしましょう

この記事の信頼性

面倒な初期設定をサクッと済ませて、早く記事を書きたいですよね。

そこで今回は、SWELLの初期設定についてわかりやすく解説していきます。

必要な初期設定をマスターして、SWELLの良さをいち早く体感しましょう!

もくじ

SWELL購入後に必要な7つの初期設定

SWELL(スウェル)を購入したら、以下7つの初期設定を行いましょう。

ぼんちゃん

すぐに終わるものではないので、少しずつ進めていくのがおすすめです!

SWELLの初期設定①ユーザー認証

SWELL(スウェル)を購入したら、ユーザー認証を済ませておく必要があります。

ユーザー認証をしないと、テーマをアップデートできないので最新機能が使えません。

SWELLのユーザー認証は、次の手順で行いましょう。

STEP
WordPress管理画面の「SWELLのユーザー認証」を選択
SWELLのユーザー認証

WordPress管理画面に「警告文」として表示されています。

STEP
メールアドレスを入力
SWELLのユーザー認証

SWELL会員サイトで登録したメールアドレスを入力しましょう。

SWELL会員サイトの登録が済んでいない場合は、以下の手順で登録してください。

STEP
SWELL公式サイトの「フォーラム」をクリック
STEP
「会員登録はこちらから」をクリック
STEP
必要事項を入力
会員登録ページ
出典:SWELL公式サイト

【メールアドレスについて】

  • SWELLを公式サイトで購入した場合、購入時に登録したメールアドレスを入力する
  • SWELLをエックスサーバーで購入した場合、エックスサーバーのアカウントで登録しているメールアドレスを入力する
STEP
「利用規約に同意します」にチェック
STEP
「登録する」をクリック
STEP
会員登録完了
STEP
メールが届く

【SWELLERS’】ユーザー登録完了

STEP
「認証リクエストを送信」をクリック
STEP
届いたメールのユーザー認証用URLにアクセス

URLへのアクセスは3分以内に行ってください。

STEP
認証完了後、「アクティベートを完了」をクリック
アクティベートの完了
STEP
「認証完了」を表示される
SWELLのユーザー認証完了

SWELLの初期設定②アフィリエイトの申請

SWELL(スウェル)を購入後、公式サイトからSWELLのアフィリエイトを申請できます。

アフィリエイトは、SWELLユーザーしか利用できません。

SWELLを購入したら、SWELL会員サイトのマイページから申請しておきましょう。

SWELLのアフィリエイト申請
出典:SWELL公式サイト

SWELLの初期設定③プラグインの最適化

SWELL(スウェル)を購入したら、必要なプラグインだけを追加して最適化を図りましょう。

ぼんちゃん

プラグインとは、以下のとおりです

プラグインとは
  • WordPressにおける拡張機能のこと
  • WordPressにプラグインを導入することで、機能の追加や使い勝手などを向上できる
  • 表示速度の改善やスパム対策など、6万近くの無料プラグインがある(2023年1月現在)
  • プラグインを導入し過ぎると、サイトに不具合が生じる恐れがある

ちなみに、SWELL公式では以下のプラグインが推奨されています。

推奨プラグイン概要
SEO SIMLE PACKSEOプラグイン
WP Multibyte Patch文字化けを防止
XML Sitemap & Google Newsサイトマップを作成
WP Revisions Controlリビジョンデータを制限
BackWPupバックアップできる

一方、SWELL公式では以下のような推奨されていないプラグインもあります。

非推奨プラグイン概要
Gutenbergブロックエディター機能をテストできる
WooCommerceECサイトを作れる
Flying ScriptsJSを遅延読み込みする
LazyLoad画像遅延読み込みプラグイン
WP Super Cacheキャッシュ系プラグイン

上記以外の「推奨プラグイン」と「非推奨プラグイン」を知りたい場合は、SWELL公式サイトをチェックしましょう。

SWELLの初期設定④エディター設定

エディター設定では、記事装飾に関するカスタマイズを設定できます。

SWELLのエディター設定

エディター設定はWordPress管理画面「SWELL設定」→「エディター設定」で行います。

設定できる項目は、以下の8つです。

各設定を変更したら、ページ下部の「変更を保存」をクリックしてください。

カラーセット

カラーパレット設定

カラーセットは「SWELL設定」→「エディター設定」→「カラーセット」で設定します。

カラーセットで、次の5つを設定します。

カラーパレット設定

カラーパレット設定

カラーパレット設定では、記事編集画面にあるカラーパレットの色を変更できます。

カラーパレットの例
ぼんちゃん

カラーパレットからテキスト色や背景色を変更できますよ

リスト設定

リスト設定

リスト設定では、リストブロックで使えるパーツの色を変更できます。

リストブロックの例
ぼんちゃん

リストブロックはよく使うパーツなので、設定しておきましょう

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

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

キャプションブロック設定では、キャプションボックスのカラーを設定できます。

キャプションボックスの例
ぼんちゃん

設定しておけば、よく使うカラーを簡単に呼び出せます!

Q&A設定

Q&A設定

Q&A設定では、FAQブロックのカラーを変更できます。

FAQブロックの例

テーブル設定

テーブル設定

テーブル設定では、テーブル(表)に挿入できるアイコンカラーを設定できます。

ぼんちゃん

以下のように、テーブルにアイコン(記号)を挿入できます

アイコンの例

アイコンの挿入は、ツールバーの「セル背景」から背景アイコンやサイズを設定するだけです。

アイコン設定の手順
ぼんちゃん

この機能を使えば、簡単におしゃれな表を作れますね!

ボーダーセット

ボーダーセット設定

ボーダーセットは「SWELL設定」→「エディター設定」→「ボーダーセット」で設定できます。

ボーダーセットでは、ボックスのカラーとスタイルを4つまで登録できます。

ボーダーセットの登録

登録したボックスは、以下のように記事編集画面で簡単に呼び出せます。

ボックスの例

マーカー

マーカー設定

マーカーは「SWELL設定」→「エディター設定」→「マーカー」で設定できます。

マーカーでは、記事装飾に使用するマーカー色とスタイルを変更できます。

マーカー設定

設定しておけば、以下のようにツールバーから簡単に呼び出すことができます。

マーカーの例
ぼんちゃん

4パターンまで設定できますよ

ボタン

ボタン設定

ボタンは「SWELL設定」→「エディター設定」→「ボタン」で設定します。

ボタンでは、SWELLボタンのカラーとスタイルを変更できます。

SWELLボタンの設定

設定することで、以下のように記事編集画面から簡単に呼び出せます。

ぼんちゃん

3色まで設定できます

アイコンボックス

アイコンボックス

アイコンボックスは「SWELL設定」→「エディター設定」→「アイコンボックス」で設定します。

アイコンボックスでは、アイコン付きボックスのカラーとスタイルを変更できます。

アイコンボックス(小)
アイコンボックス(大)

設定したボックスは、下記のように記事編集画面から簡単に呼び出せます。

アイコンボックスの例
ぼんちゃん

よく使うボックスだけ設定しておきましょう

ふきだし

ふきだし

ふきだしは「SWELL設定」→「エディター設定」→「ふきだし」で設定できます。

ふきだしでは、ふきだしのカラーを設定できます。

ふきだしカラー

下記のように、設定したふきだしカラーは記事編集画面に反映されます。

ふきだしの例

ふきだしのアイコン画像やスタイルを登録すれば、もっと簡単にふきだしを呼び出せます。

ふきだしのアイコン画像やスタイルの登録は、以下の手順で行います。

STEP
WordPressの「ふきだし」を選択
吹き出し設定
STEP
必要事項を入力
ふきだしセットの登録
ふきだしセットのタイトル

管理用タイトル

アイコン画像

吹き出しのアイコン

アイコン名

吹き出しの下に表示される名前

各種設定

吹き出しの形状や向き、色

STEP
「登録」をクリック
ふきだしセットの登録
STEP
記事編集画面で「ふきだし」を選ぶ
ふきだしの挿入方法
STEP
登録した「ふきだしセット」から選ぶ
ふきだしセットの選択
STEP
ふきだしの挿入完了

カスタム書式

カスタム書式

カスタム書式は「SWELL設定」→「エディター設定」→「カスタム書式」で設定できます。

カスタム書式では、マーカーや太字などの装飾をショートカットで使えるように設定できます。

カスタム書式セット

設定できる項目は、以下の4つです。

  • 太字・斜体
  • 文字色
  • 背景色
  • マーカー

設定すれば、ツールバーのSWELLマークから「書式セット」を簡単に呼び出せます。

書式セットの例
ぼんちゃん

書式セットは2つまで登録できます

その他

エディター設定のその他

その他は「SWELL設定」→「エディター設定」→「その他」で設定できます。

その他では、以下の2つを設定します。

ブログカード

ブログカード

ブログカードのタイプを設定できます。

ブログカードは内部リンクや外部リンクを貼るときに活用します。

引用

引用

引用のスタイルを2つのタイプから設定できます。

ぼんちゃん

エディター設定は、これで完了です!

SWELLの初期設定⑤外観カスタマイズ

外観カスタマイズでは、サイト全体の「デザイン」に関するカスタマイズを設定できます。

外観カスタマイズ

外観カスタマイズは、WordPress管理画面「外観」→「カスタマイズ」で設定できます。

今回紹介する設定項目は、全部で8つです。

ここでは、最初に設定しておいたほうがいい項目だけに絞って解説していきます。

ぼんちゃん

その他に関しては、運営しながら少しずつ設定しましょう

各設定を変更したら、「公開」をクリックし忘れないように注意しましょう。

WordPress設定

WordPress設定

WordPress設定は「外観」→「カスタマイズ」→「WordPress設定」で設定できます。

WordPress設定では、以下2つを設定します。

サイト基本情報

サイト基本情報

サイト基本情報は「外観」→「カスタマイズ」→「WordPress設定」→「サイト基本情報」で設定できます。

サイト基本情報は、次の3つを設定しましょう。

サイトのタイトル

サイト名

キャッチフレーズ

サイトの簡単な説明

サイトアイコン

ブラウザのタブやブックマークバーに表示されるアイコン

ホームページ設定

ホームページ設定

ホームページ設定は「外観」→「カスタマイズ」→「WordPress設定」→「ホームページ設定」で設定できます。

ホームページ設定では、トップページの表示方法を設定できます。

ひとまず「最新の投稿」に設定しておきましょう。

「最新の投稿」に設定すれば、トップページに最新記事が一覧で表示されます。

ブログ運営に慣れてきたら、固定ページで作成したページをトップページに表示させるのがおすすめです。

ぼんちゃん

トップページのデザインにこだわるのは、SWELLに慣れてからにしましょう

サイト全体設定

サイト全体設定

サイト全体設定は「外観」→「カスタマイズ」→「サイト全体設定」で設定できます。

サイト全体設定は、以下の2つを設定します。

基本カラー

基本カラーの設定

基本カラーは「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」で設定できます。

基本カラーは、サイト全体に適用されるカラー設定になります。

メインカラー

見出しやボタンなどに適用される色

テキストカラー

サイト全体に適用される文字の色

リンクカラー

記事内のリンクの文字色

背景色

サイトの背景色

ぼんちゃん

見出しやボタンなど、カラー指定がない場合はメインカラーが適用されます

基本デザイン

基本デザインの設定

基本デザインは「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」で設定できます。

基本デザインは、サイト全体に適用されるデザイン設定となります。

ひとまず必要な設定は、以下にあげる3つです。

(1)サイト全体の見た目
サイト全体の見た目
全体の質感

標準(チェックなし)・フラット・丸みから選択

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

コンテンツ部分のみ背景を白にする場合はチェック

(2)フォント設定
フォント設定
ベースとなるフォント

サイト内の文字フォント

フォントサイズ

PC・タブレットとスマホの文字サイズ

字間

文字と文字の間のスペース

(3)コンテンツ幅の設定
コンテンツ幅の設定
サイト幅

サイトの幅

1カラム時の記事コンテンツ幅

記事のコンテンツ幅

ヘッダー

ヘッダーの設定

ヘッダーは「外観」→「カスタマイズ」→「ヘッダー」で設定できます。

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

(1)カラー設定
ヘッダーのカラー設定

以下のように、ヘッダー部分のカラーを設定できます。

ヘッダーのカラー設定の例
(2)ヘッダーロゴの設定
ヘッダーロゴの設定

ヘッダーロゴは、以下のように挿入できます。

ヘッダーロゴの挿入例
(3)ヘッダーバー設定
ヘッダーバー設定

ヘッダーバーとは、以下画像の赤枠部分のことです。

背景色と文字色のほか、SNSアイコンリストの表示について設定できます。

ヘッダーバーの例

フッター

フッターの設定

フッターは「外観」→「カスタマイズ」→「フッター」で設定できます。

フッターでは、下記の2つを設定しましょう。

(1)カラー設定

フッターのカラーを設定すると、以下のようにフッター部分の背景色と文字色が反映されます。

フッターのカラー設定の例
(2)コピーライト設定
コピーライト設定

コピーライトを設定すると、以下の赤枠部分を変更できます。

コピーライトの例

「ブログを開設した年号」と「サイト名」を入れましょう。

サイドバー

サイドバーの設定

サイドバーは「外観」→「カスタマイズ」→「サイドバー」で設定できます。

サイドバーでは、サイドバーの表示設定と位置をそれぞれ設定できます。

以下の画像は、サイドバーを右に表示したときの例です。

サイドバーの表示例

トップページ

トップページの設定

トップページは「外観」→「カスタマイズ」→「トップページ」で設定できます。

トップページでは、次の2つを設定していきます。

メインビジュアル

メインビジュアル設定

メインビジュアルは「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」で設定できます。

メインビジュアルとは、以下の赤枠で囲った大きなエリアのことです。

メインビジュアルの例

画像や動画を挿入できるので、インパクトのあるトップページを作れます。

メインビジュアルを表示する場合、以下の項目を設定してみましょう。

表示設定

画像・動画の高さ

各スライドの設定

画像を指定する場合

動画の設定

動画を指定する場合

ぼんちゃん

メインビジュアルの表示はお好みでOKです!

記事スライダー

記事スライダー設定

記事スライダーは「外観」→「カスタマイズ」→「トップページ」→「記事スライダー」で設定できます。

記事スライダーとは、以下の赤枠で囲った記事をスライドで表示するエリアのことです。

記事スライダーの例

記事スライダーを表示する場合、以下の項目を設定しましょう。

記事のピックアップ方法

表示させる記事や並び順

記事の表示設定

日付やタイトルなどの表示設定

スライド設定

記事の表示枚数や表示スピード

なお、メインビジュアルを表示する場合、記事スライダーはその下に表示されます。

投稿・固定ページ

投稿・固定ページの設定

投稿・固定ページは「外観」→「カスタマイズ」→「投稿・固定ページ」で設定できます。

投稿・固定ページでは、次の4つを設定しましょう。

コンテンツのデザイン

コンテンツのデザイン

コンテンツのデザインは「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」で設定できます。

コンテンツのデザインで、見出しのデザインを設定します。

見出しのキーカラー

見出しの色(基本カラーと別にする場合)

見出し2のデザイン

見出し2のスタイル

見出し3のデザイン

見出し3のスタイル

見出し4のデザイン

見出し4のスタイル

目次

目次の設定

目次は「外観」→「カスタマイズ」→「投稿・固定ページ」→「目次」で設定できます。

目次では、表示の有無やデザインを設定します。

目次を表示するかどうか

目次を表示する箇所にチェック

目次のタイトル

目次タイトルの変更

目次のデザイン

デザイン4種類から選択

目次のリストタグ

ドットか数字を選択

ドット•数字部分のカラー

ドット・数字のカラーを設定

どの階層の見出しを抽出するか

どの階層の見出しを表示するか(当サイトはh3)

見出し何個以上で表示するか

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

目次の省略表示

目次を省略したときの表示方法

項目が何個を超えると省略するか

省略するときの項目の個数

開くボタンのテキスト

開くボタンのテキストの変更(省略するとき)

閉じるボタンのテキスト

閉じるボタンのテキストの変更(省略するとき)

SNSシェアボタン

SNSシェアボタンの設定

目次は「外観」→「カスタマイズ」→「投稿・固定ページ」→「SNSシェアボタン」で設定できます。

SNSシェアボタンでは、以下のようなボタンを設定できます。

SNSシェアボタンの例

表示したい場所とボタンなど、お好みでカスタマイズしましょう。

記事下エリア

記事下エリアの設定

記事下エリアは「外観」→「カスタマイズ」→「投稿・固定ページ」→「記事下エリア」で設定できます。

記事下エリアでは、記事下部に「著者情報」を表示できるように設定できます。

著者情報の表示例

著者情報を表示したい場合は、「著者情報を表示」にチェックを入れましょう。

著者情報の内容は、WordPress管理画面「ユーザー」→「プロフィール」で編集できます。

編集する項目は、次の4つです。

  • ニックネーム
  • SNS情報
  • プロフィール情報(自己紹介文)
  • プロフィール画像

SNS情報

SNS情報の設定

SNS情報は「外観」→「カスタマイズ」→「SNS情報」で設定できます。

SNS情報で設定したURLは、SNSアイコンリストのリンク先として自動で反映されます。

ちなみに、SNSアイコンリストはヘッダーやフッターなどに表示できます。

ぼんちゃん

外観カスタマイズの設定は、これで完了です!

SWELLの初期設定⑥高速化設定

最後に、SWELL(スウェル)の「高速化設定」を行い、機能を最大限に活用しましょう。

SWELLの高速化設定

SWELLの高速化設定は「SWELL設定」→「高速化」で設定できます。

設定する項目は、全部で4つです。

設定したら、ページ下部の「変更を保存」をクリックし忘れないように注意しましょう。

キャッシュ機能

キャッシュ機能の設定

キャッシュ機能は、すべての項目にチェックを入れましょう。

キャッシュ機能によって、一度表示したページをデータベースに一時保存できます。

そして、次に同じページを表示するときは一時保存されたデータを参照するので、表示速度がすばやくなります。

ファイルの読み込み

ファイルの読み込み設定

「SWELLのCSSをインラインで読み込む」にチェックを入れましょう。

SWELLのCSSをファイルで読み込むのではなく、インライン出力することで高速化を期待できます。

遅延読み込み機能

遅延読み込み機能の設定

「コンテンツの遅延読み込み」は、どちらもチェックを入れましょう。

「画像等のLazyload」は、「スクリプト(lazysizes.js)を使って遅延読み込みさせる」にチェックを入れましょう。

遅延読み込み機能を有効にすると、最初の画面に表示されない画像や動画、フッターなどの読み込みを遅延させることが可能です。

読み込みを遅延させれば、ページを開くときの表示速度が速くなります。

ページ遷移高速化

ページ遷移高速化の設定

「Prefetch」にチェックを入れましょう。

上記の設定により、ページの遷移が高速化します。

「Pjaxによる遷移」は、次のページへ移動してもページが更新されないこともあり推奨されていません。

SWELLの初期設定⑦WordPresssの初期設定

WordPressの初期設定が終わっていない場合は、このタイミングで済ませておきましょう。

以下の項目は、必要な初期設定の一例です。

  • サイトタイトルの設定
  • SSLの設定
  • パーマリンクの設定
  • プラグインの設定
  • Googleアナリティクスの設定
  • Googleサーチコンソールの設定
ぼんちゃん

ブログを開設したら、すぐに済ませておきましょう

【まとめ】SWELLの初期設定を終えたらサイト運営の準備をしよう

今回は、SWELL(スウェル)の初期設定について解説しました。

ぼんちゃん

もう一度読みたい内容にジャンプしましょう

今回紹介した初期設定をマスターすれば、SWELLの基本的なデザインや機能に関する設定はバッチリです。

あとは目標設定やサイト設計など、サイト運営に必要な準備を万全にしましょう!

R o a d M a p

ブ ロ グ の ゴ ー ル を 意 識 し な が ら 読 も う

収益化までのロードマップ

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

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