MENU

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

SWELLの始め方/初期設定

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

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

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

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

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

目次

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

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

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

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

SWELLの始め方3ステップ
※クリックで解説している章にジャンプ

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

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

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

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

SWELLの購入方法

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

  1. 公式サイトからダウンロードページにアクセスする
  2. 利用規約に同意し購入ボタンをクリックする
  3. クレジットカード情報を入力し、テーマを購入する

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

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

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

SWELLの始め方(インストール/購入方法):トップページからダウンロードページに移動する

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

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

SWELLの始め方(インストール/購入方法):利用規約に同意する

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

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

SWELLの始め方(インストール/購入方法):クレジットカード情報を入力しテーマを購入する

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

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

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

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

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

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

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

  1. 公式フォーラムにアクセスする
  2. SWELLERS’に新規会員登録する
  3. 登録完了メールを確認する

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

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

SWELLの始め方(インストール/会員登録方法):トップページから公式フォーラムに移動する

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

SWELLの始め方(インストール/会員登録方法):公式フォーラムから新規会員登録ページに移動する

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

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

SWELLの始め方(インストール/会員登録方法):SWELLERS'に新規会員登録する

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

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

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

引用:SWELL公式サイト(2022/11/17時点)

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

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

SWELLの始め方(インストール/会員登録方法):SWELLERS'の登録確認メール

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

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

SWELLのダウンロード方法

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

  1. SWELLERS’にログインする
  2. テーマファイルをダウンロードする

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

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

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

SWELLの始め方(インストール/ダウンロード方法):SWELLERS'にログインする

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

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

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

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

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

SWELLの始め方(インストール/ダウンロード方法):SWELLERS'からテーマファイルをダウンロードする

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

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

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

SWELLのインストール方法

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

  1. WordPress管理画面テーマページの[新規追加]をクリックする
  2. [テーマのアップロード]をクリックする
  3. [ファイルを選択]をクリックする
  4. 「親テーマ(swell-x-x-x-x)」のファイルを選択する
  5. [今すぐインストール]をクリックする
  6. [テーマページに移動]をクリックする
  7. 再度[新規追加]をクリックする
  8. 再度[テーマのアップロード]をクリック
  9. 再度[ファイルを選択]をクリック
  10. 「子テーマ(swell_child)」のファイルを選択する
  11. [今すぐインストール] をクリック
  12. 子テーマを有効化する

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

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

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

SWELLの始め方(インストール/アップロード方法):WordPressに親テーマを導入01

SWELLインストール方法②:[テーマのアップロード]をクリックする

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

SWELLの始め方(インストール/アップロード方法):WordPressに親テーマを導入02

SWELLのインストール方法③:[ファイルを選択]をクリックする

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

SWELLの始め方(インストール/アップロード方法):WordPressに親テーマを導入03

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

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

SWELLの始め方(インストール/アップロード方法):WordPressに親テーマを導入04

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

SWELLインストール方法⑤:[今すぐインストール]をクリックする

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

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

SWELLの始め方(インストール/アップロード方法):WordPressに親テーマを導入05

SWELLインストール方法⑥:[テーマページに移動]をクリックする

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

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

SWELLの始め方(インストール/アップロード方法):WordPressに親テーマを導入06

SWELLインストール方法⑦:再度[新規追加]をクリックする

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

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

SWELLの始め方(インストール/アップロード方法):WordPressに子テーマを導入01

SWELLインストール方法⑧:再度[テーマのアップロード]をクリック

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

SWELLの始め方(インストール/アップロード方法):WordPressに子テーマを導入02

SWELLインストール方法⑨:再度[ファイルを選択]をクリック

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

SWELLの始め方(インストール/アップロード方法):WordPressに子テーマを導入03

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

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

SWELLの始め方(インストール/アップロード方法):WordPressに子テーマを導入04

SWELLインストール方法⑪:[今すぐインストール] をクリック

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

SWELLの始め方(インストール/アップロード方法):WordPressに子テーマを導入05

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

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

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

SWELLの始め方(インストール/アップロード方法):WordPressに子テーマを導入06

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

  • SWELLの親テーマと子テーマ両方がインストールされていること
    ※以下の画像では、SWELL導入前に適用していたCocoonテーマで隠れてしまっているが、ちゃんと親テーマもインストールされている
  • 「子テーマ(SWELL CHILD)」が有効になっていること
