【SWELLの始め方／初期設定（2023年最新版）】購入方法からイントールと導入方法

ワードプレスのテーマ「SWELL」でWebサイトやブログを作成しようと思い、SWELLの始め方を知りたい人は多いのではないだろうか。

SWELLの始め方は、実際にやってみるとシンプルだ。ただ、何かしら案内がないとワードプレスへの導入（インストール）や初期設定のやり方で戸惑ってしまう。

そこで、当記事ではワードプレス初心者に向けて、SWELLの始め方や初期設定について分かりやすく画像付きで解説している。

……ただ、当記事ではSWELLの始め方を徹底的に解説しているため、目次が大変長くなってしまうのでSWELLの導入にはこちらの章を役立ててほしい。

SWELLの評判がやたらと良い理由や、実際の利用者のレビューを判断材料にしたい人は、次の記事で詳しく紹介しているので参考に役立ててほしい。

SWELLの始め方3ステップ＆初期設定

当記事ではSWELLの始め方をステップ分けして解説している。

上から順番に参考にしてもらえれば、SWELLでサイトやブログの記事を書き始めるまでの設定が完了するようになっている。

なお、以下のコンテンツをクリックすればSWELLの導入方法を解説した各章に飛べるようにしてある。知りたい部分だけかいつまんで目次のように活用してくれれば幸いだ。

SWELLの始め方3ステップが完了すれば、SWELLを使い始めることができる。

さらに当記事では、SWELLの初期設定方法も解説しているので併せて参考にしてほしい。

【SWELLの始め方①】テーマのインストール導入方法

SWELLの始め方ステップ①として、まずはSWELLの購入方法からワードプレスへのインストール方法までを解説する。

SWELLの購入方法

SWELLテーマを購入するまでの手順を説明する。

SWELL購入方法①：公式サイトからダウンロードページにアクセスする

まずは、次のボタンよりSWELL公式ページにアクセスしよう。

SWELL公式ページにアクセスしたら、トップページ右上にある［購入する］をクリックし、ダウンロードページに遷移する。

SWELL購入方法②：利用規約に同意し購入ボタンをクリックする

SWELLダウンロードページの画面下部までスクロールすると［SWELLを購入する］ボタンがあるので、利用規約に同意してボタンをクリックしよう。

SWELL購入方法③：クレジットカード情報を入力し、テーマを購入する

SWELLの支払いに必要なクレジットカード情報を入力し、［支払う］ボタンをクリックし購入を完了させる。

なお、SWELLの支払いはクレジットカードが一般的だが、一部デビットカードやバーチャルカードでも決済できるようだ（筆者はJCBのバーチャルカードで決済した）。

購入時のメールアドレスに注意
SWELL購入時に利用するメールアドレスは、今後のメンバーズサイト会員登録、及びユーザー認証時に同じメールアドレスが必要となる。購入時のメールアドレスは正しく受信できる自身のものを登録しておくこと

支払いが完了すると、SWELL公式よりテーマのzipファイルが添付された購入完了メールが届く。

購入完了メールからzip形式のSWELLテーマをダウンロードし、WordPressにインストールして使い始めることができる。

ただ「ユーザー認証」や「着せ替えデータのダウンロード」などを利用する場合、SWELL会員である必要があるので、このままSWELL公式フォーラムに新規会員登録することをおすすめする。

SWELL公式フォーラムに会員登録する方法

SWELLテーマの購入が完了したら、SWELL公式フォーラムへの会員登録を完了させる。

SWELL会員登録方法①：公式フォーラムにアクセスする

先程のSWELL公式ページに戻り、トップページ右上の［フォーラム］をクリックする。

SWELLERS’（公式フォーラム）のページに移動するので［会員登録はこちらから］をクリック。

SWELL会員登録方法②：SWELLERS’に新規会員登録する

新規会員登録フォームに「ユーザー名」「メールアドレス※」「パスワード」を入力し、利用規約に同意したら［登録］をクリックする。

SWELLERS’の会員登録に必要なメールアドレスは、SWELLテーマ購入時に利用したものと同じでなくてはならない。

「入力されたメールアドレスではSWELLLの購入履歴が見つかりませんでした。」と表示される時は…

当サイトは購入履歴が確認できるアドレスでのみユーザー登録が可能です。
購入したのにメールアドレスが認証されない場合は、お問い合わせページからご連絡ください。

引用：SWELL公式サイト（2022/11/17時点）

SWELL会員登録方法③：登録完了メールを確認する

SWELLERS’の会員登録が完了すると、登録したメールアドレス宛に次のような登録完了メールが届く。

以上でSWELL公式フォーラムへの新規登録が完了した。

次のSWELL導入手順は、公式フォーラムよりテーマファイルをダウンロードする。

SWELLのダウンロード方法

SWELLERS’の会員登録が完了したら、SWELLのテーマファイルをPCにダウンロードする。

SWELLダウンロード方法①：SWELLERS’にログインする

新規会員登録が完了したら、公式フォーラムSWELLERS’トップページのメニュー右上にある［ログイン］をクリックし、ログインページに遷移する。

