【Pick Up!!】『ブログ用語集』始めました!100以上の用語をサクッと解説!

SWELL|デモサイト着せ替え完全攻略!設定方法から注意事項まで!

SWELLデモサイトデータの導入・設定方法を完全攻略
くま太君

サイトデザインに悩む方へ!
SWELLでは6種類のデモサイトデータを無料で利用することができるんだ。
簡単に着せ替えができるから、ぜひ見てみてね。

当ページでは、SWELLのデモサイトデータの着せ替え方法を、図解入りで、完全攻略していきます。

・デモサイトデータ使用時の注意事項
・デモサイトデータの設定方法
・元に戻したい時の対処法

実際に私もテストサイトを使って、設定をしました。

その時に気になったポイントも盛り込んで、ご案内していきます。

くま太君

ぜひ、参考にしていってね。
また、デザイン自体に迷っている方向けに、下記の記事も書いてみたよ。

・サイトデザインに悩んでいる
・デモサイトデータって何?

という方は、まずはこちらの記事を、確認してみてください。

SWELLを利用していない方でも、サイトデザインのポイントがわかるようにまとめました。

この記事を読むと分かること
・SWELLのデモサイトデータの注意点
・SWELLのデモサイトデータの使い方
・やっぱり元に戻したいときの対処法

目次

【必読】着せ替えを導入する前に

くま太君

着せ替えを導入する前には、確認してね。

注意事項をチェック!

公式サイト内で、以下のような注意事項があります。

デモサイトを完全に再現できるわけではありません。適宜調節してご利用ください。

SWELLユーザー限定の新会員サイト より
くま太君

どのくらいの再現度なんだろう?

再現度についても、当ページで見ていきます。

では、押さえておきたい注意事項を、挙げていきますね。

  1. SWELLユーザー限定の会員登録をしていること
    →SWELL購入時登録するので、登録情報を忘れずに!
  2. デモサイトデザインを完全に再現できるわけではない
    →実際適用してみたら、だいたい期待通りの状態だった
  3. 着せ替え導入後は、自分でカスタマイズが必要
    →『外観』→『カスタマイズ』で簡単に設定できる
  4. 既に通常のSWELL上で色設定などした後に、デモサイトデータを適用した場合、それまでの設定が消えることがある。
    →バックアップしておくこと!
  5. 着せ替え前の様々な設定が消えることがあるので、初期段階で導入した方がよい
    →使用するプラグインが「カスタマイザー」に特化したモノのため

この点を考慮しつつ、ここから先の説明を進めていきます。

デモサイトデータ導入の流れをチェック!

くま太君

まずは、一連の流れを確認しておくよ

  1. 着せ替えたい、デモサイトデザインを決める
  2. デモサイトデータをダウンロード
  3. プラグイン『Customizer Export/Import』をインストール
  4. デモサイトデータをインポート
  5. お好きにカスタマイズして、出来上がり!

設定自体はとっても簡単です。

デモサイトデータは、プラグインを使って設定しますが、導入はとても簡単にできました。

実際にデモサイトデータを適用した直後の、画像を掲載しておきます。

適用直後見本は、WordPressのバージョンや環境で、若干の違いがあるかもしれませんが、ご了承ください。

SWELLデモデータデザイン全6種類
デモサイト見本
SWELLデモサイトデータ適用後見本
デモサイトデータ適用直後見本

デモサイトページはここから確認できます。

実際に、デモサイトデータを適用して確認してみたところ、ほとんどデモサイトの見本と同様のレイアウトになっていました

十分にこのまま使用できる状態です。

これだけ形になっていれば、レイアウトするのも、割と簡単に作業することができますよ。

くま太君

でも、上の2つの画像を比べたら、何か違うような…………?

デモサイトでは、すでに画像や記事、サイドバーが入っていますので、キッチリした仕上がりに見えています。

また、自分でデモサイトデータを導入した後の見本は、中身がスッカラカンなので、画像・記事・サイドバーなど、各種設定をしていけば同様の見栄えになるでしょう。

万が一気に入らなければ、元のSWELLに戻す方法があるので、安心してください。

着せ替えたいデモサイトデザインを決めよう

くま太君

こっちの記事で、6種類のデモサイトデザインについて、1つ1つ解説しているよ。
SWELLを使っていない方にも、サイトデザインの参考になるように書いたので、良かったらのぞいて見てね。

【SWELLデモサイトページを見る】

例えば、このデザインを使うにはここを注意した方が、おかしなことになりにくいなど、1つ1つに解説をつけさせていただきました。

