SWELLは、その美しいデザインと豊富な機能性で、多くのブロガーやウェブサイト運営者から絶大な支持を得ているWordPressテーマです。しかし、「デモサイトみたいにしたいけど、どうすればいいの？」「初期設定で何をしておけばいいの？」と悩む方も少なくありません。
この記事では、SWELLのデモサイトデザインを簡単に反映させる方法から、ブログ運営をスムーズに進めるために必須となる初期設定までを、初心者の方でも分かりやすく解説します。SWELLを導入したばかりの方、これから導入を検討している方は、ぜひ最後まで読んで、あなたのSWELLサイトを理想の形に近づけてください。
SWELLのデモサイト着せ替え機能とは？
SWELLには、公式が提供する洗練されたデザインテンプレート（デモサイト）を、たった数クリックであなたのサイトに反映させることができる「着せ替え機能」が搭載されています。これにより、デザインの知識がない方でも、プロが作ったような美しいサイトをすぐに構築できるのです。
メリット
- デザインの手間を大幅に削減: ゼロからデザインを考える必要がなく、時間と労力を節約できます。
- プロクオリティのデザイン: 公式が作成した、美しく機能的なデザインを簡単に導入できます。
- イメージが掴みやすい: デモサイトを見ることで、完成形を具体的にイメージしやすくなります。
- カスタマイズの土台になる: 反映後も自由にカスタマイズできるため、オリジナリティを出すことも可能です。
注意点
- 既存コンテンツへの影響: すでに記事を投稿しているサイトに適用すると、デザインが崩れる可能性があります。新規サイトでの利用が推奨されます。
- 不要なデータの削除: デモコンテンツ（サンプル記事や画像）が反映されるため、後で不要なものを削除する必要があります。
- 完全に同じにはならない場合がある: デモサイトで使われているプラグインや設定によっては、完全に同じデザインにならない場合もあります。
デモサイト導入の大まかな流れ
大まかな流れは以下の通りで、すべて合わせて15分も掛からない内容となっています。
- 「SWELLERS’」にアクセスし、お気に入りのデモサイト着せ替えファイルをダウンロードする
- 着せ替えに必要となるプラグイン「Customizer Export/Import」をインストール・有効化する
- 先ほど1でダウンロードしたファイルを解凍し、インポートする
- デモサイト着せ替え完了、初期設定を行う
※すでに運用している（またはSWELLのカスタマイズ設定を行っている）サイトがSWELLデモサイトの着せ替えを行う場合は、3の後に「Customizer Export/Import」を使用してエクスポートが必要となります
SWELLデモサイトの着せ替え反映手順
それでは、SWELLのデモサイトをあなたのサイトに反映させる具体的な手順を見ていきましょう。
※SWELLテーマ未導入の方は、下記講座を先にご覧ください。
SWELLデモサイトの着せ替えファイルをインストールして反映する手順
入力するメールアドレスはSWELLを購入時に使用したメールアドレスです。忘れた場合、普段使用しているすべてのメールソフト（アドレス）で「SWELL」と検索すると、購入した際のメールが見つかるはずです。
自分が作成したサイトイメージに一番近いデモサイトのファイルを選び、ダウンロードする。
※今回は「アイドル商品のリユースをおすすめするサイト」になるため、ピンクベースの「demo04」を選択します
まだデモサイトをチェックしていない方はこちらから
有効化すると下記STEP8記載の場所から「Customizer Export/Import」が使えるようになります。
今回使用するプラグイン「Customizer Export/Import」に限らず、SWELLの基本的なカスタマイズはここから設定できます。
インポート前に、STEP4でダウンロードしたSWELL着せ替え用のファイル「swell_demo数字.dat_」ファイルを解凍します。（事前に解凍しないとインポートできないため）
SWELL導入（ワードプレスインストール）後の必須初期設定
それではデモサイトの着せ替えも完了したところで、最初の必須初期設定を完了させましょう。
（あなたのオリジナルサイトとしてデザインをカスタマイズする前に、しておいた方がいい設定集です。）
ワードプレスの一般設定（タイトル、キャッチフレーズ、URL変更）
サイトのタイトル設定
検索したときやブラウザのタブに表示されるサイト名を設定します
サイトのキャッチフレーズ設定
これは後からもいいのですが、つい忘れてしまうことも多いため、最初に設定してしまいましょう。（後からもでOK）
WordPress アドレス (URL)、サイトアドレス (URL)の変更
最初に「http://●●.com」となっていますので、暗号対応（SSL）している「https://●●.com」に変更しましょう。
ワードプレスの表示設定（検索エンジンで表示されないようにする）
検索エンジンでの表示
「検索エンジンがサイトをインデックスしないようにする」にチェックを入れて保存。
ワードプレスのパーマリンク設定（パーマリンク構造変更）
パーマリンク構造
初期設定だと「日付と投稿名」になっていますが、必ず「投稿名」に変更して保存しましょう。
プラグイン「CloudSecure WP Security」の設定（ログインURL変更）
Xサーバーを契約してワードプレスをクイックインストールした場合、最初から「CloudSecure WP Security」というセキュリティ系のプラグインが入っています。
（昨今ワードプレスにも不正ログインされるケースが増加しているため、入れていない場合はぜひプラグインの新規追加から入れましょう）
そのなかで、初期設定ではONになっていない「ログインURL変更」はしておきましょう。
「変更後のログインURL」は可能な限り、「-」や「_」を入れて設定しましょう。
ログインURLを変更すると、今後は新しいURLからしかログインできなくなります。そのため、必ず「新しいログインページURL」をクリックして新URLをブックマークしてください。
デザインをイメージしやすいようにカテゴリー、記事、メニューを設定する
続いて、サイトデザインをカスタマイズする前の必須事前準備としてカテゴリー、記事、メニューを設定しておきましょう。（デザインカスタマイズ後より事前にしておく方がイメージしやすく二度手間がなくなります）
カテゴリを仮で設定する
最初に記事のカテゴリを仮で設定します。
※デザイン確認用のためカテゴリは適当でOK、思い浮かばない人はAI（chat-GPTやGemini)に「〇〇がコンセプトのサイトを作成するにあたり、記事のカテゴリを提案して」と指示するのが早いです
まずはワードプレス管理画面から「カテゴリー」画面に移動します。
現時点ではデザインを確認する用の仮カテゴリーとなるため、何となくイメージするカテゴリー名を入れておきましょう。スラッグについてはカテゴリー名の英語を小文字表記しましょう。
※初期状態で「未分類」が作成されていますが、こちらは削除できませんので必ず任意のカテゴリ名で上書きしておきましょう。また、カテゴリ設定詳細画面に移動するとさまざまな設定項目がありますが、基本的には名前とスラッグ、説明さえ入力しておけば問題ありません。
デザイン確認用に、カテゴリーは2個以上登録しておきましょう。
仮で投稿記事を３つ作成する
さらにサイトをイメージしやすいよう、適当な記事を作成しておきましょう。
※デザイン確認用のため記事内容は適当でOK、AI（chat-GPTやGemini)に「〇〇に関する記事を2000文字以上で作成して。記事内の見出しはｈ2とh3を使い分けて」と指示するのが早いです
投稿画面に移動して「投稿を追加」をクリックします。
※初期から「Hello world!」という記事が作成済になっていますので、この記事は削除するか編集して新規記事を上書きしましょう
現時点ではデザインを確認する用の仮記事となるため、文字はなんでもOKです。
右上に表示されている「アイキャッチ画像を設定」から画像ファイルをアップロードして、設定しましょう。
この画像はサイトトップページなどにも表示されますので、サイトイメージがしやすいようにきちんと画像を選んで設定しておくことをおすすめします。
本サイトで最初の講座から順に進めている方は既に登録済かと思いますが、サイトのアイキャッチ作成には【MiriCanvas】というデザインツールをおすすめします。（下記は姉妹サイトの講座です）
右側メニューの中央くらいに表示されている「カテゴリ」をクリックし、先ほど作成したカテゴリにチェックを入れ、右上の「公開」ボタンをクリックして1記事完成。
記事を公開したら、同じ手順で合計3記事作成します。作成後にサイトを確認すると、下記のように一気にデザインをイメージしやすくなってきます。
サイトメニューを設定する
最後に、サイトメインメニュー（グローバルメニュー）、サイト下部のメニュー（フッターメニュー）、スマートフォン専用メニュー（ヘッダメニュー）を設定します。
サイトメインメニュー（グローバルメニュー）
はじめにサイト上部に表示されるメインメニューを設定します。下に表示されているメニュー設定では、必ず「グローバルナビ (現在の設定: グルーバルメニュー)」にチェックを入れてから保存ボタンを押します。
※どの部分のメニューなのか指定するため
今回は最低限のメニュー「ホーム」「推し活知識（カテゴリー1）」「グッズ（カテゴリー2）」「スキャンダル（カテゴリー3）」「オシリユとは」の5メニューにします。
メニュー「ホーム」の追加
ホームは、どのページからのTOPページに移動するためのボタンです。
「カスタムリンク」をクリックし、URL欄にサイトトップページのURLを入力、リンク文字列に「ホーム」と入力し、「メニューに追加」ボタンを押しましょう。
メニュー「カテゴリー」の追加
カテゴリーは、メニューをクリックすると紐づけている記事が一覧で表示されるページです。
「カテゴリー」をクリックし、先ほど作成したカテゴリーにチェックを入れ、「メニューに追加」ボタンを押しましょう。
メニュー「オシリユとは」の追加
オシリユとはページは、本サイトに興味を持ってくれた方向けのサイト説明ページです。（まだ作成していない状態だと思いますが、いずれ必要になるためとりあえずメニューだけ設定しておきます）
「カスタムリンク」をクリックし、URL欄に「サイトURL/about/」、リンク文字列に「お問い合わせ」と入力し、「メニューに追加」ボタンを押しましょう。
※URLはメニュー名をローマ字にしたものでもいいですし、自由に設定してください
メニューをすべて設定後、「メニューを保存」をクリックしたら設定完了です。サイト側に正しく反映されているか見てみましょう。この時点でもある程度見栄えの良いサイトになっています！
下部のメニュー（フッターメニュー）
先ほど作成したグローバルメニューとは別のメニューを作成する必要がありますので、「新しいメニューを作成しましょう」をクリックします。
下に表示されているメニュー設定では、必ず「フッター」にチェックを入れてから保存を推します。
今回は仮でメニュー「ホーム」「プライバシーポリシー」「お問い合わせ」の3メニューにします。
※追加方法は同じです。「プライバシーポリシー」と「お問い合わせ」はまだページ作成していませんが、URLははそれぞれ「サイトURL/privacy-policy/」「サイトURL/contact/」で設定しました。
メニューをすべて設定後、「メニューを保存」をクリックしたら設定完了です。サイト側に正しく反映されているか見てみましょう。
スマートフォン専用メニュー（ヘッダメニュー）
スマートフォン専用メニュー（ヘッダメニュー）は当サイトでは下記のようなスマホ専用で表示されるメニューです。
メニューが少ない最初のうちは不必要かもしれませんが、スマホ内の三本メニューより押される確率が圧倒的に高いため、多くのページを見ていただくためにも最初から設定しておくことをおすすめします。
再度「新しいメニューを作成しましょう」をクリックします。
下に表示されているメニュー設定では、必ず「スマホ用ヘッダー」にチェックを入れてから保存を推します。
今回は仮で「推し活知識（カテゴリー1）」「グッズ（カテゴリー2）」「スキャンダル（カテゴリー3）」の3つにします。（なるべく見てもらいたいメニューを優先して表示してください）
※追加方法は先ほどまでと同じです。
メニューをすべて設定後、「メニューを保存」をクリックしたら設定完了です。サイト側に正しく反映されているか見てみましょう。
ここまで設定お疲れ様でした。以上でサイトの土台が完成している状態となります。
続けてデザインカスタマイズに進む方は、次のよくある質問下に表示されている次の講座に進みましょう。
よくある質問 (FAQ)
SWELLの着せ替えや初期設定に関して、よくある質問とその回答をまとめました。
まとめ
SWELLのデモサイト着せ替え機能は、デザインに自信がない方でも簡単に一定水準以上のサイトが完成します。さらにワードプレスで必須の設定を最初にしておくことで、後から困ることもなくなります。
これで最低限の土台は完成しましたので、次からあなただけのサイトに仕上げるためにカスタマイズしていきましょう！