会員登録時に使用したメールアドレス（購入時と同じもの）とパスワードを入力し、「CAPTCHAコード」を入力した後、［ログイン］をクリックする。

SWELLダウンロード方法②：テーマファイルをダウンロードする

SWELLERS’ にログインすると、トップページ右上にあるメニューから［マイページ］にアクセスできるようになる。

マイページに遷移し、画面を下部までスクロールすると「SWELL製品ダウンロード」の項目があるはずだ。

この項目にあるリンクからSWELLのテーマファイルをダウンロードすることができる。

SWELLテーマのダウンロードリンクには、「最新版の本体（親テーマ）」と「子テーマ」の二つがあるので、両方共ダウンロードする。

以上でSWELLテーマのダウンロードが完了した。

SWELLのテーマのzipフォルダは解凍しない
通常、テーマファイルはzip形式（圧縮状態）のままWordPressにアップロードする。親、子テーマそれぞれzip形式でダウンロードされるが、解凍せずに分かりやすいフォルダに格納しておこう

次のSWELL導入手順では、テーマを反映させたいサイトやブログのWordPressにテーマファイルをインストールする。

SWELLのインストール方法

SWELLのテーマファイルのダウンロードができたら、WordPressにSWELLテーマのインストールを完了させる。

SWELLインストール方法①：WordPress管理画面テーマページの［新規追加］をクリックする

SWELLテーマを導入するサイトやブログのWordPress管理画面にログインしよう。

WordPressへのログインが完了したら、管理画面の左のメニューにある［外観］⇒［テーマ］よりテーマページに移動し、［新規追加］ボタンをクリックする。

SWELLインストール方法②：［テーマのアップロード］をクリックする

テーマの追加ページに遷移するので、そのまま［テーマのアップロード］をクリックする。

SWELLのインストール方法③：［ファイルを選択］をクリックする

テーマファイルのアップロードページに遷移するので、［ファイルを選択］をクリックする。

SWELLインストール方法④：「親テーマ（swell-x-x-x-x）」のファイルを選択する

アップロードフォルダのウィンドウが開くので、先程ダウンロードしたSWELLテーマ二つのうち「親テーマ（swell-x-x-x-x）」を選択し［開く］をクリックする。

当記事のSWELLの始め方のインストール手順では、先に親テーマをWordPressにアップロードしていが、最終的には親子二つインストールした上で子テーマ側を有効化すれば良いので、アップロードの順番はどちらでも構わない

SWELLインストール方法⑤：［今すぐインストール］をクリックする

親テーマを選択して開くと、インストールするファイル名が表示される。

ファイル名が正しいことを確認した上で［今すぐインストール］をクリックする。

SWELLインストール方法⑥：［テーマページに移動］をクリックする

親テーマのインストールが完了すると、次のような画面が表示される。

続けて「子テーマ」のアップロードも行うので、［テーマページへ移動］をクリックし一旦テーマページに戻る。

SWELLインストール方法⑦：再度［新規追加］をクリックする

続けて親テーマと同じように、WordPressに子テーマもインストールしていこう。

テーマページに戻ったら、先程と同様［新規追加］をクリックする。

SWELLインストール方法⑧：再度［テーマのアップロード］をクリック

テーマの追加ページの［テーマのアップロード］をクリックする。

SWELLインストール方法⑨：再度［ファイルを選択］をクリック

テーマのアップロードページの［ファイルを選択］をクリックする。

SWELLインストール方法⑩：「子テーマ（swell_child）」のファイルを選択する

アップロードフォルダのウィンドウが開くので、「子テーマ（swell_child）」を選択し［開く］をクリックする。

SWELLインストール方法⑪：［今すぐインストール］ をクリック

ファイル名が正しいことを確認した上で［今すぐインストール］をクリックする。

SWELLインストール方法⑫：子テーマを「有効化」する

子テーマのインストールが完了したら、［有効化］をクリックする。

もしこの画面で［テーマページへ移動］をクリックしてしまっても、テーマページから子テーマを有効化すればOKだ。

念のため、テーマページで正しくWordPressにSWELLがインストールできているか確認しておこう。

以上でSWELLテーマのインストールは完了だ。お疲れ様でした。

ちなみにWordPressにSWELLテーマをインストールしても、「ユーザー認証」が行われていないと次のような警告文が出る。

次のSWELLの始め方のステップでは、ユーザー認証の方法を解説している。

【SWELLの始め方②】ユーザー認証

SWELLの始め方ステップ②として、テーマをインストールしたサイトやブログのユーザー認証を完了させる手順を解説する。

SWELLのユーザー認証を済ませておかないと、SWELLテーマの最新バージョンがリリースされた際に、アップデートを行うことができない。

ユーザー認証を行わなくてもSWELLを利用できるので後回しでも構わないが、ユーザー認証の作業は数分で完了するのでやっておくことをおすすめする。

SWELLユーザー認証方法

SWELLのインストールが完了したら、WordPressからそのままSWELLのユーザー認証を行う。

SWELLユーザー認証方法①：WordPress管理画面のアクティベート設定で認証リクエストを送信する

WordPress管理画面の左のメニューにある［SWELL設定］⇒［アクティベート］をクリックし、SWELLアクティベート設定ページに遷移する。

