この記事では、「SWELLの購入〜インストール方法」と「SWELL設定」について、迷わず進められるよう分かりやすく解説していきます。
SWELL設定では、テーマ特有の機能を最大限に活かすための調整・設定を行います。
- 不要な読み込みを減らして、サイトの表示速度の最適化する
- デザインや動作の安定性を高める
- SEOやセキュリティを強化する
正しく設定することで、「ページの読み込みが速くなる、Googleなどの検索エンジンに好かれやすくなる、運営や管理がしやすくなる」という三拍子揃ったメリットがあります。
専門用語や設定項目でややこしい部分も出てきますが、本記事に沿って順番に進めていけば大丈夫です。
それでは、一緒に丁寧に設定していきましょう！
- SWELLを購入したけど、設定がよく分からない
- インストール後に何をすればいいか迷っている
- 項目の意味を理解しながら、自分にとって最適な設定をしたい
テーマSWELLの購入方法とインストール方法
まずは、SWELLをブログに導入する手順から始めましょう。
すでにインストールが完了していて、SWELL設定から進めたい方は、下のSWELL設定の基本設定までスキップしてOKです。
- SWELLの購入
- 新規会員の登録
- SWELLのダウンロード
- WordPressにインストール
- SWELLのユーザー認証
① SWELLの購入
決済が完了すると株式会社LOOSから領収書メールが届きます。
メールには、SWELL本体（親テーマ）のダウンロードリンクが記載されています。
ただし、ここではまだダウンロードせず、次の手順「② 新規会員の登録」に進みます。
② 新規会員の登録
SWELLをダウンロードするには、まずSWELLの会員登録を行います。
必要項目を入力したら、利用規約に同意し「登録する」をクリックします。
③ SWELLのダウンロード
会員登録が完了したら、「マイページ」からSWELLのテーマをダウンロードします。
「マイページ」を下にスクロールし、SWELL製品ダウンロードの項目を見つけます。
そこから、SWELL本体最新版（親テーマ）と子テーマをクリックしてそれぞれダウンロードします。
もし「マイページ」の場所が分からなくなった場合は、「トップページ ＞ フォーラム ＞ ログイン」 の順に進み、会員登録時に設定したメールアドレスとパスワードでログインしましょう。
④ WordPressにインストール
WordPressにSWELLをインストールしていきます。
親テーマ・子テーマの順でインストールし、子テーマを有効化する設定を行います。
親テーマを有効化した状態でCSSなどをカスタマイズすると、SWELLがアップデートされたときに、せっかくのカスタマイズ内容が消えてしまうことがあります。
しかし、子テーマを有効化すれば、親テーマがアップデートされてもカスタマイズ内容はそのまま残ります。そのため、通常は子テーマを有効化して使うのがおすすめです。
もし、「今後もカスタマイズは行わない」という場合は、親テーマを有効化したままでも問題ありません。
親テーマのインストール
「ファイルを選択」をクリックし、SWELLの親テーマ（swell-◯.◯.◯.◯.zip）を選択します。
選択できたら、「今すぐインストール」をクリックします。
ここまで完了したら、次に子テーマをインストールしていきます。
子テーマのインストール
親テーマと同様の手順で、子テーマ（swell_child.zip）をインストールします。
「ファイルを選択」をクリックし、SWELLの親テーマ（swell_child.zip）を選択します。
選択できたら、「今すぐインストール」をクリックします。
これで、SWELLのインストールとテーマ設定が完了しました。
次に、SWELLのユーザー認証を行います。
⑤ SWELLのユーザー認証
WordPressでSWELのユーザー認証を行うと、SWELLのアップデートやサポートを利用できるようになります。
安全に使い続けるためにも必ず行いましょう。
「SWELLERS’会員アドレス」を入力し、「認証リクエスト」を送信をクリックします。
SWELLERS’会員アドレスとは、SWELL購入時に登録した会員メールアドレスのことを指します。
これで、SWELLのインストールと認証が完了です。
次から「SWELL設定」をおこないます。
SWELL設定の基本構成｜まずは７つのタブをチェック
SWELL設定には、以下の７つのタブ（設定項目）があります。
少し内容は多いですが、この記事では１つずつ順番に解説していくので、気になる部分だけを選んで読んでも大丈夫です。
- 高速化タブ
- 構造化データタブ
- jQueryタブ
- Font Awesomeタブ
- 機能停止タブ
- 広告コードタブ
- リセットタブ
SWELL設定の実践編｜おすすめの設定内容まとめ
次に、各タブで設定できる内容を順番に解説していきます。
ここで紹介する設定の中には、「これだけは必ず設定してほしいもの」と「運営スタイルによって調整が必要なもの」があります。
それぞれの違いを踏まえて、自分のブログ運営に合う設定を選んでいきましょう。
1. 高速化タブ
画像の読み込みやキャッシュなど、ページの表示速度を向上させるための設定ができます。
キャッシュ機能
| 項目 | 設定 |
|---|---|
| 全項目 | チェックを入れる |
| ブログカードのキャッシュ期間 | デフォルト（30日） |
ファイルの読み込み
サイトを開いたときに、画像やデザインなどを読み込む仕組みを設定します。
この設定でページを早く表示できるようになります。
| 項目 | 設定 |
|---|---|
| SWELLのCSSをインラインで読み込む | チェックしない（推奨） |
| コンテンツに合わせて必要なCSSだけを読み込む | チェックを入れる |
| フッター付近のCSSを遅延読み込みさせる | チェックを入れる |
ここでの注意は、「SWELLのCSSをインラインで読み込む」と「フッター付近のCSSを遅延読み込みさせる」は、どちらかしかONにできません。
それぞれのおすすめのパターンは以下になります。
ページのデータがやや重くなりやすいですが、記事数が少ないブログやLP型サイトはこちらがおすすめ。
- ページ数が少ないブログやLP型サイトを運営している人
- ページごとの表示速度を重視したい人
読者が最初に目にする部分（ファーストビュー）を優先して速く表示させたい場合はこちらがおすすめ。
まれにページ下部のレイアウトが一瞬崩れて見えることがあります。
- ファーストビューの表示速度を優先したい人
- 記事数が多いサイトや、短めの記事が中心のブログを運営している人
自分のブログの構成、記事の長さ、読者の行動パターンを考えて選びましょう。
遅延読み込み機能
ページを開いたときに、必要なコンテンツを少しずつ読み込む機能です。
すべてのデータをいっきに読み込まないことでサイトの負担を減らし、最初に見える部分（ファーストビュー）を早く表示できるようにします。
- コンテンツの遅延読み込み
-
項目 設定 記事下コンテンツを遅延読み込みさせる チェックを入れる フッターを遅延読み込みさせる チェックを入れる - 画像等のLazyload
-
ページを開いた時に、画像など必要な部分だけを先に読み込み、スクロールして表示されるタイミングで画像などを読み込む仕組みです。
項目 設定 loading=“lazy”を使用する チェックを入れる ここは、SWELL利用者でも意見が分かれるポイントです。
「スクリプト（lazysizes.js）を使って遅延読み込みさせる」方法もありますが、上級者向けで少し複雑なので、ここでは扱いやすい「loading=”lazy”」の使用をおすすめしています。 - スクリプトの遅延読み込み
-
スクリプトの遅延読み込みとは、SNSの埋め込みや機能の読み込みをあと回しにして、ページの表示速度を優先するための設定です。
項目 設定 スクリプトを遅延読み込みさせる オンにする 遅延読み込み対象にするスクリプトのキーワード 自分に必要なスクリプトを入力
※ SWELL公式サイトを参考スクリプトの遅延読み込み機能をオフにするページ 特になければブランクでOK 遅延させる秒数 デフォルト（５秒）
遅延読み込みの対象にするスクリプトを判断する目安は次のとおりです。
- 使わない機能やSNS、遅延させたくないもの ➡︎ 入力しない
- 記事の最後のほうに埋め込む機能やSNS、遅延させても問題ないもの ➡︎ 入力する
ページ遷移高速化
ユーザーがリンクをクリックしたときに、リンク先のページを「どう表示させるか・どう読み込むか」を決める設定です。
Prefetchとは…
リンクにカーソルを合わせた時（ホバー）に、裏でリンク先のページを先読みしておく機能です。
クリックするとにすぐ表示されるので、ユーザーとしては体感的に「速くなった」と感じやすくなります。
- 高速化の種類
-
項目 設定 使用しない 安定表示を優先して初期はこちらを選択 Prefetch アクセス数（PV）が増えてきたらこちらを選択 「使用しない」と「Prefetch」の使い分けガイドブログ運営の初期は、安定した表示を優先して『使用しない』を選ぶのがおすすめです。
アクセスが増えてきたら、ページ遷移がスムーズになりユーザー体験（UX）が向上する「Prefetch」に切り替えるのもありです。ユーザーファーストな表示を目指すタイミングで試してみましょう。
まれに、環境やサーバーによっては重く感じる場合もあるので、もし動作が気になったら「使用しない」に戻してOKです。
最後に忘れずに「変更を保存」をクリックして、高速化タブの設定は完了です。
2. 構造化データタブ
次に、検索エンジンにページの内容を正確に伝えるための情報（構造化データ）を設定します。
この設定を行うことで、SEOの強化やサイトの信頼性向上につながるため、必ず設定しておきましょう。
法人や企業サイト向けの項目もありますが、ここでは個人ブロガーとして運営する入力内容を中心に解説します。
JSON-LD
JSON-LD（ジェイソン・エルディー）は、Googleなどの検索エンジンにこのページはどんな内容なのかを伝えるための構造化データの記述フォーマットです。
-
項目 設定 JSON-LDを自動生成する ONにする - 運営組織の情報
-
項目 設定 運営組織の名前 サイト名や運営者名を入力 運営組織のURL サイトのURLを入力 運営組織の別名 活動名を入力（特になければブランクでOK） 運営組織の関連URL SNSや他に運営しているサイトがあれば入力 運営組織のロゴ サイトロゴやシンボルの画像を設定 -
運営組織のロゴのサイズについて
公式な情報は出ていませんが、Googleの構造化データ推奨（112px以上）と、SWELL側の出力仕様を考慮すると、500〜600px程度の正方形の画像を用意しておくのが無難かなと感じています。
- 運営組織の設立者
-
項目 設定 設立者の名前 サイトを作った人（活動名・ニックネーム可） 設立者のURL プロフィールページURL 設立者の別名 活動名を入力（特になければブランクでOK） 設立者の関連URL SNSや他に運営しているサイトがあれば入力
最後に、「変更を保存」をクリックします。
3. jQuery関連タブ
最近はJavaScriptが進化して、jQueryを使わないテーマやプラグインも増えてきました。
とはいえ、一部のプラグインやウィジェットではjQueryに依存していることもあるので、適切に読み込む設定をしておくと安心です。
jQueryの読み込み
-
項目 設定 jQueryをwp_footerで登録する チェックを入れる jquery-migrateを読み込まない チェックを入れる jQueryを強制的に読み込む チェックしない
迷ったら、この設定でOKです。
これらの内容に詳しくない場合でも、上記の設定にしておけば表示速度と安定性のバランスが良くなります。
最後に、「変更を保存」をクリックします。
4. Font Awesome
アイコンフォント「Font Awesome」を使うかどうかを設定します。
HTMLやカスタムブロックでFont Awesomeのアイコンを使いたい場合は、チェックを入れましょう。
SWELLの標準パーツだけを使う場合はチェック不要です。
不要な場合は、読み込みを止めることでサイトの軽量化につながります。
Font Awesomeの読み込み
- 読み込み方
-
項目 設定 読み込まない 選択する（推奨） CSSで読み込む 選択しない（アイコンを利用する場合はこちらを選択） JSで読み込む 選択しない - バージョン
-
上記で「読み込まない」を選択するなら 、どちらでもOKです。
もしFont Awesomeを利用するなら、新しくアイコン数が多いv6がおすすめです。
最後に、「変更を保存」をクリックします。
5. 機能停止タブ
この設定は、人によって重視するポイントや使い方が異なるため、明確な正解はありません。
ここでは私のおすすめの設定を紹介しますが、「自分には必要かも」と感じた項目があれば、好みに合わせて調整してください。
SWELLの機能
-
下記に、SWELLの機能の各項目についてまとめたので、気になる項目があればチェックしてみてください。
-
「ページ表示時のアニメーション」を停止する
ページを開いたときにふわっと表示されるアニメーションを停止します。
サイトの負荷と表示速度を考えて停止するのがおすすめです。
「スムーススクロール」を停止する
ページ内リンク（アンカーリンク）をクリックしたときに、目的の位置まですーっと滑らかにスクロールする機能です。
見た目より速度や反応の速さを重視するなら停止がおすすめです。私は、リンク先までパッと瞬間的に移動してほしいタイプなので停止しています。
「URLの自動カード化」を停止する
URLを貼り付けるだけで「ブログカード」で表示される機能です。
この機能を使わない場合でも、SWELLブロックを使えば同じようにカード形式を作成できます。内部リンク（自分の記事リンク）を作るときには便利なので、チェックしない（停止しない）にしています。
「空のpタグを自動削除する機能」を停止する
チェックする（停止する）にすると、レイアウト崩れが起きる場合があります。
HTML/CSSなど直接触ってデザインを細かく調整する人以外は、停止しないのがおすすめです。
「投稿画像をクリックで拡大表示する機能」を停止する
画像をクリックすると拡大される機能です。
拡大させたい画像だけ投稿ページごとに個別設定することもできるので、速度を優先するなら停止がおすすめです。ギャラリー・写真系のサイトはチェックしない（停止しない）がよいと思います。
「PV計測機能」を停止する
SWELLの人気記事リストでPV計測を使う場合は、 チェックしない（停止しない）がおすすめです。
Googleアナリティクスや他のプラグインでPV管理する場合は「チェックする（停止する）」でも問題ありません。
「SWELLが用意しているブロックパターン」を非表示にする
SWELLのブロックパターンは便利かつスタイリッシュでかなり使えるので、チェックしないがおすすめです。
- カスタム投稿タイプ
-
カスタム投稿タイプの設定は、表示速度への影響はほぼないので、運営スタイルに合わせて自由に選べます。 私の場合は以下のように設定しています。
項目 設定 「LP」を停止 現在は使っていないので停止中
将来的に使いたくなったらチェックを外す予定です「ブログパーツ」を停止 SWELLのブログパーツ機能は便利なので停止しないがおすすめ 「広告タグ管理」を停止 アフィリエイトをやる人は、ほぼ必須のため停止しない 「ふきだし管理」を停止 吹き出しを使った会話風コンテンツを作るときに便利
WordPressの機能
-
下記に、WordPressの機能の各項目をまとめたので、気になる項目があればチェックしてみてください。
-
WordPressのバージョン情報を出力しない
セキュリティ対策でバージョンは非表示にするのがおすすめです。
rel=“prev/next”を出力しない
以前はSEO効果があるとされていましたが、現在はあまり重視されていないようです。
そのため、出力しなくても問題ないといわれています。
EditURI(RSD Link)を停止する
外部ツールを使って投稿しないなら、セキュリティ的に停止がおすすめです。
絵文字用のスクリプトの読み込みをしない
どちらでもOK 。
絵文字を使わない場合は、停止すると少し軽量化できます。
セルフピンバックを停止する
自分の記事に自分の他の記事をリンクしたときに通知が来る機能です。
通知が多くなるので停止がおすすめです。
コアのサイトマップ機能を停止する
サイトマップに関して、WordPressのコアサイトマップは最低限の機能しかなく、細かな設定や最適化ができません。
そのため、「XML Sitemap & Google News」などの専用プラグインを使うのがおすすめです。
重複を避けるため、プラグインを利用する場合はこの機能を停止しておきます。メディアライブラリの無限スクロールを停止する
画像一覧をスクロールで表示するか、ページ切替型で表示するかの設定ができます。
画像が多いとスクロールが重くなるため状況に合わせて設定を変えるのもおすすめ。
meta=”robots” content=”max-image-preview:large”を出力しない
Googleの検索結果で画像プレビューを大きく表示できるタグです。
SEO的にもプラスになるので、出力する（チェックしない）がおすすめ。
REST API用のlinkタグを出力しない
出力を止めることでセキュリティ面で安心です。
まれに一部のプラグインや外部サービスで正しく動作しなくなる場合があります。
初心者の方には原因の特定が難しいこともあるため、もし不具合が出たときはこの設定をOFFに戻してみてください。画像のsrcsetを出力しない
スマホや高解像度向けに最適サイズの画像を表示できる機能。
ぼやけて見える場合にチェックする（出力しない）にすると改善するケースもありますが、根本的な解決ではありません。
アイキャッチなどの画像を適切なサイズで作成するほうが効果的です。記号の自動変換を停止する（wptexturize無効化）
引用符やダッシュを自動で整えてくれる機能。
使った方が見栄えが整って良くなります。
RSSフィードを停止する
RSSフィードはブログの更新情報を自動で配信する仕組みです。
Feedlyなどで購読してもらうために出力したままがよいです。
最後に、「変更を保存」をクリックします。
なつなろここは「チェックするとチェックしない」の意味が混乱しやすいので
注意が必要です。
6. 広告コードタブ
ここでは詳しい解説は省略しますが、Googleアドセンスなどの広告コードを一括管理できる場所です。
この設定を使うと、広告運用を効率化できます。
アフィリエイトやアドセンス収益など、本格的にマネタイズを始めるタイミングで設定すればOKです。
7. リセットタブ
表示が崩れたときや、変更が反映されないときに、SWELL内部のキャッシュや履歴データをリセットするための機能です。
不具合時のリセットや一部の内部データの更新に使えますが、元に戻せない操作もあるため、使用には注意が必要です。
| 項目 | 設定 |
|---|---|
| キャッシュのクリア | 表示が崩れた・変更が反映されないときに使用 クリックしてOK |
| キャッシュのクリア （ブログカード） | 内部リンクのカード表示が更新されないときに使用 クリックしてOK |
| 古いデータを更新する | テーマ更新後に不具合が出たときに使用 更新前にバックアップ推奨 |
| カスタマイザーのリセット 【影響度：大】 | 元に戻せないので要注意（通常、使うことはありません）！ 色やレイアウトなどカスタマイズをすべてを初期化します。 ゼロから作り直したいときや、デモサイトで設定をリセットしたい場合などエンジニア向けの機能です。 |
| PVのリセット | サイト公開前にテスト用のPVをゼロにしたいときに使います。 サイト公開後は基本リセットしないため使用しません。 |
SWELL購入者のみが利用できるサポート２つを紹介
SWELLを購入したユーザーだけが使える便利なサポートを２つ紹介します。
- SWELLユーザー限定のフォーラム
- SWELLデモサイトのデザイン着せ替え
SWELLユーザー限定のフォーラム
SWELLは公式マニュアルも充実していますし、ユーザーも多いためネットで調べれはだいたいは解決できます。
しかし、もっと「マニアックなことを知りたい」、「どうしてもわからない」など、そんな時はSWELL購入者限定のコミュニティサイト（SWELLERS’フォーラム）で質問することもできます。
どうしても解決できないときなどはフォーラムを利用してみましょう。
SWELLデモサイトのデザイン着せ替え
デザインやカスタマイズに自信がない方や、とりあえず形にしておきたいという方は、手っ取り早くデモサイトのデザインをダウンロードして使うこともできます。
現在６種類のデモサイトがあるので、自分の理想に近いデザインをインストールして着せ替えてみましょう。
- 事前に子テーマをダウンロードし有効化しておきましょう
- やっぱり元に戻したいという場合は、SWELL設定のカスタマイザーのリセットで戻せます
初心者のためのSWELL設定ガイド【最終まとめ】
おつかれさまでした！これでSWELL設定が完了です。
設定を整えたら、PageSpeed Insightsなどでページスピードをチェックしてみるものおすすめです。
SWELL設定は、使用しているサーバーや導入したプラグイン、運営スタイルによって最適な設定は変わるため、「これが絶対の正解！」という設定は存在しません。
今後、ブログを運営していく中で、「もっとこうしたい」や「表示が遅い気がする」などの気づきがあれば、その都度設定を見直していくのがおすすめです。
今回は、SWELLを導入したけど設定に悩んでいる方が、安心・快適に運営できるよう押さえておきたいSWELL設定を解説しました。
