【SWELLの始め方】初期設定10個をわかりやすく解説

このような悩みを解決します。

SWELLの初期設定は10個

本記事を見ながら進めれば、かんたんに初期設定できるのでご安心ください。

なお、記事内容はすでにSWELLを購入している方を前提としています。

SWELLの購入方法をくわしく知りたい方は、「WordPressテーマ『SWELL』の購入方法」からどうぞ。

\国内人気No.1/

SWELL初期設定1｜親・子テーマのインストール

SWELLの会員サイト（SWELLERS’）で製品をダウンロードし、WordPressにインストールします。

≫ SWELL会員サイトの「マイページ」

「子テーマ」についてはこちらで解説

SWELL初期設定2｜ユーザー認証

SWELLを導入したらすぐ「ユーザー認証」しましょう。

ユーザー認証しないとSWELL本体のアップデートができません。

「ダッシュボード」>「SWELL設定」>「アクティベート」

会員サイト登録時のメールアドレスを入力し、「認証リクエストを送信」をクリック。

「株式会社LOOS」より届いたメールを開き、ワンタイムURLをタップすれば完了です。

SWELL初期設定3｜アフィリエイト申請

SWELLのアフィリエイトは購入者限定です。

ユーザー認証したついでに申請しておきましょう。

「会員サイト」>「マイページ」>「SWELLのアフィリエイト」

SWELLのアフィリエイトについてはこちら

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

SWELLのプラグインは最低限でOK

以下では、公式サイトでまとめられている「推奨・非推奨プラグイン」を紹介します。

プラグインはWordPressの機能を拡張するツールのこと。スマホアプリみたいなものです。

推奨プラグイン

プラグイン名	説明	重要度
SEO SIMPLE PACK	SEOに必要な設定を行える。SWELLと開発元が同じ
XML Sitemap & Google News	XMLサイトマップ生成プラグイン
WP Revisions Control	リビジョンデータを制御できる
Wordfence Security	ログイン系のセキュリティを強化
XO Security	ログイン系のセキュリティを強化
BackWPup	WordPressのデータを保存、復元できる
Contact Form by WPForms	お問い合わせフォームを設置
Useful Blocks	おしゃれで便利なブロックプラグイン
Pochipp	アフィリエイトリンクを管理できる

非推奨プラグイン

プラグイン名	説明
Gutenberg	テーマ開発者がブロックエディターの機能をテストするもの
WooCommerce	未対応
Elementor	SWELLにページビルダーは不要
Flying Scripts	SWELLに同様の機能あり
Autoptimize	不具合が発生する可能性あり
Async JavasScript	不具合が発生する可能性あり
Table of Contents Plus	SWELLに同様の機能あり
a3 Lazy Load	SWELLに同様の機能あり
Classic Editor	ブロックエディター推奨のため
AddQuicktag	クラシックエディター用のため不要
TinyMCE Advanced	クラシックエディター用のため不要
Jetpack	不具合が発生する可能性あり
WP Super Cache	SWELLに同様の機能あり
SiteGuard WP Plugin	不具合が発生する可能性あり
EWWW Image Optimizer	不具合が発生する可能性あり

プラグインは便利ですが、入れすぎると不具合の原因にもなります。

ページ速度向上のためにも、プラグインは最小限にしましょう。

プラグインについてはこちら

SWELL初期設定5｜解析ツールの導入

ブログ運営に必須の解析ツール「Googleアナリティクス」「Googleサーチコンソール」を導入します。

両者の導入には「SEO SIMPLE PACK」が必要です。

Googleアナリティクス

「Googleアナリティクス」は無料アクセス解析ツール。

ウェブサイトへのアクセスに関するデータを幅広く計測できます。

Googleサーチコンソール

「Googleサーチコンソール」はウェブサイトのパフォーマンス分析ツールです。

サイトに流入する検索キーワード、検索順位などを解析できます。

SWELL初期設定6｜ふきだしの登録

ふきだしを使うときは投稿画面で「＋」をクリックし、ふきだしブロックを呼び出してください。

SWELL初期設定7｜エディター設定

エディター設定では、記事装飾に関する設定を行います。

「ダッシュボード」>「SWELL設定」>「エディター設定」

カラーセット

カラーセットでは5項目の色を編集できます。

カラーパレット

カラーパレットはテキスト、背景色の変更に使用します。

赤枠内の濃い色4つ、淡い色4つを自由に変更可能。

カラーパレットのメインカラー、薄いメインカラー、グレー、白、黒は固定されています。