メールアドレスの入力フォームがあるので、SWELL購入時と公式フォーラム登録時に利用したものと同じメールアドレスを入力し［認証リクエストを送信］をクリックする。

SWELLユーザー認証方法②：受信したメールを開き、認証用URLをクリックする

SWELLアクティベート設定ページに入力したメールアドレス宛に、「認証用URL」が添付されたメールが届くのでURLをクリックする。

SWELLユーザー認証方法③：公式フォーラムでユーザー認証の完了を確認する

認証用URLをクリックすると公式フォーラムに遷移し、画面右下にユーザー認証が完了した旨のメッセージがポップアップする。

ポップアップ内の［自分のサイトに戻る］をクリックすると、再度WordPressのSWELLアクティベート設定ページに戻り、ユーザー認証が完了していることが確認できる。

以上でSWELLのユーザー認証は完了だ。お疲れ様でした。

次のSWELLの始め方のステップでは、テーマを使う上で適したプラグインと、そうでないものを紹介している。

【SWELLの始め方③】プラグインの最適化

SWELLの始め方ステップ③として、テーマを使う上で推奨されるプラグインと、非推奨のプラグインを紹介する。

WordPressにSWELLをインストールしたら、プラグイン周りの見直しが必要となる。その理由は次の通りだ。

以上の理由から、SWELLで推奨されるプラグイン・非推奨とされるプラグインが存在するのである。

SWELLのプラグインの導入方法

SWELLのプラグインの紹介前に、WordPressでのプラグイン導入方法について軽く触れておこう。

WordPress管理画面の左メニューにある［プラグイン］⇒［新規追加］をクリックすると、プライグイン追加ページに遷移する。

プライグイン追加ページの右上にある検索フォームにプラグイン名を入力・検索し、プラグインの追加と有効化を行うことができる。

SWELLテーマの導入推奨プラグイン

SWELLに導入すべき推奨プラグインは次の通りだ。

重要度「高」としているプラグインはほぼ必須で、それ以外は必要に応じて追加する形で良いだろう。

SWELL推奨プラグイン	重要度	用途	説明
SEO SIMPLE PACK	高	SEO	SWELL開発者が作成したシンプルなSEOプラグイン。これがあれば「Yoast SEO」や「All in One SEO」は不要
XML Sitemap & Google News	高	SEO	XMLサイトマップの作成プラグイン。「SEO SIMPLE PACK」を利用するなら必須
WP Revisions Control	中	軽量化	サイトやブログの動作を重くするリビジョンデータを簡単に制限できるプラグイン。SWELL公式推奨
Converter for Media	中	軽量化	「.jpg」「.png」などの画像形式を一括で「WebP」形式に置き換え、サイト表示を軽量化するプラグイン
Wordfence Security	中	セキュリティ	WordPressのセキュリティ全般を担うプラグイン。SWELL公式推奨
BackWPup	中	バックアップ	WordPresの記事・画像・プラグインデータなどのバックアッププラグイン。SWELL公式推奨
Contact Form by WPForms	中	お問い合わせ	簡単にお問合せフォームを設置できるプラグイン
Useful Blocks	低	デザイン	可愛いデザインのブロックエディタの拡張プラグイン。開発にSWELL公式が関わっている
Pochipp	低	アフィリエイト	Amazon・楽天・Yahoo!の商品を検索し、アフィリエイトリンクを管理できるプラグイン。開発にSWELL公式が関わっている

SWELLテーマの非推奨プラグイン

次に、SWELLを使う上で不要なプラグインと、不具合の原因となりそうなプラグインを紹介する。

基本的に、クラシックエディターや高速化関連のプラグインと機能が重複するため、SWELLでは非推奨とされている。

WordPressで作成するサイトやブログでは、推奨されていることの多い定番プラグインもいくつか含むので要注意だ。

特に理由が無い限りは、表のプラグインは削除してしまって問題ない。

SWELL非推奨プラグイン	用途	説明
Classic Editor	クラシックエディタ―	SWELLはブロックエディター推奨のため
AddQuicktag	ショートコード	SWELLはブロックエディター推奨のため
Advanced Editor Tools（旧：TinyMCE）	ツールバー拡張	SWELLはブロックエディター推奨のため
Table of Contents Plus	目次生成	SWELLで標準搭載されているため
Speech bubble	デザイン（吹き出し追加）	SWELLで標準搭載されているため
Lazy Load	軽量化（画像遅延読み込み）	SWELLで標準搭載されているため
Autoptimize	高速化全般	SWELLで不具合報告が挙がっているため
EWWW Image Optimizer	軽量化（画像圧縮）	SWELLで不具合報告が挙がっているため
SiteGuard WP Plugin	セキュリティ	SWELLで不具合報告が挙がっているため

【SWELLの始め方】初期設定（購入後）

SWELLの始め方の説明が終わったところで、購入後の「初期設定」について解説する。

SWELLの初期設定には、サイト全体の見た目のデザインやGoogleアナリティクスやサーチコンソールとの連携設定などが挙げられる。

SWELLのデザインはカスタマイズ性に優れる反面、設定項目が多いと感じる人もいるだろう。