SWELLデモサイトデータをダウンロードしよう

くま太君

着せ替え用のデモサイトデータは、SWELLユーザー会員なら、無料でダウンロードして利用出来るよ!

SWELLユーザー限定の会員サイトにログイン

SWELLユーザー限定の会員サイトにログインすると、ダウンロード出来るようになります。

ログインページへは、以下の手順です。

STEP
『フォーラム』をクリック

https://swell-theme.com/

SWELLトップ画面
SWELL公式サイトトップページ
STEP
会員登録またはログイン

https://users.swell-theme.com/forum/

SWELL専用会員画面/会員登録/ログイン用
SWELL会員専用登録・ログインページ

このSWELLユーザー限定の会員サイトでは、デモサイトデータのダウンロードの他に、

・SWELLアップデート時のデータのダウンロード
・子テーマのダウンロード
・フォーラムの利用
・認証済みサイトの確認
・アフィリエイト
・乗り換えサポートプラグインダウンロード

など、SWELL利用者の様々な情報・サービスを入手することができます。

くま太君

ボクは一度パスワードを忘れた……

ログイン用のメールアドレス・パスワードをしっかり保管しておきましょう

デモサイトデータをダウンロード

自分で使いたいデモサイトデータを決めたら、ダウンロードしていきましょう。

1つだけでなく、全6種類の全てをダウンロードすることも可能です。

『ダウンロード』ボタンをクリックすると、データがダウンロードされる。

SWELL-着せ替えデモサイトデータのダウンロード画面
デモサイトデータダウンロード画面

ここでダウンロードしたデータを、着せ替えで使うことになります。

ダウンロードされたデータは圧縮ファイル(.zip)です。

このファイルをダブルクリックなどで、解凍してください。

実際に使用するファイルは、解凍後の『.dat』ファイルです。
自分で分かりやすく、ファイル名を変更してもOKです。

くま太君

実際にデモサイトデータをダウンロードして、設定してみた感想は………

私も実際にダウンロードをして、WordPressで設定してみました。

大枠が出来上がっているので、ゼロからデザインを組み上げることを考えたら、おそろしいほど楽ちんです。

あとは自分でカスタマイズしていくだけ。

さっそく気に入った着せ替え用デモサイトデータを、ダウンロードしていきましょう!

必要なプラグインをインストールしよう

くま太君

着せ替え用のデモサイトデータをダウンロードしたら、設定に必要なプラグインをインストールするよ。

デモサイトデータを導入するには『Customizer Export/Import』という、プラグインを使う。

まずは『Customizer Export/Import』をインストールしましょう。

プラグインのインストール方法は、こちらでも詳しく説明しています。

STEP
管理画面からメニューの『プラグイン』を選択

『新規追加』ボタンをクリック。

プラグインCustomizer Export/Import導入方法-1
STEP
キーワード『Customizer Export/Import』を入力

キーワードの横の空欄のボックスに、プラグイン名『Customizer Export/Import』と入力。

文字を入力するだけで、自動で検索される。

『今すぐインストール』ボタンをクリック。

プラグインCustomizer Export/Import導入方法-2
STEP
『有効化』ボタンをクリック

これでプラグイン『Customizer Export/Import』がインストールされ、使用できる準備が整いました。

くま太君

プラグインのインストールはたったこれだけで終了!

『Customizer Export/Import』は、カスタマイズ用のデータをインポート・エクスポートするプラグインです。

プログラムが書いてある、『.dat』ファイルを読み込んで、今回の着せ替え用デモサイトデータを適用していきます。

SWELLデモサイトデータで着せ替えてみよう

くま太君

WordPressにデモサイトデータをインポートするのに、さっきのプラグイン、『Customizer Export/Import』を使っていくよ。

すでにWordPressテーマ『SWELL』を、インストール・適用していることを前提に、進めていきます。

STEP
管理画面の『外観』→『カスタマイズ』をクリック
STEP
『エクスポート/インポート』をクリック

『カスタマイズ』に入ると、1番下にインストールしたプラグイン、『Customizer Export/Import』の設定ボタンが出現します。

STEP
『書き出し』ボタンをクリック(バックアップ用データの確保)

通常のSWELL上で、変更の状態が分かりやすいように、以下の2点のみ設定しています。

①タイトルロゴ
②色変更

『書き出し』ボタンをクリックすると、①②を変更した現状の元のSWELLデータをエクスポート(ダウンロード)します。

これがあれば、下記図の元のSWELL状態のデザインに戻す事ができます

バックアップと思って、エクスポートしておくと良いでしょう。