メインカラーの変更はカスタマイザーの「サイト全体設定」>「基本カラー」でどうぞ。

リスト

リストの色も変更できます。

プレビューを見ながら変更可能です。

キャプションブロック

キャプションブロックは3色設定可能です。

タイトル、コンテンツの色を別々に設定できます。

Q&A

Q&Aアイコンはのカラー設定を行います。

「Q」「A」それぞれの色を設定しましょう。

テーブル

テーブル内で使用するアイコンカラーを設定します。

プレビューを見ながら編集してください。

テーブルの使い方はこちら

ボーダーセット

ボーダーセット4パターンのデザインを編集できます。

線の種類、太さ、色の設定が可能です。

編集例

マーカー

マーカー4色を設定しましょう。

マーカーのスタイルは4種類から選択可能。

編集例

ボタン

SWELLボタンのカラーを設定します。

カラー、グラデーションの有無、ボタンの丸みが編集可能。

編集例

SWELLボタン詳細はこちら

アイコンボックス

SWELLのアイコンボックスは大小12個を編集できます。

スタイル、カラーを設定しましょう。

アイコンボックス（小）の編集例

アイコンボックス（大）の編集例

ふきだし

ふきだしカラー5色の設定を行います。

背景、ボーダーカラーが変更可能です。

編集例

ふきだしの追加をする場合は「ふきだしの登録」をご覧ください。

カスタム書式

カスタム書式を設定すると、設定した装飾を「書式セット」で呼び出せます。

カスタム書式セットは2つ登録できます。

編集例

その他ではブログカード、引用のデザインを変更できます。

その他

その他では「ブログカード」「引用」のデザインを設定できます。

ブログカード

内部、外部リンク用のブログカードデザインを設定しましょう。

「プルダウンリスト」よりお好きなタイプ1〜3を選べばOK

編集例

引用

引用のスタイルは2パターンから選択可能。

スタイルの「プルダウンリスト」でデザインを選びます。

編集例

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

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

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

各項目の編集が終わったら、画面上の「公開」をクリックするのを忘れずに。

WordPress設定

WordPress設定では2項目を設定します。

サイト基本情報

サイトのタイトル

ウェブサイト名を入力

キャッチフレーズ

サイト内容の説明

サイトアイコン

512×512pxで作成してください。

ホームページ設定

最初は「最近の投稿」でOK

「固定ページ」を使うのは、サイト型トップページにするときです。

サイト型トップページにする方法はこちら

サイト全体設定

サイト全体設定では10項目を設定します。

基本カラー

基本カラーは、サイト全体に適用される色を設定できます。

メインカラー

見出しや各種ボタンなど、サイト全体のイメージカラー。

テキストカラー

記事本文など、サイト全体に適用。

リンクカラー

記事本文のリンクカラー。

背景色

サイト全体の背景色。

基本デザイン

基本デザインでは、サイトの見た目に関する設定ができます。

サイト全体の見た目

全体の質感

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

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

• オフ
• オン
• オフ（メインエリアのみ）

※わかりやすいよう背景の色を変更しています。

フォント設定

ベースとなるフォント

• 游ゴシック
• ヒラギノゴシック>メイリオ
• Noto Sans JP
• 明朝体

フォントサイズ

PC、タブレット、スマホのフォントサイズ

字間

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

字間の設置例はこちら

SWELLで行間・段落・字間を調整する方法【カスタマイズCSS付き】

コンテンツ幅の設定

サイト幅

サイトの横幅

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

1カラムのときのコンテンツ横幅

サブメニューの表示形式

チェックを入れるとグローバルナビ、スマホメニュー、ウィジェット内のサブメニューがアコーディオン式になります。

使用例

ページ背景

任意の画像をページ背景に設定できます。

使用例

画像をアップロードすると、ページ背景画像の設定項目が表示。

画像サイズ

背景画像の縦横サイズを設定

画像位置（X・Y）

X、Y軸で画像位置を調整

その他の設定

画像のループ、固定表示の選択

NO IMAGE画像

記事にアイキャッチ画像を設定していないときに表示する画像を設定できます。

タイトルデザイン

タイトルデザインでは、コンテンツのタイトル装飾を設定できます。

サブコンテンツのタイトルデザイン

記事下「この記事を書いた人」や「関連記事」のタイトル装飾のデザインが設定可能。

使用例

• 装飾なし
• 下線
• 左に縦線
• 左右に横線

ウィジェットタイトル

サイドバー、フッター、スマホ内のタイトルデザインを設定できます。

サイドバーのタイトルデザイン