そういった場合は、SWELLの着せ替え用デモ（テンプレート）をベースにし、デザインをカスタマイズすることも可能だ。

SWELL初期設定：デザインの設定

SWELLの初期設定として、サイト全体的に適用される「デザインの設定」を解説する。

SWELLテーマを適用したワードプレスでは、好みに応じて好きにサイトデザインを細かくカスタマイズできる。

なお、SWELLのデザインに関することは「テーマカスタマイザー（［外観］⇒［カスタマイズ］）」で設定するのが一般的だ。

カスタマイザーはデザインの設定をリアルタイムでプレビューできるので、適用後のサイトの見た目を確認しつつ調整することができる。

SWELLのデザイン設定の各項目について詳しく解説していく。

基本カラー設定

SWELLで作成したサイト全体に適用される色の設定。

SWELLの基本カラーで設定した色は、サイトやブログの次のような箇所に適用される。

基本カラーの設定項目	説明
メインカラー	見出しやボタンなどに適用される
テキストカラー	記事本文中のテキストに適用される
リンクカラー	記事本文中のテキストリンクに適用される
背景色	サイトの背景全体に適用される

SWELLの基本カラーの中でも、メインカラーはサイトやブログのテーマカラーともいえるだろう。

メインカラーには白色でテキストが重なるため、淡い色に設定するとテキストが読みづらくなってしまう点には注意したい。

基本デザイン設定

SWELLで作成したサイト全体に適用される基本デザインについての設定。

SWELLの基本デザイン設定は、サイトやブログの次のような箇所に適用される。

基本デザインの設定項目	説明
全体の質感	サイト全体の質感を「標準」「フラット」「丸み」のいずれかから選択する
コンテンツの背景を白にする	コンテンツやウィジェット部分のみを白色にし、見やすく設定する
フォント設定	サイト全体のフォントやフォントサイズを調整する
コンテンツ幅の設定	特に理由が無ければ標準設定でOK（標準はサイト幅1,200、1カラム時880）
サブメニューの表示設定	グローバルナビ・スマホメニュー・ウィジェット内のサブメニューを折りたたみ式に設定する
ページ背景	サイトの背景に画像を設定する

テーマカスタマイザーで実際に各デザインを変更してみて、サイトの見た目がどう変わるかを目視で確認しつつ調整していくと良いだろう。

お知らせバーの設定

SWELLで作成したサイト全体に表示される「お知らせバー」の設定。

SWELLのお知らせバーは、サイトやブログ内の全ページの上部に表示される。標準の初期設定では非表示となっている。

イベントやキャンペーン情報など、訪問者に告知したいメッセージを目立たせたいときに役立つだろう。

お知らせバーの設定項目	説明
お知らせバーの表示位置	お知らせバーの表示・非表示と、表示位置を設定する
お知らせバーの文字の大きさ	お知らせバー内に表示するテキストサイズを選択する
表示タイプ	お知らせバーにボタンやリンクを設置したり、テキストを横に流すアニメーションを加えたりなど設定する
お知らせ内容	お知らせバー内に表示するテキストを設定する
リンク先のURL	お知らせバーに設置したリンク先を指定する（表示タイプでボタンかリンクを設定した場合のみ）
ボタンテキスト	お知らせバー内のボタン内のテキストを設定する（表示タイプでボタンを設定した場合のみ）
お知らせバーの背景効果・カラー設定	お知らせバーの色や質感などデザインを設定する

見出しデザイン設定

SWELLで作成したサイトの記事や固定ページで使う見出し（hタグ）のデザインの設定。

SWELLの見出しデザイン設定では、見出しの見た目を変えることができる。

また、全体カラーで設定したメインカラーとは別の色を設定することも可能だ。

見出しの設定項目	説明
見出しのキーカラー	見出しの色に適用される（全体カラーの色と別に設定）
見出し2のデザイン	h2タグの見た目を選択する
見出し3のデザイン	h3タグの見た目を選択する
見出し4のデザイン	h4タグの見た目を選択する

サイトやブログ記事の見出しは、もっとも使用頻度が高いタグで読者の目に留まる部分だ。

そのため、本文のテキストとメリハリが付く見出しデザインを選択することをおすすめする。

目次デザイン設定

SWELLで作成したサイトやブログの記事中に表示される目次のデザインの設定。

SWELLの目次デザイン設定では、目次の見た目だけではなく、表示・非表示の切り替えもできる。

目次デザインの設定項目	説明
目次を表示するかどうか	投稿・固定ページそれぞれに目次を自動生成させるかを選択する
目次のタイトル	目次上部に表示されるタイトルを変更する
目次のデザイン	目次のデザインを変更する
目次のリストタグ	目次の表示形式を「点」か「数字」かを選択する
擬似要素（ドット・数字部分）のカラー	目次の点か数字部分の色を設定する
どの階層の見出しまで抽出するか	見出しに表示する階層（h2～h3）をどこまで表示するか選択する
見出しが何個以上あれば表示するか	記事中に見出しがいくつ以上あれば目次を表示するかを設定する

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

SWELL初期設定として、主に記事中のテキストや装飾のデザインに適用されるエディター設定について説明する。

