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

SWELLの初期設定は全部で6つ!サイト高速化でSEO対策も完璧

SWELLを導入したら、はじめに何を設定すればいいの?

こんなふうに迷っていませんか?

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

SWELLで快適なブログ運営を行うには、初期設定が非常に重要となります!

そこで今回は、以下の内容をわかりやすく解説します。

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

ぼんちゃん

最初に設定するべき項目について、画像付きでわかりやすく解説します

この記事を書いた人

ぼんちゃん(妻)
  • 夫婦ブロガー / Webライター
  • 2021年1月副業にブログを開設し、2022年1月フリーに
  • 物事をコツコツやるのが得意
  • にほんブログ村 ブログ村建国18周年記念イベント 入賞

ブログ運営のロードマップ

ブログ運営のロードマップ
もくじ

SWELL導入後に必要な6つの初期設定

SWELLを導入したら、以下6つの初期設定を行いましょう。

まだSWELLを購入していない場合は、以下の記事を参考にインストールしておきましょう。

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

SWELLを導入したら、「ユーザー認証」を済ませておく必要があります

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

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

STEP
WordPress管理画面の警告文「SWELLのユーザー認証」を選択
SWELLのユーザー認証
STEP
メールアドレスを入力
SWELLのユーザー認証

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

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

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

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

SWELL初期設定②WordPresssの初期設定

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

具体的には、以下のような初期設定が必要です。

\ 初期設定は全17項目 /

WordPress初期設定の一覧
ぼんちゃん

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

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
ふきだしの挿入完了

カスタム書式

カスタム書式

「SWELL設定」→「エディター設定」→「カスタム書式」

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

カスタム書式セット
  • 設定できる項目
  • 太字・斜体
  • 文字色
  • 背景色
  • マーカー

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

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

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

その他

エディター設定のその他

「SWELL設定」→「エディター設定」→「その他」

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

ブログカード

ブログカード

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

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

引用

引用

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

ぼんちゃん

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

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

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

外観カスタマイズ

WordPress管理画面「外観」→「カスタマイズ」

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

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

ぼんちゃん

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

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

WordPress設定

WordPress設定

「外観」→「カスタマイズ」→「WordPress設定」

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

サイト基本情報

サイト基本情報

「外観」→「カスタマイズ」→「WordPress設定」→「サイト基本情報」

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

サイトのタイトルサイト名
キャッチフレーズサイトの簡単な説明
サイトアイコンブラウザのタブやブックマークバーに表示されるアイコン

ホームページ設定

ホームページ設定

「外観」→「カスタマイズ」→「WordPress設定」→「ホームページ設定」

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

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

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

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

ぼんちゃん

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

サイト全体設定

サイト全体設定

「外観」→「カスタマイズ」→「サイト全体設定」

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

基本カラー

基本カラーの設定

「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」

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

メインカラー見出しやボタンなどに適用される色
テキストカラーサイト全体に適用される文字の色
リンクカラー記事内のリンクの文字色
背景色サイトの背景色
ぼんちゃん

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

基本デザイン

基本デザインの設定

「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」

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

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

(1)サイト全体の見た目
サイト全体の見た目
全体の質感標準(チェックなし)・フラット・丸みから選択
コンテンツの背景を白にするコンテンツ部分のみ背景を白にする場合はチェック
(2)フォント設定
フォント設定
ベースとなるフォントサイト内の文字フォント
フォントサイズPC・タブレットとスマホの文字サイズ
字間文字と文字の間のスペース
(3)コンテンツ幅の設定
コンテンツ幅の設定
サイト幅サイトの幅
(当サイトは1200)
1カラム時の記事コンテンツ幅記事のコンテンツ幅
(当サイトは880)

ヘッダー

ヘッダーの設定

「外観」→「カスタマイズ」→「ヘッダー」

「ヘッダー」では、次の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管理画面「ユーザー」→「プロフィール」で編集できます。

  • プロフィールで編集する項目
  • ニックネーム
  • SNS情報
  • プロフィール情報(自己紹介文)
  • プロフィール画像

SNS情報

SNS情報の設定

「外観」→「カスタマイズ」→「SNS情報」

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

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

ぼんちゃん

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

SWELL初期設定⑥高速化設定

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

SWELLの高速化設定は、WordPress管理画面の「SWELL設定」から行います。

SWELLの高速化設定

「SWELL設定」→「高速化」

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

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

キャッシュ機能

キャッシュ機能の設定

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

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

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

ファイルの読み込み

ファイルの読み込み設定

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

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

遅延読み込み機能

遅延読み込み機能の設定

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

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

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

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

ページ遷移高速化

ページ遷移高速化の設定

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

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

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

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

今回は、SWELLの初期設定について解説しました。

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

あとは目標設定やサイト設計など、「記事を書く前の準備」を万全にしましょう!

ぼんちゃん

サイト運営に必要な準備をして、最短で成果を出しましょう!

ブログ運営のロードマップ

お問い合わせ

    当サイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー利用規約 が適用されます。

    もくじ