• 下線
• 左に縦線
• 左右に横線
• 塗り

コンテンツヘッダー

コンテンツヘッダーはアイキャッチ画像とは別に、「タイトルエリアの背景画像」を設定できます。

デザインを変更するには、「投稿・固定ページ」>「タイトル」からどうぞ。

お知らせバー

ヘッダーの上下にテキストリンクを配置できます。

お知らせバーの表示位置

ヘッダーの上下に設置可能

表示内容の設定

文字の大きさ、リンク種類、内容を編集

背景効果

お知らせバーの背景にグラデーション、斜めストライプ効果を追加

カラー設定

テキスト、背景色の選択

パンくずリスト

パンくずリストの表示位置を選択しましょう。

パンくずリストの位置

記事上部or下部を選択

「ホーム」の文字列

任意のテキストに変更可能

その他の設定

「投稿ページ」への表示、背景効果の有無を設定

ページャー

ページャーの形、デザインを選択します。

ページャーの形・デザイン例

スマホ開閉メニュー

スマホ開閉メニューのデザインを設定しましょう。

カラー設定

文字色、背景色などお好みで設定

表示設定

メニューのタイトルを変更可能

カスタマイズ例

下部固定ボタン・メニュー

画面右下に表示される「目次ボタン」「上に戻るボタン」を設定できます。

右下固定ボタン設置例

「スマホ用固定フッターメニューの設定」は、スマホ下部に固定メニューを設定している方のみご利用ください。

固定メニューを設置したい方は「外観」>「メニュー」からどうぞ。

ヘッダー

ヘッダーのカラー、ロゴなどデザインを設定します。

カラー設定

ヘッダー背景色、文字色を変更できます。

変更例

ヘッダーロゴの設定

1600×360サイズで作るといい感じです。

設置例

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

ヘッダーナビの位置を変更できます。

変更例（PC）

• 右寄せ
• 左寄せ
• 下
• 上

変更例（SP）

• ロゴ左/メニュー右
• ロゴ中央/メニュー右
• ロゴ中央/メニュー左

トップページでの特別設定

特別設定を「する」にすると、透過したヘッダーをメインビジュアルの上に被せることができます。

設置例

ヘッダーの追従設定

ヘッダーを追従させる場合はチェックを入れましょう。

変更例

ヘッダーの追従ボタンについてはこちら

SWELLで追従ボタンを設置する方法【ヘッダー・目次・SNSシェア】

ヘッダーバー設定

ヘッダーバーは「SNSアイコンリスト」を表示できます。

設置例

キャッチフレーズ設定

キャッチフレーズの表示位置を設定しましょう。

設置例

• 表示しない
• ヘッダーバーに表示
• ロゴの近くに表示

ヘッダーメニュー（グローバルナビ）設定

ヘッダーメニューにマウスホバーしたときのエフェクト、色を設定できます。

変更例

• ライン（中央・左）
• ブロック
• 背景グレー
• 背景明るく

ドロップダウンメニューの作り方はこちら

SWELLにドロップダウンメニューを設置する方法

ヘッダーメニュー（SP）設定

「スマホ用ヘッダー」に指定したメニューがある場合に表示。

カスタマイザーでは、ヘッダーメニューをループさせるか選択できます。

検索ボタン設定

サイト内検索できる「検索ボタン」を設置しましょう。

設置例

メニューボタン設定

スマホで表示されるメニューに関する設定ができます。

変更例

カスタムボタン設定

スマホで表示される「検索ボタン」のアイコンを変更したり、好きなリンク先の「カスタムボタン」を設置できます。

変更例

フッター

フッターのカラー、コピーライト設定をします。

カラー設定

フッターの背景色、文字色、ウィジェットエリアの色を設定しましょう。

変更例

コピーライト設定

コピーライトは自由に設定できます。

使用例

その他の設定

「フッター」と「フッター直前ウィジェット」の間の余白をなくす、はお好みで。

SNSアイコンリストは表示させましょう。

設置例

サイドバー

サイドバーをどのページに表示するか設定します。

サイドバーの位置も変更可能（左右）。

変更例

トップページ

トップページのデザインを設定します。

メインビジュアル

メインビジュアルはサイトを開くとトップに表示される画像、動画のことです。

記事スライダー

記事スライダーは、記事サムネイルが右から左に流れる機能のことです。

記事スライダーを設置するかどうか

記事スライダーを設置するかどうか選択しましょう。

記事のピックアップ方法

記事スライダーにどの記事を表示させるか対象を選択します。