記事毎にいちいち装飾のカラーやパターンを作る必要はなく、エディター設定さえしておけば一括で適用されるのでとても便利な機能だ。

カラーパレット設定

SWELLで作成したサイトやブログの記事中の「テキストの色や背景色」に利用するカラーセットを設定。

SWELLのカラーパレット設定では、8種類のカラーパレットが作成できる。

記事の本文でテキストを色分けし、メリットやデメリットを強調したいときなどに役立つはずだ。

リストのカラー設定

SWELLで作成したサイトやブログの記事中の「リスト（liタグやolタグ）」に適用されるカラーセットを設定。

SWELLのリストカラー設定では、5種類のリストそれぞれに1色ずつ色を設定できる。

キャプションブロックのカラー設定

SWELLで作成したサイトやブログの記事で利用できる「キャプションブロック（ラベル付き囲い）」に適用されるカラーセットを設定。

SWELLのキャプションブロック設定では、3種類のキャプションボックスにそれぞれ2色を設定できる。

Q&Aのカラー設定

SWELLで作成したサイトやブログの記事で利用できる「FAQ」のカラーセットを設定。

SWELLのQ&A設定では、QとAそれぞれに1色ずつ色を設定できる。

ボーダーのデザイン設定

SWELLで作成したサイトやブログの記事で利用できる「ボーダー（囲い）」のデザインを設定。

SWELLのボーダーセットでは、囲いの線の種類や太さ、色を4種類設定できる。

マーカーの設定

SWELLで作成したサイトやブログの記事中のテキスト装飾「マーカー」の設定。

SWELLのマーカー設定では、マーカーの色とスタイルを4セット設定できる。

本文中にここぞとばかりに主張したいテキストがあるときに役立つだろう。ただし、マーカーの色によっては文字の視認性が悪くなるので、太字（bタグ）と組み合わせて利用するのがおすすめだ。

ボタンのデザイン設定

SWELLで作成したサイトやブログで利用する「ボタン」のデザインを設定。

SWELLのボタン設定では、ボタンのカラーやグラデーション、スタイルやアニメーションなどを3セット設定できる。

アフィリエイトのコンバージョンボタンなどに使うのなら、アニメーションなどで一際目立つボタンにデザインすると良いだろう。

アイコンボックスの設定

SWELLで作成したサイトやブログの記事で利用する「アイコンボックス」のデザインを設定。

SWELLのアイコンボックスの設定では、各種アイコンボックスの色やスタイルを設定できる。

アイコンボックスは、記事中で本文の捕捉や注意喚起を行いたいときに役に立つ。

ふきだしのデザイン設定

SWELLで作成したサイトやブログの記事で利用する「ふきだし」のデザインを設定。

ネットの記事を見ていると、ふきだしを使って本文の一部を会話風に装飾しているサイトやブログを目にしたことは無いだろうか。

SWELLでは、テキストを入れるふきだしのデザインを5セット設定し、登録できる。

ふきだしの使用頻度が高い場合、ふきだし設定ページで画像やデザインを登録しておけば、記事の編集画面で簡単に呼び出すことができるので執筆作業がラクになるだろう。

ブログカードのデザイン設定

SWELLで作成したサイトやブログの記事内のリンクデザイン「ブログカード」のデザイン設定。

SWELLでは、内部・外部リンクにブログカードを設定でき、デザインの種類を選択することができる。

自分のサイトやブログ内の別記事（内部リンク）や、記事を書くときに参考にした別サイト（外部リンク）を目立たせたいときに利用する。

引用のデザイン

SWELLで作成したサイトやブログの記事中で使う「引用」の囲いのデザイン設定。

SWELLでは、他サイトの文章を引用する際に利用する「引用（blockquoteタグ）」の囲いデザインを変更できる。

引用の囲いはデザインというよりも、本文と引用部分を明確に区別し、無断転載ではないことを明示するための重要な部分だ。

また、引用タグを用いることでGoogleに対しコピーコンテンツではないことを伝える目的がある。

SWELL初期設定：トップページの設定

SWELLの初期設定として、トップページのデザインの設定を解説する。

法人のコーポレートサイトやeコマースサイトにおいて、トップページは特に重要な部分なのでデザインにはこだわりたいところだ。

コーディングやデザインの知識が無くてもSWELLテーマでは簡単におしゃれなトップページが作成できるのでご安心を。

SWELLを使ったサイトやブログのトップページの初期設定方法について解説しよう。

メインビジュアルのデザイン設定

SWELLで作成したサイトやブログのトップページに表示する「メインビジュアル（ページ上部に掲載する大きい画像）」の設定。

SWELLのメインビジュアルでは、画像だけではなく動画もメインビジュアルに設定することができる。

メインビジュアルはサイト訪問者の目に最初に飛び込むエリアなので、サイト全体で伝えたいメッセージや印象的な画像や動画を利用すると良いだろう。