SWELLの始め方(インストール/アップロード方法):WordPressのテーマページでインストールを確認

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

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

SWELLの始め方(インストール/アップロード方法):ユーザー認証が完了していない際の警告文

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

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

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

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

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

SWELLユーザー認証方法

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

  1. WordPress管理画面のアクティベート設定で認証リクエストを送信する
  2. 受信したメールを開き、認証用URLをクリックする
  3. 公式フォーラムでユーザー認証の完了を確認する

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

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

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

SWELLの始め方(ユーザー認証方法):WordPressのテーマアクティベート設定画面

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

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

SWELLの始め方(ユーザー認証方法):ユーザー認証用URLが添付されたメール

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

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

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

SWELLの始め方(ユーザー認証方法):公式フォーラムでユーザー認証の完了を確認

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

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

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

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

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

  • テーマの標準機能だけで補いきれない機能を、プラグインで補完する必要があるから
  • 一般的に必須とされているプラグイン機能を標準搭載しており、機能が重複するから

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

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

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

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

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

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

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

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

SWELL推奨プラグイン重要度用途説明
SEO SIMPLE PACKSEOSWELL開発者が作成したシンプルなSEOプラグイン。これがあれば「Yoast SEO」や「All in One SEO」は不要
XML Sitemap & Google NewsSEOXMLサイトマップの作成プラグイン。「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設定]⇒[エディター設定]⇒[カラーセット]⇒[カラーパレット設定

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

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

(使用例)

SWELLのカラーパレット設定では、このようにテキストの色を変更することができる

SWELLのカラーパレット設定では、このようにテキストの背景色にも設定することができる

リストのカラー設定

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

リストカラーの設定場所

SWELL設定]⇒[エディター設定]⇒[カラーセット]⇒[リスト設定

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

(使用例)
  • SWELLのリストカラーで設定では、リストの色に適用される
  • SWELLのリストカラーで設定では、リストの色に色に適用される
  • SWELLのリストカラーで設定では、リストの色に色に適用される
  1. SWELLのリストカラーで設定では、数字リストの色にも適用される
  2. SWELLのリストカラーで設定では、数字リストの色にも適用される
  3. SWELLのリストカラーで設定では、数字リストの色にも適用される

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

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

リストカラーの設定場所

SWELL設定]⇒[エディター設定]⇒[カラーセット]⇒[キャプションブロック設定

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

(使用例)
キャプションブロック

SWELLのキャプションブロック設定では、キャプション部分と内側の背景色の色を変更できる

キャプションブロック

SWELLのキャプションブロック設定では、キャプション部分と内側の背景色の色を変更できる

キャプションブロック

SWELLのキャプションブロック設定では、キャプション部分と内側の背景色の色を変更できる

Q&Aのカラー設定

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

リストカラーの設定場所

SWELL設定]⇒[エディター設定]⇒[カラーセット]⇒[Q&A設定

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

(使用例)
SWELLのQ&A設定では何ができますか?

このように、QとAそれぞれに色を設定することができます。

ボーダーのデザイン設定

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

ボーダーデザインの設定場所

SWELL設定]⇒[エディター設定]⇒[ボーダーセット

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

(使用例)

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

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

マーカーの設定

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

ボーダーデザインの設定場所

SWELL設定]⇒[エディター設定]⇒[マーカー

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

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

(使用例)

SWELLのマーカー設定では、テキストを装飾するマーカーの色やスタイルを変更できる

マーカーでテキストを装飾すると、読みづらくなるので太字と組み合わせると良いだろう

ボタンのデザイン設定

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

ボタンデザインの設定場所

SWELL設定]⇒[エディター設定]⇒[ボタン

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

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

アイコンボックスの設定

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

アイコンボックスデザインの設定場所

SWELL設定]⇒[エディター設定]⇒[アイコンボックス

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

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

(使用例)

SWELLのアイコンボックスは捕捉文があるときに利用すると良いだろう

アイコンボックスを使うと、読者への注意喚起文を目立たせることができる

ふきだしのデザイン設定

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

ふきだしデザインの設定場所

SWELL設定]⇒[エディター設定]⇒[ふきだし

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

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

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

(使用例)

SWELLのふきだし設定では、このように吹き出しのカラーを変更できる

「発言」風や「心の声」風にしたり、外枠を付けたりなど吹き出しのデザインも変更可能だ

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

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

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

SWELL設定]⇒[エディター設定]⇒[その他

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

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

(使用例)

SWELLでサイトやブログを作るときにおすすめのレンタルサーバーは次の記事で紹介している(内部リンク)。

なお、SWELLの使い方で困ったら公式フォーラム「SWELLERS’」で質問してみると良いだろう(外部リンク)。

SWELLERS' | SWELLユーザー専用サ...

引用のデザイン

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

引用デザインの設定場所

SWELL設定]⇒[エディター設定]⇒[その他

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

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

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

(使用例)

ワードプレステーマ「SWELL」では、購入後のキャンセルや返品・返金には応じてもらえないので注意しよう。

本テーマは、デジタルデータという商品の性質上、商品送付後のキャンセル・返品、及び返金はできません。重複購入・商品違いについても対応はいたしかねますので充分ご注意ください。また、通信販売のためクーリングオフは適応されません。デモサイトを十分にご確認の上、ご購入ください。

引用:SWELL公式サイト/ご利用規約(2022/11/19時点)

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

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

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

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

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

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

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

メインビジュアルの設定場所

外観]⇒[カスタマイズ]⇒[トップページ]⇒[メインビジュアル

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

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

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

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

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

ピックアップバナーデザインの設定場所

外観]⇒[カスタマイズ]⇒[トップページ]⇒[ピックアップバナー

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

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

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

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

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

ピックアップバナーに表示するページの設定場所

外観]⇒[メニュー

  1. メニュー画面右上にある[表示オプション▼]をクリックで開き、「詳細メニュー設定を表示」の項目内の「説明」にチェックを入れ、表示オプションを閉じる
  2. メニュー画面内の[新しいメニューを作成しましょう]をクリック
  3. 「メニュー構造」の項目内にある「メニュー名」に任意の名前(例:ピックアップバナー)を入力
  4. 「メニュー構造」の項目内「メニュー設定」内の「ピックアップバナー」にチェックを入れる
  5. 「メニュー項目を追加」の項目内にある固定ページや投稿ページなど任意のページにチェックを入れ、[メニューに追加]をクリック
  6. メニューに追加し、「メニュー構造」に移動した記事を開き、「ナビゲーションラベル(ピックアップバナーに表示するテキスト)」や「説明(ページの説明や画像URLを挿入できる)」を入力
  7. ナビゲーションラベルに配置したいページを追加し終わったら、右下の[メニューを保存]をクリックして完了

ナビゲーションラベルの説明欄に画像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のウィジェットの設定では、サイドバー・フッターのエリアに「新着記事」「人気記事」「カテゴリー」「広告」「運営者プロフィール」など自由な要素を配置することができる。

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

  1. ウィジェット設定画面の右にある[共通サイドバー]をクリックして開く
  2. ウィジェット設定画面の左にある「利用できるウィジェット」を[共通サイドバー]にドラッグ&ドロップして移動する
  3. [共通サイドバー]に移動したウィジェットをクリックで開き、ウィジェット内容を編集する

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

SWELL初期設定:グローバルナビ(ヘッダーメニュー)の設定

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

グローバルメニューの設定場所

外観]⇒[メニュー

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

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

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

  1. 「メニュー構造」の項目内にある「メニュー名」に任意の名前(例:グローバルナビ)を入力し[メニューを作成]をクリック
  2. 「メニュー構造」の項目内「メニュー設定」内の「グローバルナビ」にチェックを入れ、[メニューを保存]をクリック
  3. 「メニュー項目を追加」の項目内にある固定ページや投稿ページなど任意のページにチェックを入れ、[メニューに追加]をクリック
  4. メニューに追加し、「メニュー構造」に移動した記事を開き、「ナビゲーションラベル(メニューのタイトル)」や「説明(ページの説明や画像URLを挿入できる)」を入力
  5. ヘッダーに配置したいページを追加し終わったら、右下の[メニューを保存]をクリックして完了

SWELL初期設定:SNS情報

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

SNS情報の表示設定場所

外観]⇒[カスタマイズ]⇒[SNS情報

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

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

  • Facebook
  • Twitter
  • Instagram
  • TikTok
  • 楽天ROOM
  • LINE
  • Pinterest
  • Github
  • YouTube
  • Amazon欲しいものリスト

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

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

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

  1. ワードプレス管理画面の左メニューにある[プラグイン]⇒[新規追加]から「プラグイン追加ページ」に移動
  2. プラグインの検索バーから「SEO SIMPLE PACK」を検索し[今すぐインストール]⇒[有効化]をクリック
  3. ワードプレス管理画面の左メニューに追加された[SEO PACK]⇒[一般設定]⇒[Googleアナリティクス]と移動
  4. 「[トラッキングID]または[測定ID]」の入力欄に、GoogleアナリティクスのトラッキングID(もしくは計測ID)を入力
  5. [設定を保存する]をクリックして連携完了

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

  1. Googleアナリティクスの左下にある、歯車アイコンの[管理]をクリック
  2. プロパティの項目内の[データストリーム]をクリック
  3. データストリーム内の自身のサイトをクリック
  4. 「ストリームの詳細」の項目内の「測定ID」の部分にある「G-XXXXXXXXXX」が計測ID

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

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

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

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

  1. Google Search Consoleにアクセスし、プロパティタイプ「URLプレフィックス」にサイトURLを入力し[続行]をクリック
  2. 「所有権の確認」画面をややスクロールしたところにある「その他の確認方法」内の「HTMLタグ」をコピーする
  3. ワードプレス管理画面を開き、左メニューの[SEO PACK]⇒[一般設定]⇒[ウェブマスターツール]と移動
  4. 「ウェブマスターツール認証コード」画面の「Googleサーチコンソールの認証コード」の入力欄に、先程コピーしたサーチコンソールの「HTMLタグ」を貼り付け
  5. [設定を保存する]をクリックする
  6. 再度Google Search Consoleに戻り、[確認]をクリックすると所有権の確認が始まる

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

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

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

  1. Google AdSenseにアクセスし、「既存の広告ユニット」の広告一覧から広告コードを開く(< >ボタン)
  2. 広告コードをコピー
  3. ワードプレス管理画面を開き、左メニューの[SWELL設定]⇒[SWELL設定]⇒[広告コード]と移動
  4. 各入力欄に対応する広告コードを貼り付け[変更を保存]をクリック

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

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

高速化の設定場所

SWELL設定]⇒[SWELL設定]⇒[高速化

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

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

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

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

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

  • レンタルサーバーを高速なものに乗り換える
  • 不要なプラグインを削除する
  • サイト内の画像をWebP形式に対応させる
  • サイトのフォントを「游ゴシック」か「ヒラギノゴシック>メイリオ」に設定する

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

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

あわせて読みたい

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

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

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

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

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

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

  1. ワードプレス管理画面の左メニューにある[プラグイン]⇒[新規追加]から「プラグイン追加ページ」に移動
  2. プラグインの検索バーから「Customizer Export/Import」を検索し[今すぐインストール]⇒[有効化]をクリック
  3. SWELL公式ページを開き、右上の[デモサイト]をクリック
  4. SWELLのデモサイト一覧が表示されるので、気になるデザインのサムネイルをクリックして確認
  5. SWELLのデモサイト一覧の真下に記載されているテキストリンク[デモサイトのデザインに着せ替えるためのデータも配布しています!]をクリック
  6. SWELL公式フォーラムのデモデータダウンロードページに遷移するので、先程確認したデモサイトに対応するデータをダウンロード
  7. ワードプレス管理画面の左メニューにある[外観]⇒[カスタマイズ]からカスタマイザーを開く
  8. カスタマイザーの最下部にある[Export/Import]を開き、[参照]からデモデータを読み込む
  9. [Download and import image files?]にチェックを入れ、[Import]をクリックするとデモサイトが適用される

SEWLLの始め方:まとめ

SWELLの始め方の要点
  • SWELLの始め方は「インストール」⇒「ユーザー認証」⇒「プラグイン導入」の3ステップ
  • SWELLの初期設定項目は非常に多いが、始め方の3ステップさえ完了すれば記事を書き始めることができる
  • SWELLのデザイン設定が手間な場合は、公式テンプレート「デモサイト(着せ替え)」で簡単に設定できる

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次