【SWELL】デモサイトの着せ替えデザインファイルの使い方を・エラーが表示される場合の対応方法を解説

【比較】テーブルの機能の違い
初心者

SWELLのデモサイトの着せ替えデザインを使ってみたい!
どうやって自分のサイトで使えばいいの?
やり方がわからない
作業の途中でエラーが出た…

そんなお悩みを解決します。

SWELLのデモサイトの着せ替えデザインデータを自分のブログに読み込む方法を初心者向けに図解しました。難しい作業は一切ありません。使いたい着せ替えデザインが決まっている人なら5分程度でデモサイトと同等のデザインに仕上がります!

目次

【基礎知識】SWELLの着せ替えデザインって何?

【基礎知識】SWELLの着せ替えデザインって何?

「着せ替えデザイン」はSWELLが購入者向けに提供している無料のデザインファイルです。

自分のサイトに着せ替えデザインを読み込むとデモサイトと同じデザインに早変わりする便利な代物です。

6種類の着せ替えデザインを利用できる

SWELL公式サイト上に現在6つのデモサイトが公開されています。

デモサイトの着せ替えデザインファイルをどれでも利用できます。

デモサイトNo.1」を見る
デモサイトNo.2」を見る
デモサイトNo.3」を見る
デモサイトNo.4」を見る
デモサイトNo.5」を見る
デモサイトNo.6」を見る

SWELL公式:デモサイト一覧ページ

着せ替えデザインデータは何回でもダウンロードできます。ダウンロード回数に制限はありません。

SWELLの着せ替えデータはSWELL購入のみ利用できます。

デモサイトの着せ替えデザインファイルを使う手順

デモサイトの着せ替えデザインファイルを使う手順

着せ替えデザインを使う手順を解説します。

まずは作業全体の流れです。

全体の流れ

  1. マイページにログインする
  2. デモデータをダウンロードする
  3. Customizer Export/Importプラグインをインストールする
  4. デモデータを読み込む
かんた

各ステップを詳しく図解します!

着せ替えデザインを使う手順

STEP
マイページ(会員ページ)にログインする

SWELLの着せ替えデータをダウンロードするにはマイページにログインする必要があります。

マイページに移動します。

SWELLマイページにログインする
SWELLマイページ画面

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

ログインは「こちら」をクリック。

ログインはこちら画面
ログインページ

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

SWELLマイページへログインする画面

CAPTCHAコードはランダムに「ひらがな」が表示されます。

STEP
デモデータをダウンロード

マイページにログインした状態で「デモサイト着せ替えデザインファイルページ」に移動します。

ページの中頃に着せ替えデザインデータの一覧が表示されるので「ダウンロード」ボタンからどれでも好きなデザインをダウンロードします。

SWELL着せ替えデザインデータをダウンロードする
着せ替えデザインファイルをダウンロード

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

初心者

解凍ってどうやるの?

かんた

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

.datファイルを保存
解凍して.datファイルを保存する

今回の例ではデモサイト1の着せ替えデザインを使います。

zipファイルを解凍し「swell_demo01.dat」ファイルを保存しておきます。

ファイル名はデモごとに異なります。

STEP
プラグインをインストール

着せ替えデザインファイルをワードプレスに読み込むには「Customizer Export/Import」プラグインが必要です。

自身のサイト上でCustomizer Export/Importプラグインをインストールし有効化します。

Customizer Export/Importプラグインは無料です!

かんた

プラグインのインストールを解説しますね!
やり方知っている人はこのステップを飛ばしてもOKです。

Customizer Export/Importページへ移動し「ダウンロード」をクリック。

Customizer Export/Importをダウンロード
Customizer Export/Importをダウンロード

customizer-export-import.zipというファイルをダウンロードできれたら次のステップに進みます。

ダウンロードしたファイルは解凍せずそのまま任意の場所に保存してください

使っているパソコン環境によっては末尾の「.zip」という部分が表示されないことがあります。

ワードプレスにログインし「プラグイン」→「新規追加」をクリック。

WordPressでプラグインをインストール
プラグインをインストール

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

プラグインのアップロード
プラグインのアップロード

参照」をクリック。

プラグインをインストール
プラグインをインストール

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

プラグインを選択
プラグインを選択

プラグインファイルは解凍せずダウンロードした.zip形式の状態で選択してください。

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

プラグインをインストール

数秒から10秒程度かかりますので、そのまま待ちます。

プラグインを有効化」をクリック。

プラグインを有効化
プラグインを有効化
かんた

Customizer Export/Importプラグインのインストール作業はこれで完了です。次のステップに進みましょう。

STEP
着せ替えデザインファイルを読むこむ

このステップではデモサイトの着せ替えデータを自分のサイトに反映させます。

外観」→「カスタマイズ」の順にクリック。

ワードプレスダッシュボードで外観を選択
ワードプレスダッシュボードで外観を選択

カスタマイザーと呼ばれる画面が開きます。

左側のメニュー部分を下にスクロールし最下部にある「エクスポート/インポート」をクリック。

カスタマイザーの一番下にあるエクスポート/インポートオプション
カスタマイザーの一番下にあるエクスポート/インポートオプション

参照」をクリック。

デモデータを読み込む
sささnさんさ

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

デモデータを選択
デモデータを選択

今回の例ではデモサイト1のデータを読み込みんでいます。ファイル名はデモサイトごとに異なります。

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

デモサイトの着せ替えデータをインポート
デモサイトの着せ替えデータをインポート

デモサイト上の画像も読み込みたい時は「画像フィルをダウンロードしてインポートしますか?」にチェックを入れた状態で「インポート」をクリックしてください。

数秒~10秒程度で読み込みが終わります。

正常に読み込みが完了するとカスタマイザー上で着せ替えデザインが反映されたことが確認できます。

着せ替えデザインの読み込み作業が完了
着せ替えデザインのデータ読み込み完了した画面
かんた

以上で着せ替えデザインの読み込み作業は終了です。

Customizer Export/Importプラグインは削除してOK

着せ替えデータの読み込みが完了した時点でCustomizer Export/Importプラグインは不要です。プラグインを削除してもデモサイトの着せ替えデザインデータはサイト上に残ります。不要なプラグインはムダにディスクスペースを専有するので削除しましょう。

後で削除しようとすると、「このプラグインって何用だっけ?忘れたけど、なにか影響でるかもしれないからそのままにしておこう」となりがちです。

着せ替えデザインデータFAQ

着せ替えデザインデータ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のデモサイトと同じデザインに早変わりする「着せ替えデザイン」の使い方について解説しました。

デモサイトのページに自分好みのものがある場合はサクッと読み込むと時短になりますので活用してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
目次