メインビジュアルの設定項目	説明
メインビジュアルの表示内容	メインビジュアルの表示を「非表示」「画像」「動画」から選択する
表示設定	メインビジュアルの外側に余白を入れるか、 スクロールボタンを表示するかを選択する（併用設定可能）
メインビジュアルの高さ設定	メインビジュアルのサイズの高さを設定する（初期設定は「PC30vw」「SP50vh」）
画像（動画）の上に表示されるボタンの丸み	メインビジュアル上に表示させるボタンの丸みを選択する
フィルター処理	メインビジュアルにフィルター効果を選択する
オーバーレイカラー	メインビジュアルに被せる色を選択する
画像スライダー設定	メインビジュアルの画像を複数枚設定するとスライダー式にできる
各スライドの設定	メインビジュアル上に掲載するテキストやボタンを設定する

ピックアップバナーの設定

SWELLで作成したサイトやブログのトップページに表示する「ピックアップバナー（任意に設定したページへ飛ぶメニュー）」の設定。

SWELLのピックアップバナーは、基本的に記事スライダーの下のエリアに配置され、訪問者におすすめしたい記事などをアピールできる。

ピックアップバナーの設定項目	説明
バナーレイアウト	ピックアップバナーをパソコン・スマホそれぞれ何列で表示するかを設定する
バナーデザイン	ピックアップバナーの上に表示させるタイトルテキストやバナーのデザインを設定する

なお、SWELLのピックアップバナーエリアは標準の初期設定では表示されていない。

なお、ピックアップバナーと記事スライダーは見た目が似ているが、「任意の記事を表示する」か「新規記事を自動表示する」かで機能が異なる点で区別できる。

また、ピックアップバナーに任意のページを表示させる際の設定場所はカスタマイザーとは異なるため、別に解説する。

ナビゲーションラベルの説明欄に画像URLを入力する場合、あらかじめワードプレスのメディアフォルダ（［メディア］⇒［ライブラリ］）に追加したい画像がアップロードされており、画像URLを取得できるようにしてある必要がある

記事スライダーの設定

SWELLで作成したサイトやブログのトップページに表示する「記事スライダー（記事を並べる要素）」の設定。

SWELLの記事スライダーは、基本的にメインビジュアルの真下のエリアに配置され、標準の初期設定で表示されている。

非表示にすることもできるが、トップページ⇒各記事へのクローラビリティが向上するため、SEOの観点では表示しておくことを推奨する。

記事スライダーの設定項目	説明
記事スライダーを設置するかどうか	記事スライダーの表示・非表示を設定する
ピックアップ対象	特定のカテゴリーかタグ内の記事のみをスライダーに表示する場合に設定する
ピックアップ対象のカテゴリーID（タグ名）	ピックアップ対象を指定する場合、そのカテゴリIDを入力する（タグならタグ名）
並び順	スライダーに表示する記事の順番を「ランダム」「投稿日順（新規記事）」「更新日順」「人気順（アクセス数）」のいずれかから選択する
記事の表示設定	記事タイトルやカテゴリー名の表示位置や、公開・更新日、著者名などの表示設定
スライド設定	記事スライダーの表示記事数、スライドのアニメーション速度やタイミングを設定する

記事スライダーの設定では他にも、記事スライダーのタイトルや背景画像、表示幅や余白量など細かく設定できる。

SWELL初期設定：ヘッダー設定

SWELLの初期設定として、ヘッダーの設定について解説する。

ページ最上部にあるヘッダーは、Googleの検索結果から直接あなたの書いた記事に訪問するユーザーが最初に目にする部分だ。

運営者情報やお問い合わせページなどのグローバルメニューを配置することも多いヘッダーエリアの役割は大きい。

SWELLを使ったサイトやブログのヘッダーの初期設定方法について解説しよう。

※ヘッダー内に任意の要素を配置する方法については、グローバルメニュー設定の章で解説している。

ヘッダーカラーの設定

SWELLで作成したサイトやブログのヘッダーに表示する「ヘッダーカラー」の設定。

SWELLのヘッダーエリアの背景色や文字色を設定できる。標準では背景色に白色、文字色にはやや薄い黒色が設定されている。

ヘッダーカラーの設定項目	説明
ヘッダー背景色	ヘッダーエリアの背景部分の色を設定する
ヘッダー文字色	ヘッダーエリアに記載されるテキストの色を設定する

ヘッダーロゴの設定

SWELLで作成したサイトやブログのヘッダーに表示する「ヘッダーロゴ」の画像設定。

SWELLのヘッダーロゴには、企業ロゴや自社ブランドのロゴ画像を掲載すると良いだろう。

個人ブログの場合でも訪問者に印象を残せるため、サイトロゴをお持ちの人はヘッダーロゴ画像を設定しておくことをおすすめする。

ヘッダーロゴの設定項目	説明
ロゴ画像の設定	ヘッダーロゴに使用する画像ファイルをメディアライブラリから選択するかアップロードする
画像サイズ	PCとスマホそれぞれで表示するヘッダーロゴ画像サイズを選択する

ヘッダーの追従設定

SWELLで作成したサイトやブログのヘッダーを「追従させるか」の設定。

SWELLのヘッダーロゴを追従させると、訪問者がページをスクロールさせても常にヘッダーが表示されるようになる。

追従ヘッダーにメニューや読んでほしい記事へのリンクを掲載すれば誘導しやすい。

