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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

＼ 初期設定は全17項目 ／

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

SWELLを導入したら、必要なプラグインだけを追加して最適化を図りましょう。

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

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

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

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

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

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

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

WordPress管理画面「SWELL設定」→「エディター設定」

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

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

カラーセット

「SWELL設定」→「エディター設定」→「カラーセット」

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

カラーパレット設定

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

リスト設定

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

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

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

Q&A設定

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

テーブル設定

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

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

ボーダーセット

「SWELL設定」→「エディター設定」→「ボーダーセット」

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

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

マーカー

「SWELL設定」→「エディター設定」→「マーカー」

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

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

ボタン

「SWELL設定」→「エディター設定」→「ボタン」

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

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

アイコンボックス

「SWELL設定」→「エディター設定」→「アイコンボックス」

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

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

ふきだし

「SWELL設定」→「エディター設定」→「ふきだし」

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

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

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

カスタム書式

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

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

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

その他

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

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

ブログカード

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

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

引用

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

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

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

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

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

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

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

WordPress設定

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

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

サイト基本情報

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

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

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

ホームページ設定

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

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

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

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

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

サイト全体設定

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

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

基本カラー

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

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

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

基本デザイン

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

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

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

（1）サイト全体の見た目

全体の質感	標準（チェックなし）・フラット・丸みから選択
コンテンツの背景を白にする	コンテンツ部分のみ背景を白にする場合はチェック

（2）フォント設定

ベースとなるフォント	サイト内の文字フォント
フォントサイズ	PC・タブレットとスマホの文字サイズ
字間	文字と文字の間のスペース

（3）コンテンツ幅の設定

サイト幅	サイトの幅 （当サイトは1200）
1カラム時の記事コンテンツ幅	記事のコンテンツ幅 （当サイトは880）

ヘッダー

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

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

（1）カラー設定

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

（2）ヘッダーロゴの設定

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

（3）ヘッダーバー設定

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

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

ぼんちゃん

当サイトでは、必要性が低いので非表示にしています

フッター

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

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

（1）カラー設定

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

（2）コピーライト設定

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

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

サイドバー

「外観」→「カスタマイズ」→「サイドバー」

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

当サイトでは、サイドバーを右に表示しています。

トップページ

「外観」→「カスタマイズ」→「トップページ」

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

メインビジュアル

「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」

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

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

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

記事スライダー

「外観」→「カスタマイズ」→「トップページ」→「記事スライダー」

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

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

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

投稿・固定ページ

「外観」→「カスタマイズ」→「投稿・固定ページ」

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

コンテンツのデザイン

「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」

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

項目	詳細
見出しのキーカラー	見出しの色 （基本カラーと別にする場合）
見出し2のデザイン	見出し2のスタイル
見出し3のデザイン	見出し3のスタイル
見出し4のデザイン	見出し4のスタイル

目次

「外観」→「カスタマイズ」→「投稿・固定ページ」→「目次」

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

項目	説明
目次を表示するかどうか	目次を表示する箇所にチェック
目次のタイトル	目次タイトルの変更
目次のデザイン	デザイン4種類から選択
目次のリストタグ	ドットか数字を選択
ドット•数字部分のカラー	ドット・数字のカラーを設定
どの階層の見出しを抽出するか	どの階層の見出しを表示するか （当サイトはh3）
見出し何個以上で表示するか	見出しが何個以上あれば目次を表示するか
目次の省略表示	目次を省略したときの表示方法
項目が何個を超えると省略するか	省略するときの項目の個数
開くボタンのテキスト	開くボタンのテキストの変更 （省略するとき）
閉じるボタンのテキスト	閉じるボタンのテキストの変更 （省略するとき）

SNSシェアボタン

「外観」→「カスタマイズ」→「投稿・固定ページ」→「SNSシェアボタン」

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

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

記事下エリア

「外観」→「カスタマイズ」→「投稿・固定ページ」→「記事下エリア」

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

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

SNS情報

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

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

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

SWELL初期設定⑥高速化設定

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

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

「SWELL設定」→「高速化」

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

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

キャッシュ機能

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

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

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

ファイルの読み込み

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

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

遅延読み込み機能

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

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

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

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

ページ遷移高速化

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

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

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

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

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

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

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