本記事ではSWELLのデモサイトへの着せ替え方法を画像付きで解説します。
SWELLはシンプルでおしゃれなデザインのサイトを作成できるWordpressテーマです。
SWELLのカスタマイズ機能を使ってイチから自分でサイトデザインを作っていくのも良いですが、特にブログ初心者にオススメするのがデモサイトの活用です。
デモサイトとは、SWELLの開発者側で作成してくれているサイトデザインの見本のようなものです。
SWELL購入者はこのデモサイトを無料で使用できるので、自分のサイトをデモサイトのデザインに着せ替えたら、最初からキレイなデザインのサイトにすることができます。
本記事の手順どおりに進めれば、ブログ初心者の方でもデモサイトへの着せ替えができますよ!
目次
デモサイトの比較
SWELLのデモサイトは6種類あります。
↓に6つのデモサイトのトップページの画像をまとめました。
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
自分の好みに合うデザインを選べばOKです!
後から自由にカスタマイズできるので、まずは使用してみて必要に応じてカスタマイズしましょう。
ちなみにこのブログは、SWELL DEMO 01をベースに始めました。
SWELL DEMO 01
![](https://yoshigadge.com/wp-content/uploads/2021/02/67fd9acd345e74ebd9893a2e403a51da-753x1024.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/67fd9acd345e74ebd9893a2e403a51da-753x1024.jpg)
SWELL DEMO 02
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-2-1-743x1024.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-2-1-743x1024.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-2-2.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-2-2.png)
SWELL DEMO 03
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-3-1-1024x616.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-3-1-1024x616.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-3-2.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-3-2.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-3-3.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-3-3.png)
SWELL DEMO 04
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-4-1-795x1024.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-4-1-795x1024.jpg)
SWELL DEMO 05
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-5-1-634x1024.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-5-1-634x1024.jpg)
SWELL DEMO 06
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-6-1-1024x839.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-6-1-1024x839.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-6-2.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/22-6-2.jpg)
デモサイトファイルのダウンロード
STEP
「ログインはこちら」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/fe9063c2ba60d74430ef3797872f50f1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/fe9063c2ba60d74430ef3797872f50f1.png)
STEP
ログイン情報を入力して「サインイン」。
![](https://yoshigadge.com/wp-content/uploads/2021/02/0603879fdd89437ede27fe63ddca8645.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/0603879fdd89437ede27fe63ddca8645.png)
STEP
もう一度「マイページ」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/44b77b7a69b46c56b0a0da3209fb64d7.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/44b77b7a69b46c56b0a0da3209fb64d7.png)
STEP
「SWELL製品ページへ」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/bad051fd879e5bab0917ee16e50ef4ad.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/bad051fd879e5bab0917ee16e50ef4ad.png)
STEP
「デモサイトの設定データ」の「こちらのページ」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/591e74b54fdb6547b58ada5d2e6fcf28.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/591e74b54fdb6547b58ada5d2e6fcf28.png)
STEP
好きなデモサイトファイルをダウンロード。
![](https://yoshigadge.com/wp-content/uploads/2021/02/76f76da18680ec6d394f877652c62519.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/76f76da18680ec6d394f877652c62519.png)
STEP
ZIPフォルダがダウンロードされるので展開する。
![](https://yoshigadge.com/wp-content/uploads/2021/02/33-8.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/33-8.png)
STEP
展開した後に出てくる「datファイル」を後で使います。
![](https://yoshigadge.com/wp-content/uploads/2021/02/ea9f6f362f086d13418a4d196bdfbb0f.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/ea9f6f362f086d13418a4d196bdfbb0f.png)
デモサイト着せ替え用のプラグインのインストール
STEP
WordPressのダッシュボードの「プラグイン」の中にある「新規追加」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/f7d0014a4e67928b4ddffd283c669d4b.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/f7d0014a4e67928b4ddffd283c669d4b.png)
STEP
「Customizer Export/Import」を検索して、「今すぐインストール」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/a6d356ca976a9983b660c5b48458e64c-1024x386.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/a6d356ca976a9983b660c5b48458e64c-1024x386.png)
STEP
「有効化」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/a12e4da731cc316beb33e10065c36dd2-1024x383.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/a12e4da731cc316beb33e10065c36dd2-1024x383.png)
デモサイトのデザインへの着せ替え
STEP
WordPressのダッシュボードの「外観」の中にある「カスタマイズ」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/02d26c71790c555140e99735caccdab2.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/02d26c71790c555140e99735caccdab2.png)
STEP
「エクスポート/インポート」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/9d65e823e6775d366b101364a1c1d1e4.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/9d65e823e6775d366b101364a1c1d1e4.png)
STEP
「ファイルを選択」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/645b851f28223ab9dfa1a8e47ce59c80.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/645b851f28223ab9dfa1a8e47ce59c80.png)
STEP
ダウンロードしておいたデモサイトのdatファイルを選択して「開く」。
![](https://yoshigadge.com/wp-content/uploads/2021/02/2410a0043c633d6e7af2aa28600d3b3e-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/2410a0043c633d6e7af2aa28600d3b3e-1.png)
STEP
datファイルが選択されていることを確認したら、「インポート」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/02/0a717e3c80679935b093d29ecbf40674.png)
![](https://yoshigadge.com/wp-content/uploads/2021/02/0a717e3c80679935b093d29ecbf40674.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
以上でSWELLのデモサイトへの着せ替え完了です。
お疲れさまでした!