くま太君サイトデザインに悩む方へ！
SWELLでは6種類のデモサイトデータを無料で利用することができるんだ。
簡単に着せ替えができるから、ぜひ見てみてね。
当ページでは、SWELLのデモサイトデータの着せ替え方法を、図解入りで、完全攻略していきます。
実際に自分のテストサイトを使って、設定をしてみました。
その時に気になったポイントも盛り込んで、ご案内していきます。
くま太君ぜひ、参考にしていってね。
また、デザイン自体に迷っている方向けに、下記の記事も書いてみたよ。
という方は、まずはこちらの記事を、確認してみてください。
SWELLを利用していない方でも、サイトデザインのポイントがわかるようにまとめました。
くま太君ブログを運営するのに、時間短縮したいなら、
良かったら参考にしてみてね！
【必読】着せ替えを導入する前に
くま太君着せ替えを導入する前には、確認してね。
注意事項をチェック！
公式サイト内で、以下のような注意事項があります。
デモサイトを完全に再現できるわけではありません。適宜調節してご利用ください。
SWELLユーザー限定の新会員サイト より
くま太君どのくらいの再現度なんだろう？
再現度合いについても、当ページで見ていきます。
まずは、押さえておきたい注意事項を、挙げていきますね。
- SWELLユーザー限定の会員登録をしていること
→SWELL購入時登録するので、登録情報を忘れずに！ - デモサイトデザインを完全に再現できるわけではない
→実際適用してみたら、だいたい期待通りの状態だった - 着せ替え導入後は、自分でカスタマイズが必要
→『外観』→『カスタマイズ』で簡単に設定できる - 既に通常のSWELL上で色設定などした後に、デモサイトデータを適用した場合、それまでの設定が消えることがある。
→バックアップしておくこと！ - 着せ替え前の様々な設定が消えることがあるので、初期段階で導入した方がよい
→使用するプラグインが「カスタマイザー」に特化したモノのため
この点を考慮しつつ、ここから先の説明を進めていきます。
デモサイトデータ導入の流れをチェック!
くま太君まずは、一連の流れを確認しておくよ
- 着せ替えたい、デモサイトデザインを決める
- デモサイトデータをダウンロード
- プラグイン『Customizer Export/Import』をインストール
- デモサイトデータをインポート
- お好きにカスタマイズして、出来上がり！
設定自体はとっても簡単です。
実際にデモサイトデータを適用した直後の、画像を掲載しておきます。
適用直後見本は、WordPressのバージョンや環境で、若干の違いがあるかもしれませんが、ご了承ください。
実際に、デモサイトデータを適用して確認してみたところ、ほとんどデモサイトの見本と同様のレイアウトになっていました。
これだけ形になっていれば、レイアウトするのも、割と簡単に作業することができますよ。
くま太君でも、上の2つの画像を比べたら、何か違うような…………？
デモサイトでは、すでに画像や記事、サイドバーが入っていますので、キッチリした仕上がりに見えています。
また、自分でデモサイトデータを導入した後の見本は、中身がスッカラカンなので、画像・記事・サイドバーなど、各種設定をしていけば同様の見栄えになるでしょう。
万が一気に入らなければ、元のSWELLに戻す方法があるので、安心してください。
着せ替えたいデモサイトデザインを決めよう
くま太君こっちの記事で、6種類のデモサイトデザインについて、1つ1つ解説しているよ。
SWELLを使っていない方にも、サイトデザインの参考になるように書いたので、良かったらのぞいて見てね。
例えば、このデザインを使うにはここを注意した方が、おかしなことになりにくいなど、1つ1つに解説をつけさせていただきました。
SWELLデモサイトデータをダウンロードしよう
くま太君着せ替え用のデモサイトデータは、SWELLユーザー会員なら、無料でダウンロードして利用出来るよ！
SWELLユーザー限定の会員サイトにログイン
ログインページへは、以下の手順です。
このSWELLユーザー限定の会員サイトでは、デモサイトデータのダウンロードの他に、
など、SWELL利用者の様々な情報・サービスを入手することができます。
くま太君ボクは一度パスワードを忘れた……
ログイン用のメールアドレス・パスワードをしっかり保管しておきましょう。
デモサイトデータをダウンロード
自分で使いたいデモサイトデータを決めたら、ダウンロードしていきましょう。
1つだけでなく、全6種類の全てをダウンロードすることも可能です。
ここでダウンロードしたデータを、着せ替えで使うことになります。
ダウンロードされたデータは圧縮ファイル（.zip）です。
このファイルをダブルクリックなどで、解凍してください。
くま太君実際にデモサイトデータをダウンロードして、設定してみた感想は………
私も実際にダウンロードをして、WordPressで設定してみました。
大枠が出来上がっているので、ゼロからデザインを組み上げることを考えたら、おそろしいほど楽ちんです。
あとは自分でカスタマイズしていくだけ。
さっそく気に入った着せ替え用デモサイトデータを、ダウンロードしていきましょう！
必要なプラグインをインストールしよう
くま太君着せ替え用のデモサイトデータをダウンロードしたら、設定に必要なプラグインをインストールするよ。
まずは『Customizer Export/Import』をインストールしましょう。
プラグインのインストール方法は、こちらでも詳しく説明しています。
『新規追加』ボタンをクリック。
キーワードの横の空欄のボックスに、プラグイン名『Customizer Export/Import』と入力。
文字を入力するだけで、自動で検索される。
『今すぐインストール』ボタンをクリック。
これでプラグイン『Customizer Export/Import』がインストールされ、使用できる準備が整いました。
くま太君プラグインのインストールはたったこれだけで終了！
『Customizer Export/Import』は、カスタマイズ用のデータをインポート・エクスポートするプラグインです。
プログラムが書いてある、『.dat』ファイルを読み込んで、今回の着せ替え用デモサイトデータを適用していきます。
SWELLデモサイトデータで着せ替えてみよう
くま太君WordPressにデモサイトデータをインポートするのに、さっきのプラグイン、『Customizer Export/Import』を使っていくよ。
『カスタマイズ』に入ると、１番下にインストールしたプラグイン、『Customizer Export/Import』の設定ボタンが出現します。
通常のSWELL上で、変更の状態が分かりやすいように、以下の2点のみ設定しています。
『書き出し』ボタンをクリックすると、①②を変更した現状の元のSWELLデータをエクスポート（ダウンロード）します。
これがあれば、下記図の元のSWELL状態のデザインに戻す事ができます。
バックアップと思って、エクスポートしておくと良いでしょう。
くま太君デモサイトデータのダウンロード方法は、先の見だしを確認してね。
①の『選択』ボタンをクリックして、ダウンロードしておいたデモサイトデータを選択する。
データをダウンロードすると、ダウンロードフォルダにデータが入ります。
『選択』ボタンから、ダウンロードフォルダ内のデモサイトデータが出現しない場合は、『.dat』データを『デスクトップ』などに移動させれば、問題無く選択することができます。
②「画像ファイル〜」にはチェックをいてておきます。
③『インポート』ボタンをクリック
選択した『swell_demo06.dat』が無事にインポートされ、反映されました。
くま太君お疲れ様でした！
たったこれだけで、デモサイトデータに着せ替え完了だよ！
あとは、『外観』→『カスタマイズ』で自分でカスタマイズしていけば、ステキサイトが出来上がり！
デモサイトデータをインポートしたら、前の設定が無くなっているので、注意が必要です。
『外観』→『カスタマイズ』で、各種設定をしていきましょう。
ここからのカスタマイズは、良かったら、こちらを参考にしてみてください。
SWELL｜デザイン力不要？！デモサイト着せ替えでプロ級サイトに！
SWELLオリジナルデザインに戻したい！
くま太君やっぱり、オリジナルのSWELLの状態に戻したい。
そんなときは？
ファイル名は、ご自分で名前を付け直しても、問題ありません。
むしろ、バックアップ用のファイルだと分かるように、ファイル名を変更しておいた方が、紛れがなくて安心です。
こちらも、変更の状態が分かりやすいように、ロゴ画像と、中央の文字を変更しておきました。
これを、１番最初のSWELLオリジナルデザインに戻します。
やり方は、デモサイトデータをインポートしたときと同じです。
くま太君読み込むファイルは、もちろんバックアップしておいた『.dat』ファイルだよ！
これで、元のSWELLのデザインの状態に戻りました。
最初に元のSWELLのデザイン上で設定したロゴ画像も、紫色の帯も、そのまま復元できました。
今回のまとめ。簡単な設定でサイトデザインをオシャレに！
くま太君ちょっとした準備は必要だけど、とても簡単にでもサイトデータに着せ替えすることができたね。
SWELLの元デザインだけでも、オシャレでステキなのに、6種類もの着せ替えデータが用意されています。
SWELL｜デザイン力不要？！デモサイト着せ替えでプロ級サイトに！
もちろん、SWELLユーザーであれば、無料で利用できます。
デモサイトデータを使う、おおまかな手順は以下の通りです。
- 着せ替えたい、デモサイトデザインを決める
- デモサイトデータをダウンロード
- プラグイン『Customizer Export/Import』をインストール
- デモサイトデータをインポート
- お好きにカスタマイズして、出来上がり！
実際にデモサイトデータを適用して着せ替えを行ったところ、簡単にオシャレデザインに変更ができました。
着せ替えが終了した後は、ご自分でカスタマイズをしていくことになります。
ですが、大枠が出来上がっていればこっちのもの！
『外観』→『カスタマイズ』を使って、自分オリジナルのサイトに仕上げて行きましょう。
お疲れ様でした。
ここまでお読みいただき、ありがとうございました。
くま太君SWELLの着せ替え用デモサイトデザインをもう一度確認したい！
という方は、こちらの記事を参考にしてみてね！
SWELL｜デザイン力不要？！デモサイト着せ替えでプロ級サイトに！
＼ 【広告】SWELLなら、設定も編集もサクサク快適！ ／
WordPressテーマ『SWELL』の詳細は公式サイトで！