しかし、スマホ画面では要素を詰め込み過ぎたヘッダーが追従すると、肝心の記事の読みやすさに悪影響を及ぼす恐れがあるので要注意。

ヘッダーの追従設定項目	説明
ヘッダーの追従設定	PCとスマホ環境でそれぞれヘッダーが追従するかを設定する
追従ヘッダー（PC）の背景不透明度	追従し始めたときのヘッダーの透明度を指定する（0～1の値で設定）

ヘッダーバーの設定

SWELLで作成したサイトやブログのヘッダー上部に表示する「ヘッダーバー」の設定。

SWELLのヘッダーバーは、サイト上部にあるヘッダーのさらに一段上に表示されるエリアだ。

ヘッダーバーにはサイトのキャッチフレーズを記載したり、RSSやサイト内検索、SNSのアイコンを配置したりするのが一般的だ。

ただし、スマホ環境ではヘッダーバーそのものが表示されない点には注意しておこう。

ヘッダーバーの設定項目	説明
ヘッダーバー背景色	ヘッダーバーの背景色を設定する（初期設定では「基本カラー」で設定しているメインカラーが適用）
ヘッダーバー文字色	ヘッダーバーに記載するテキストの色を設定する
表示設定	ヘッダーバーにSNSアイコンを表示したり、ヘッダーバー内に何も配置しなくてもバーを表示したり設定できる

SWELL標準の初期設定では、ヘッダーバーにはサイトのキャッチフレーズが記載されているが、［キャッチフレーズ設定］で表示・非表示やヘッダーエリアのどの部分に記載するかを設定できる。

SWELL初期設定：フッターの設定

SWELLの初期設定として、フッターの設定について解説する。

ページ最下部にあるフッターエリアには、サイトマップや別で運営しているサイトへのリンクを掲載したりするのに利用する。

SWELLを使ったサイトやブログのフッターの初期設定方法について解説しよう。

フッター内に任意の要素を配置する方法については、ウィジェット設定の章で解説している。

フッターカラーの設定

SWELLで作成したサイトやブログの「フッターカラー」の設定。

SWELLのヘッダーエリアの背景色や文字色を設定できる。標準では背景色に白色、文字色にはやや薄い黒色が設定されている。

フッターの設定項目	説明
フッター背景色	フッターの背景色を設定する
フッター文字色	フッターに記載するテキストの色を設定する
ウィジェットエリアの背景色	フッター内のウィジェットの背景色を設定する
ウィジェットエリアの文字色	フッター内のウィジェットのテキストの色を設定する

コピーライトの設定

SWELLで作成したサイトやブログのフッターに記載する「コピーライト」の設定。

SWELLのフッター最下部には、サイトの著作権保護のためのコピーライトが表記される。

標準の初期設定では「©サイト名.」といったように記載されるが、サイト名を変更した場合などに併せて設定しておこう。

コピーライトの設定項目	説明
コピーライトのテキスト	コピーライト部分に記載するテキストを設定する

フッターのタイトルデザインの設定

SWELLで作成したサイトやブログの「フッターのタイトルデザイン」の設定。

SWELLのフッターのタイトルデザイン設定では、フッターに配置したウィジェットのタイトルを装飾することができる。

SWELL初期設定：サイドバーの設定

SWELLの初期設定として、「サイドバー」の設定について解説する。

サイドバーには、サイト運営者のプロフィール、カテゴリ一覧、CTA…などと、とにかくあらゆる要素を置くことができる。

サイドバーはスマホ環境だとメインエリアの下部に配置されるが、PCの表示ではメインエリアの横に常に表示されるため重要なエリアといえるだろう。

SWELLを使ったサイトやブログのサイドバーの初期設定方法について解説しよう。

サイドバー内に任意の要素を配置する方法については、ウィジェット設定の章で解説している。

サイドバーの表示設定

SWELLで作成したサイトやブログの「サイドバーの表示」についての設定。

SWELLのサイドバーは標準の初期設定では右側に表示されている。

好みに応じて配置を左右変更したり、サイドバーを特定のページだけ表示したりすることが可能だ。

サイドバーの表示の設定項目	説明
サイドバーを表示するかどうか	トップページ、投稿ページ、固定ページそれぞれサイドバーを表示するか設定できる
サイドバーの位置	サイドバーの表示位置を左右どちらか選択する

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

SWELLで作成したサイトやブログの「サイドバーのタイトルデザイン」の設定。

SWELLのサイドバーのタイトルデザイン設定では、サイドバーに配置したウィジェットのタイトルを装飾することができる。

SWELL初期設定：ウィジェットの設定

SWELL初期設定として、「ウィジェット」について解説する。

SWELLのウィジェットの設定では、サイドバー・フッターのエリアに「新着記事」「人気記事」「カテゴリー」「広告」「運営者プロフィール」など自由な要素を配置することができる。

サイドバー・フッターエリアへの要素の配置は、共通してウィジェット設定画面で行う。

ちなみに、HTMLの知識が必要となるが「カスタムHTML」のウィジェットでは、HTMLコードで自由な要素を作ることができる。

SWELL初期設定：グローバルナビ（ヘッダーメニュー）の設定

SWELL初期設定として、「グローバルナビ（ヘッダーメニュー）」について解説する。