SWELL-着せ替えデモサイトデータの設定-1
STEP
デモサイトデータをインポートする
くま太君

デモサイトデータのダウンロード方法は、先の見だしを確認してね。

①の『選択』ボタンをクリックして、ダウンロードしておいたデモサイトデータを選択する。

この時、ダウンロードした圧縮データ(.zip)は解凍しておき、『swell_demo01.dat』のような、『.dat』ファイルを使用します

今回は『swell_demo06.dat』をインポートしていきます。

データをダウンロードすると、ダウンロードフォルダにデータが入ります。
『選択』ボタンから、ダウンロードフォルダ内のデモサイトデータが出現しない場合は、『.dat』データを『デスクトップ』などに移動させれば、問題無く選択することができます。

②「画像ファイル〜」にはチェックをいてておきます。

③『インポート』ボタンをクリック

SWELL-着せ替えデモサイトデータの設定-2
STEP
デモサイトデータに着せ替え完了

選択した『swell_demo06.dat』が無事にインポートされ、反映されました。

SWELL-着せ替えデモサイトデータの設定後画面
くま太君

お疲れ様でした!
たったこれだけで、デモサイトデータに着せ替え完了だよ!

あとは、『外観』→『カスタマイズ』で自分でカスタマイズしていけば、ステキサイトが出来上がり!

デモサイトデータをインポートしたら、前の設定が無くなっているので、注意が必要です。

『外観』→『カスタマイズ』で、各種設定をしていきましょう。

ここからのカスタマイズは、良かったら、こちらを参考にしてみてください。

SWELL|デザイン力不要?!デモサイト着せ替えでプロ級サイトに!

SWELLオリジナルデザインに戻したい!

くま太君

やっぱり、オリジナルのSWELLの状態に戻したい。
そんなときは?

デモサイトデータをインポートする前に『Step3』で『書き出し』しておいた、バックアップ用の『.dat』ファイルを使います

ファイル名は、ご自分で名前を付け直しても、問題ありません。

むしろ、バックアップ用のファイルだと分かるように、ファイル名を変更しておいた方が、紛れがなくて安心です

こちらも、変更の状態が分かりやすいように、ロゴ画像と、中央の文字を変更しておきました。

これを、1番最初のSWELLオリジナルデザインに戻します。

やり方は、デモサイトデータをインポートしたときと同じです。

くま太君

読み込むファイルは、もちろんバックアップしておいた『.dat』ファイルだよ!

SWELL-着せ替えデモサイトデータのバックアップ-1

これで、元のSWELLのデザインの状態に戻りました。

最初に元のSWELLのデザイン上で設定したロゴ画像も、紫色の帯も、そのまま復元できました。

SWELL-着せ替えデモサイトデータのバックアップ-2

さらに、元のSWELLデザインに戻す前に、『書き出し』で、デモサイトデータをバックアップしておけば、同様の処理ができます。

今回のまとめ。簡単な設定でサイトデザインをオシャレに!

くま太君

ちょっとした準備は必要だけど、とても簡単にでもサイトデータに着せ替えすることができたね。

SWELLの元デザインだけでも、オシャレでステキなのに、6種類もの着せ替えデータが用意されています。

SWELL|デザイン力不要?!デモサイト着せ替えでプロ級サイトに!

もちろん、SWELLユーザーであれば、無料で利用できます

デモサイトデータを使う、おおまかな手順は以下の通りです。

  1. 着せ替えたい、デモサイトデザインを決める
  2. デモサイトデータをダウンロード
  3. プラグイン『Customizer Export/Import』をインストール
  4. デモサイトデータをインポート
  5. お好きにカスタマイズして、出来上がり!

実際にデモサイトデータを適用して着せ替えを行ったところ、簡単にオシャレデザインに変更ができました

着せ替えが終了した後は、ご自分でカスタマイズをしていくことになります。

・色を変える
・ロゴを設定する
・その他、各種詳細設定

ですが、大枠が出来上がっていればこっちのもの!

『外観』→『カスタマイズ』を使って、自分オリジナルのサイトに仕上げて行きましょう。

お疲れ様でした。

ここまでお読みいただき、ありがとうございました。

くま太君

SWELLの着せ替え用デモサイトデザインをもう一度確認したい!
という方は、こちらの記事を参考にしてみてね!

SWELL|デザイン力不要?!デモサイト着せ替えでプロ級サイトに!

\ SWELLだと、設定も編集もサクサクできる! /
WordPressテーマ『SWELL』の詳細は公式サイトで!

☆読んでくれてありがとう!よかったらシェアしてね!☆
目次