並び順も決めましょう。

記事の表示設定

記事スライドの見た目に関する設定を行えます。

変更例

スライド設定

PC・スマホそれぞれのスライダー枚数、アニメーション速度の設定です。

その他の表示設定

記事スライダーにタイトルを追加したり、背景色を変更したりできます。

変更例

ピックアップバナー

ピックアップバナーは、メインビジュアル下に表示される画像バナー形式のナビゲーションメニューです。

ピックアップバナーを使用するには、カスタムメニューを作成する必要があります。

「外観」>「カスタマイズ」>「メニュー」より新規メニューを作成してください。

バナーレイアウト

バナーを何列で表示するか選択。

2〜4列、またはフレックス（横一列にすべて並べる）から選べます。

バナーデザイン

バナータイトルのデザイン、白線の有無、バナーをすこし暗くするか設定しましょう。

変更例

• 表示しない
• 左上
• 右下
• 中央シンプル
• 中央ボタン風
• ワイド

※タイトルが短い場合は左上に表示されます。

※タイトルが短い場合は右下に表示されます。

その他

トップページ以外の下層ページ（投稿ページなど）に表示するか選択できます。

「Lazyload」を強制オフにするにはチェック。

その他

その他ではメインビジュアル下、コンテンツ部分との間の余白を調整できます。

ピックアップバナー下の余白と合わせるなら「標準」を選ぶといいですよ。

投稿・固定ページ

投稿・固定ページでは以下の7項目を設定します。

タイトル

記事タイトル周辺のデザインを設定しましょう。

投稿ページ

タイトルの表示位置、タイトル横・下に表示する情報を選択できます。

変更例

タイトル背景の画像は「サイト全体設定」>「基本デザイン」「コンテンツヘッダー」より設定可能。

固定ページ

固定ページでも同様の設定ができます。

PR表記

ステマ規制の改正に伴い、アフィリエイトリンクのある記事には「PR表記」をする必要があります。

PR表記の自動挿入

投稿、固定ページそれぞれ設定可能

表示タイプ

大、小より選択

表示するテキスト

大、小それぞれ自由に設定可能

変更例

アイキャッチ画像

投稿本文のトップにアイキャッチ画像を表示するか選択できます。

投稿、固定ページそれぞれ設定可能です。

表示なしパターン

コンテンツのデザイン

「コンテンツのデザイン」では見出しや太字、テキストリンクの装飾を設定。

見出しのデザイン設定

見出しh2〜h4のデザインをそれぞれ設定できます。

見出しのデザイン例

• 見出し2
• 見出し3
• 見出し4

セクション見出しのデザイン設定

セクション用見出しのデザインも変更可能です。

変更例

• なし
• 下に線
• 左右に線

太字

チェックを入れると記事中の太字の下に「点線」がつきます。

変更例

テキストリンク

チェックを入れると記事中のテキストリンクに「アンダーライン」がつきます。

変更例

目次

投稿ページの目次を設定しましょう。

目次を表示するかどうか

投稿・固定ページに目次を表示させるか選択

目次のタイトル

お好きなタイトルを入力

目次のデザイン

4種類から選択

目次のリストタグ

ol・ulタグから選択

擬似要素(ドット・数字部分)のカラー

テキスト、メイン、カスタムカラーより選択

どの階層の見出しまで抽出するか

h2〜h5より選択

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

任意の数字を入力

目次の省略表示

4種類から選択

開くボタンのテキスト

お好きなテキストを入力

閉じるボタンのテキスト

お好きなテキストを入力

目次広告の位置

目次の前・後から選択

設置例

SNSシェアボタン

SNSシェアボタンの配置、表示設定ができます。

シェアボタンを表示する位置

記事の上、下、画面端に固定表示から選択

表示するボタンの種類

6種類のSNSから選択

シェアボタンのデザイン

5種類から選択

URLコピーボタン

表示しない、大、小から選択

「記事下部シェアボタン」の上に表示するメッセージ

お好きなテキストを入力

シェアされた時のハッシュタグ

Xでシェアされたときのハッシュタグを追加可能

via設定（メンション先）

Xでリプライされたとき「@◯◯さんから」と追加可能

設置例

記事下エリア

記事下エリアのデザインを編集しましょう。

SNSアクションエリア設定

表示するSNSボタン（X、Instagram、Facebook）を選択します。

設置例

前後記事へのページリンク設定

前後記事へのページリンクの詳細を設定。

変更例

• 標準
• シンプル

※ページリンクにサムネイル画像を表示する

著者情報エリアの設定