SWELLのグローバルナビの設定では、任意のページをヘッダーメニューとして配置できる。

ヘッダーメニューでは「運営者情報」「プライバシーポリシー」「お問合せフォーム」などのページへのリンクをメニューにして配置するのが一般的だろう。

ちなみに、SWELL標準の初期設定では固定ページがヘッダメニューに配置される。

SWELL初期設定：SNS情報

SWELL初期設定として、「SNS情報」について解説する。

SWELLのSNS情報の設定では、各SNSのURLを入力することでヘッダーバーエリアにSNSのリンクが追加される。

SNS情報に追加できるSNSは次の通りだ。

SWELL初期設定：Googleアナリティクスとの連携

SWELL初期設定として、「Googleアナリティクス（GA）」との連携設定について解説する。

GoogleアナリティクスとSWELLを連携する手順は次の通りだ。

手順④で必要となるGoogleアナリティクスの計測IDの確認方法は次の通りだ（GA4の場合）。

SWELL初期設定：Google Search Consoleとの連携

SWELL初期設定として、「Google Search Console（サチコ）」との連携設定について解説する。

Googleアナリティクスとの連携設定同様、プラグイン「SEO SIMPLE PACK」を使った方法を採用している。

GoogleサーチコンソールとSWELLを連携する手順は次の通りだ。

所有権が認証されると、サーチコンソールでのサイトデータの計測が始まる。

集計が終わるのは約1日かかるので待とう。

SWELL初期設定：Googleアドセンス広告の設定

SWELL初期設定として、「Google AdSense（アドセンス）」との連携設定について解説する。

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

SWELL初期設定として、「高速化」の設定について解説する。

SWELLは元々ページの表示速度が速いことで有名だが、標準の初期設定で高速化設定はほぼOFFになっているため、最適化することでさらに高速化できる。

ページスピードの改善はユーザーの離脱率（記事を読む前に戻る人の割合）の軽減に繋がるため、速いに越したことはない。

基本的には全部チェックを入れれば良いのだが、SWELLの高速化設定ページの各項目ごとにおすすめの設定を紹介する。

高速化の設定項目	おすすめの設定
動的なCSSをキャッシュする	ON
ヘッダーをキャッシュする	ON
サイドバーをキャッシュする	ON
下部固定メニューをキャッシュする	ON
スマホ開閉メニューをキャッシュする	ON
トップページコンテンツをキャッシュする	ON
内部リンクのブログカードをキャッシュする	ON
外部リンクのブログカードをキャッシュする	ON
ブログカードのキャッシュ期間	30日
SWELLのCSSをインラインで読み込む	ON
コンテンツに合わせて必要なCSSだけを読み込む	ON
フッター付近のCSSを遅延読み込みさせる	OFF
記事下コンテンツを遅延読み込みさせる	ON
フッターを遅延読み込みさせる	ON
画像等のLazyload	loading=”lazy”を使用する
スクリプトの遅延読み込み	ON
遅延読み込み対象にするスクリプトのキーワード	twitter.com/widgets.js, instagram.com/embed.js, connect.facebook.net, assets.pinterest.com,
スクリプトの遅延読み込み機能をオフにするページ	空欄
遅延させる秒数	5秒
高速化の種類	Prefetch
Pjaxで遷移させないページのURL	空欄
Prefetchさせないページのキーワード	空欄

SWELLテーマで作成したサイトやブログを高速化するためには、上記の高速化設定以外にも対策方法がある。

とはいえ、サイトの高速化にこだわりだすとキリがないのも事実だ。

サイトの表示スピードは、Googleが提供する「PageSpeed Insights（ページスピードインサイト）」で計測し、あまりにもページスコアが低い（赤色表示）場合にのみ対策するのがおすすめだ。

あわせて読みたい

PageSpeed Insights

【SWELLの始め方】着せ替えデモサイトでブログをカスタマイズ

SWELLの公式サイトには、サイトの着せ替え用テンプレート「デモサイト」が公開されている。

SWELLはサイトデザインの設定項目が多いが故に、初心者がデザイン設定に手を出すと途方もない時間を費やしてしまうのが難点だ。

「デザインのカスタマイズ設定に時間をかけたくないが、せっかくだしオシャレなサイトに仕上げたい」

と、思うのであれば、SWELLのデモサイトへの着せ替えを検討してみては如何だろうか。また、好みのデモサイトをベースに、そこからデザインをカスタマイズしていくのも一つの手だろう。

SWELLのデモサイトへの着せ替え方法について解説しておこう。

SEWLLの始め方：まとめ

SWELLをワードプレスに導入しようと思うと、サイトやブログ初心者の方は躓くかもしれない。また、SWELLはカスタマイズ性に優れる分、デザインなどの設定項目で戸惑ってしまいがちだ。

そのため、SWELLの初期設定については、当記事を読み返しつつゆっくりと慣れていって欲しい。

SWELLテーマは、高い機能性やカスタマイズ性が非常に高い。そして何より、とてもオシャレなサイトが出来上がる。

あなたもSWELLのテーマに慣れてさえしまえば、サイト運営が楽しくて仕方なくなるはずだ。