
SWELLのデモサイトの着せ替えデザインを使ってみたい!
どうやって自分のサイトで使えばいいの?
やり方がわからない
作業の途中でエラーが出た…
そんなお悩みを解決します。
SWELLのデモサイトの着せ替えデザインデータを自分のブログに読み込む方法を初心者向けに図解しました。難しい作業は一切ありません。使いたい着せ替えデザインが決まっている人なら5分程度でデモサイトと同等のデザインに仕上がります!
【基礎知識】SWELLの着せ替えデザインって何?

「着せ替えデザイン」はSWELLが購入者向けに提供している無料のデザインファイルです。
自分のサイトに着せ替えデザインを読み込むとデモサイトと同じデザインに早変わりする便利な代物です。
6種類の着せ替えデザインを利用できる
SWELL公式サイト上に現在6つのデモサイトが公開されています。
着せ替えデザインデータは何回でもダウンロードできます。ダウンロード回数に制限はありません。
SWELLの着せ替えデータはSWELL購入のみ利用できます。
デモサイトの着せ替えデザインファイルを使う手順

着せ替えデザインを使う手順を解説します。
まずは作業全体の流れです。
全体の流れ
- マイページにログインする
- デモデータをダウンロードする
- Customizer Export/Importプラグインをインストールする
- デモデータを読み込む

各ステップを詳しく図解します!
着せ替えデザインを使う手順
SWELLの着せ替えデータをダウンロードするにはマイページにログインする必要があります。
マイページに移動します。

マイページをクリックするとログイン画面が表示されます。
ログインは「こちら」をクリック。

「ユーザー名」「パスワード」「CAPTCHAコード」を入力し「サインイン」をクリック。

マイページにログインした状態で「デモサイト着せ替えデザインファイルページ」に移動します。
ページの中頃に着せ替えデザインデータの一覧が表示されるので「ダウンロード」ボタンからどれでも好きなデザインをダウンロードします。

ダウンロードしたファイルはzip形式です。解凍して中身のファイルを取り出しておきます。

解凍ってどうやるの?

zipファイルをダブルクリックしてみて!

今回の例ではデモサイト1の着せ替えデザインを使います。
zipファイルを解凍し「swell_demo01.dat」ファイルを保存しておきます。
着せ替えデザインファイルをワードプレスに読み込むには「Customizer Export/Import」プラグインが必要です。
自身のサイト上でCustomizer Export/Importプラグインをインストールし有効化します。

プラグインのインストールを解説しますね!
やり方知っている人はこのステップを飛ばしてもOKです。
Customizer Export/Importページへ移動し「ダウンロード」をクリック。

customizer-export-import.zipというファイルをダウンロードできれたら次のステップに進みます。
ダウンロードしたファイルは解凍せずそのまま任意の場所に保存してください。
ワードプレスにログインし「プラグイン」→「新規追加」をクリック。

画面上部の「プラグインをアップロード」をクリック。

「参照」をクリック。

ダウンロードした「customizer-export-import.zip」ファイルを選択し「開く」をクリック。

「今すぐインストール」をクリック。

数秒から10秒程度かかりますので、そのまま待ちます。
「プラグインを有効化」をクリック。


Customizer Export/Importプラグインのインストール作業はこれで完了です。次のステップに進みましょう。
このステップではデモサイトの着せ替えデータを自分のサイトに反映させます。
「外観」→「カスタマイズ」の順にクリック。

カスタマイザーと呼ばれる画面が開きます。
左側のメニュー部分を下にスクロールし最下部にある「エクスポート/インポート」をクリック。

「参照」をクリック。

パソコン上からデモデータを選択し「開く」をクリック。

「インポート」をクリック。

デモサイト上の画像も読み込みたい時は「画像フィルをダウンロードしてインポートしますか?」にチェックを入れた状態で「インポート」をクリックしてください。
数秒~10秒程度で読み込みが終わります。
正常に読み込みが完了するとカスタマイザー上で着せ替えデザインが反映されたことが確認できます。


以上で着せ替えデザインの読み込み作業は終了です。
Customizer Export/Importプラグインは削除してOK
着せ替えデータの読み込みが完了した時点でCustomizer Export/Importプラグインは不要です。プラグインを削除してもデモサイトの着せ替えデザインデータはサイト上に残ります。不要なプラグインはムダにディスクスペースを専有するので削除しましょう。
後で削除しようとすると、「このプラグインって何用だっけ?忘れたけど、なにか影響でるかもしれないからそのままにしておこう」となりがちです。
着せ替えデザインデータFAQ

SWELLの着せ替えデザインデータに関するFAQです。
デモデータを使ってみたけど、別のデモに変えてもいいの?
はい。
デモサイトの着せ替えデザインを適用させた後でも別の着せ替えデザインデータを読み込めます。
カスタマイザーに「エクスポート/インポート」が表示されない
次の可能性があります。
- 「Customizer Export/Import」プラグインがインストールされていない
Customizer Export/Importプラグインをインストールしていないと「エクスポート/インポート」は表示されません。プラグインをインストールし有効化した状態でカスタマイザーを確認しましょう。
類似プラグインに注意
Customizer Export/Importプラグインに似たプラグインが多々あります。誤って別のプラグインを使っていないかを確認しましょう。
デモデータを読み込みとエラー出る
次の点を確認しましょう
- WAFの設定
- デモデータを解凍する
WAFの設定
「WAF」はセキュリティーシステムのことです。レンタルサーバーやセキュリティープラグインが影響しワードプレスの設定中にエラーが表示されることがあります。
レンタルサーバーのWAF、セキュリティー系プラグインを一時的に無効にしデモデータを読み込みましょう。
レンタルサーバーのWAFは無効化してから設定が反映されるまで10分程度かかる場合があります。WAFを無効化した後は十分な時間をあけて作業を行ってください。
デモデータを解凍する
デモサイトの着せ替えデザインファイルは.zip(ジップ)形式でそのまま使うとエラーが表示されます。アップロード前に解凍する必要があります。
解凍方法
- Windows10:zipファイルをダブルクリック
- Mac:zipファイルをダブルクリック
まとめ
SWELのデモサイトと同じデザインに早変わりする「着せ替えデザイン」の使い方について解説しました。
デモサイトのページに自分好みのものがある場合はサクッと読み込むと時短になりますので活用してみてください。

- WING Affinger6(アフィンガー6)とSWELLの違いを比較
- THE THOR(ザ・トール)とSWELLの違いを比較
- SWELLと賢威8をレビュー。何が違うの?テーマを比較!
- SWELLとJIN:Rの違いを比較
- SANGOとSWELLの違いを比較
- SWELLとSTREETISTの違いを比較
- CocoonとSWELLの違いを比較。テーマ切り替えのメリット・デメリットを経験者が解説
- DIVERとSWELLの違いを比較【初心者向けのWordPressはどっち?】
- SWELLとEMANON Proの違いを徹底レビュー
- WordPress「SWELL」を徹底比較レビュー|ネットの評判・デメリットも解説
- STORK19とSWELLの違いを比較【それぞれのメリット・デメリットをWeb制作業者が解説します】
- SWELLとHummingbird(ハミングバード)の違いを比較