「著者ページへのリンクを表示する」は著者が複数いるときに便利です。

設置例

著者情報の設置はこちら

SWELL版「この記事を書いた人」の設定方法（編集・非表示）

関連記事エリアの設定

関連記事エリアのタイトル、レイアウトなどを設定できます。

変更例

• カード型
• リスト型

コメントエリアの設定

チェックを入れるとコメントエリアを設置できます。

設置例

アーカイブページ

アーカイブページではタイトルレイアウトを変更可能です。

タイトルの表示位置を「コンテンツ内」「コンテンツ上」より選択できます。

変更例

タイトル背景への画像挿入は「サイト全体設定」>「基本デザイン」「コンテンツヘッダー」からどうぞ。

記事一覧リスト

記事一覧リストでは、リストレイアウトの設定が可能。

リストのレイアウト設定

PC・スマホのリストレイアウトを設定しましょう。

変更例

• カード
• リスト
• リスト（左右）
• サムネイル
• ブログ
• テキスト

投稿情報の表示設定

抜粋文の文字数（0〜320）など、投稿情報の表示を設定できます。

変更例

• 非表示
• 160文字

抜粋文についてはこちら

SWELLの「抜粋文」を変更・非表示にする方法

カテゴリーの表示設定

カテゴリーの表示設定が可能です。

変更例

• 投稿日時の横に表示
• サムネイル画像の上に表示

サムネイル画像の比率設定

記事一覧リストに表示されるサムネイル画像の比率を設定できます。

  画像比率

• 正方形 (1:1)
• 黄金比率 (1:1.618)
• 白銀比率 (1:1.414)
• 一眼 (3:2)
• ワイド (16:9)
• OGP（1.91:1）
• 横長 (2:1)
• 超横長 (5:2)

変更例

• 正方形
• 黄金
• 白銀
• 一眼
• ワイド
• OGP
• 横長
• 超横長

マウスホバー時の設定

投稿リストにマウスをホバー（重ねる）させたときに被せるカラーを変更可能です。

編集例

• デフォルト
• 変更

タブ切り替え設定（トップページ）

トップページの投稿ページ一覧に表示する「タブ」を編集できます。

変更例

タブ切り替え設定（その他のページ）

タームアーカイブ（カテゴリー・タグページ）、著者アーカイブに「人気記事タブ」を追加するか選びましょう。

変更例

投稿一覧から除外するカテゴリー・タグ

トップページやウィジェットに表示される「投稿一覧リスト」から、除外したいカテゴリーやタグを設定できます。

SNS情報

ヘッダーやフッターに表示するSNSアイコン情報を設定します。

アカウント名ではなく、SNSのページURLを入力してください。

SWELL初期設定9｜プロフィール設定

ウィジェットに表示されるプロフィールを設定します。

SWELL初期設定10｜高速化設定

SWELLの高速性を最大限引き出すためにも「高速化設定」をお忘れなく。

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

キャッシュ機能

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

ブログカードのキャッシュ期間は「30日」のままでOK

ファイルの読み込み

「SWELLのCSSをインラインで読み込む」と「コンテンツに合わせて必要なCSSだけを読み込む」にチェック。

遅延読み込み機能

コンテンツの遅延読み込み

2項目にチェック

画像等のLazyload

「スクリプト(lazysizes.js)を使って遅延読み込みさせる」にチェック

スクリプトの遅延読み込み

オン

遅延させる秒数

５秒

  遅延読み込み対象にするスクリプトのキーワード

• twitter.com/widgets.js,
• instagram.com/embed.js,
• connect.facebook.net,
• assets.pinterest.com,
• googletagmanager.com/gtag/js,
• gtag(,
• adsbygoogle.js,
• clipboard.min.js,
• set_urlcopy.min.js,
• luminous.min.js,
• set_luminous.min.js,
• rellax.min.js,
• set_rellax.min.js,
• prism.js,
• hcb_script.js,
• pochipp/dist/js/update.js,

ページ遷移高速化

高速化の種類は「Prefetch」にチェック。

Prefetchさせないページのキーワードを入力する場合は、「,（＋改行）」で区切ってください。

チェックを入れ終わったら、最下部「変更を保存」をクリックすれば完了。

高速化の詳細はこちら

まとめ｜SWELLの初期設定10個

今回は、SWELLの初期設定10個をまとめました。

おさらい

設定項目が多く大変かもしれませんが、SWELLの力を引き出すためです。

一つひとつ確実に設定しましょう。

\国内人気No.1/

あわせて読みたい