MENU
カテゴリー
アーカイブ

SWELLのデモサイトのデザインに着せ替える方法【超具体的に解説】

URLをコピーする
URLをコピーしました!
悩む人

SWELLのデモサイトに着せ替えたい。


でも、操作してみたら複雑すぎて分からなかったです。


なので、着せ替える方法を具体的に教えてください。

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

僕も実際にやってみて複雑だと感じました。なので、迷わずにできるよう、画像を使って説明します。

この記事で分かること
  • SWELLの着せ替えデザインの種類
  • SWELLデモサイトのデザイン着せ替え方法
  • デザインの着せ替えが終わった後の作業【4つ】

SWELLの着せ替えデザインの導入法って、複雑ですよね。

  • データファイルはどこにあるの
  • デザインを着せ替えた後の設定

とか...

ため

僕はDEMO1をダウンロードした時、難しいと実感。会員フォーラムを使って解決しました。

しかし、そのおかげで、迷わずに進める方法が分かりました。

そこで、今回は

SWELLのデモサイトのデザインに着せ替える方法【超具体的に解説】

についてお伝えします。

ため

記事に沿うだけで、

・デザインの着せ替え
・着せ替え後の設定

ができますよ。

ちなみに、「SWELLってどんなテーマ?」と思う方は、最初に下記をご覧ください。

それでは、本文を見ていきましょう。

目次

\ みんな使い始めてる /

WordPressテーマSWELL【あなたのブログ生活を180度変える魔法のテーマ】

HTMLの操作不要!やるべきことは記事を書くだけ!

・1/2の労力でライバルに圧倒的な差を付けられる!

・Google検索1ページ目はあなたのものです!

人気ブロガーになるのも時間次第です!

参考【満足度4.5】SWELLを使った感想レビュー|デメリット4つ・メリット7つを解説

SWELLの着せ替えデザインは6種類【デモサイト】

まず、SWELLの着せ替えデザインを見ていきましょう。

DEMO1
DEMO2
DEMO3
DEMO4
DEMO5
DEMO6

全部で6種類あります。デモサイトで使われているものですね。

ため

カスタマイズ済みなので、入れるだけで美しいブログが作れますよ。

詳しく知りたい方は、SWELLのデモサイトをご覧ください。イメージが掴めますよ。

【図解】SWELLデモサイトのデザイン着せ替え方法

ここからは、デザイン着せ替え方法を解説します。

SWELLデモサイトのデザイン着せ替え方法
  • 公式サイトでSWELLを購入する
  • 『Customizer Export/Import』をインストールする
  • 公式サイトからデータファイルをダウンロードする
  • 『着せ替えデザインファイル』をインストールする

一つずつ見ていきましょう。

公式サイトでSWELLを購入する

まず、公式サイトでSWELLを購入しましょう。

ため

というのは、SWELLを購入していないと使えないからです。

具体的な導入手順は以下をご覧ください。画像付きで説明しているので、スムーズに導入できますよ。

関連記事

>>【超具体的】SWELLの導入手順を「丁寧」に解説|最初にやることも

Customizer Export/Import』をインストールする

次に、『Customizer Export/Import』をインストールします。

ため

手順は以下のとおりです。

インストール手順

  1. 「ダッシュボード」→「プラグイン」→「新規追加」
  2. 検索窓に『Customizer Export/Import』を入力
  3. 「今すぐインストール」をクリック
  4. 「有効化」をクリック

①:「ダッシュボード」→「プラグイン」→「新規追加」

「ダッシュボード」→「プラグイン」→「新規追加」と進みます。

「ダッシュボード」→「プラグイン」→「新規追加」

②:検索窓に「Customizer Export/Import」と入力

検索窓に「Customizer Export/Import」と入力してください。

検索窓に『Customizer Export/Import』と入力

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

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

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

④:「有効化」をクリック

「有効化」をクリックします。

「有効化」をクリック
ため

これで完了です。

公式サイトからデータファイルをダウンロードする

次に公式サイトからデータファイルをダウンロードします。

ため

手順は以下のとおりです。

ダウンロード手順

  1. 「SWELL公式サイト」→「フォーラム」
  2. 「マイページ」をクリックする
  3. 「ログインはこちら」をクリックする
  4. 「ユーザー名などの入力」→「サインイン」
  5. 「SWELL公式サイト 」→ 「デモサイト」
  6. 『デモサイトのデザインに着せ替えるためのデータ』をクリック
  7. お好きなデザインをダウンロードする
  8. 解凍して「.datファイル」を取り出す

①:「SWELL公式サイト」→「フォーラム」

「SWELL公式サイト」→「フォーラム」と進みます。

「SWELL公式サイト」→「フォーラム」

②:「マイページ」をクリックする

「マイページ」をクリック。

「マイページ」をクリック

③:「ログインはこちら」をクリックする

下記が表示されたら、「ログインはこちら」をクリックします。

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

④:「ユーザー名などの入力」→「サインイン」

ユーザー名・パスワード・キャプチャーを入力し、「サインイン」をクリック。

「ユーザー名・パスワード・キャプチャーを入力」→「サインイン」

④:「SWELL公式サイト 」→ 「デモサイト」

以下のボタンをクリックし、SWELL公式サイトに進んでください。

画面が切り替わったら、「デモサイトをクリック」します。

「SWELL公式サイト 」→ 「デモサイト」

⑤:「デモサイトのデザインに着せ替えるためのデータ」をクリック

画面をスクロールし、「デモサイトのデザインに着せ替えるためのデータ」をクリック。

「デモサイトのデザインに着せ替えるためのデータ」をクリック

⑥:お好きなデザインをダウンロードする

お好きなデザインを選び、「ダウンロード」をクリックします。

好きなデザインをダウンロード

⑦:解凍して「.datファイル」を取り出す

画面左下のタブをクリック。

画面左下のタブをクリック

着せ替えデザインの「.datファイル」を、デスクトップに移動します。

「.datファイル」をデスクトップに移動

『着せ替えデザインファイル』をインストールする

最後は、ワードプレスに着せ替えデザインのファイルをインストールします。

ため

手順は以下のとおりです。

インストール手順

  1. 「ワードプレスにログイン」→「外観」→「カスタマイズ」
  2. 「エクスポート/インポート」をクリックする
  3. 「.datファイルを選択」→「インポート」

①:「ワードプレスにログイン」→「外観」→「カスタマイズ」

「ワードプレスにログイン」→「外観」→「カスタマイズ」と進みます。

「ワードプレスにログイン」→「外観」→「カスタマイズ」

②:「エクスポート/インポート」をクリックする

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

「エクスポート/インポート」をクリック

③:「.datファイルを選択」→「インポート」

着せ替えデザインの「.datファイル」を選択 → チェックボックスにレ点 → 「インポート」をクリックします。

「.datファイルを選択」→ チェックボックスにレ点 →「インポート」
ため

これで完了です!

デザインの着せ替えが終わった後の作業【4つ】

ここでは、デザインを着せ替えた後にやることをお伝えします。

デザイン着せ替え後の作業
  1. SNS情報を設定する
  2. ヘッダーロゴを変更する
  3. コピーライトを書き換える
  4. 『Customizer Export/Import』を削除する

一つずつ見ていきましょう。

SNS情報を設定する

着せ替えデザインのSNS情報は、こうなっています。

ため

なので、変更しましょう!

手順は以下のとおりです。

変更手順

  1. 「ダッシュボード」→「外観」→「カスタマイズ」
  2. 「SNS情報」を選択
  3. SNS情報の入力

「ダッシュボード」→「外観」→「カスタマイズ」

「ダッシュボード」→「外観」→「カスタマイズ」と進みます。

「ダッシュボード」→「外観」→「カスタマイズ」

「SNS情報」を選択

「SNS情報」を選択。

「SNS情報」を選択

SNS情報の入力

ご自身のSNS情報を入力します。

SNS情報を入力 →「公開」
ため

「公開」を押して完了です。

ヘッダーロゴを変更する

着せ替えデザインのヘッダーロゴは、こうなっています。

ため

これは変更した方が良いですね。

変更手順は以下のとおりです。

変更手順

  1. 「ダッシュボード」→「外観」→「カスタマイズ」
  2. 「ヘッダー」をクリック
  3. ロゴ画像をアップロード
  4. アップロードしたロゴ画像を削除

①:「ダッシュボード」→「外観」→「カスタマイズ」

「ダッシュボード」→「外観」→「カスタマイズ」と進みます。

「ダッシュボード」→「外観」→「カスタマイズ」

②:「ヘッダー」をクリック

「ヘッダー」をクリック。

「ヘッダー」をクリック

③:画像をアップロード

「画像を選択」をクリックして、画像をアップロードします。

「画像を選択」→ 「画像をアップロード」

この時の画像は何でもOKです。

④:アップロードしたロゴ画像を削除

「削除」をクリック。

「削除」をクリック

すると、ロゴが変わります。

ため

確認したら、メニュー画面上の「公開」を押して完了です。

「公開」をクリック

コピーライトを書き換える

着せ替えデザインのコピーライトは、こうなっています。

ため

なので、書き換えましょう!

手順は以下のとおりです。

書き換え手順

  1. 「ダッシュボード」→「外観」→「カスタマイズ」
  2. 「フッター」をクリック
  3. コピーライトテキストの書き換え

①:「ダッシュボード」→「外観」→「カスタマイズ」

「ダッシュボード」→「外観」→「カスタマイズ」と進みます。

「ダッシュボード」→「外観」→「カスタマイズ」

②:「フッター」をクリック

「フッター」をクリック。

「フッター」をクリック

③:コピーライトテキストの書き換え

コピーライトのテキストを書き換えます。

コピーライトのテキストのの書き換え
ため

「公開」を押して完了です。

「公開」をクリック

『Customizer Export/Import』を削除する

最後は、着せ替えデザインをインストールした際に使ったプラグインを削除します。

ため

導入したままだと、サイトが重くなって、表示速度が遅くなるんですよね~。

なので、削除しましょう!!

削除手順は以下のとおりです。

削除手順

  1. 「ダッシュボード」→「プラグイン」→「インストール済みプラグイン」
  2. 『Customizer Export/Import』を無効化
  3. 『Customizer Export/Import』を削除

①:「ダッシュボード」→「プラグイン」→「インストール済みプラグイン」

「ダッシュボード」→「プラグイン」→「インストール済みプラグイン」と進みます。

「ダッシュボード」→「プラグイン」→「インストール済みプラグイン」

②:「Customizer Export/Import」を無効化

「Customizer Export/Import」を無効化。

『Customizer Export/Import』を無効化

③:『Customizer Export/Import』を削除

「削除」 →「OK」をクリックします。

「削除」→「OK」
ため

これで完了です!

SWELLのデモサイトのデザインに着せ替える方法【超具体的に解説】:まとめ

お疲れ様でした。

SWELLのデザイン着せ替えが完了しましたね!

ため

既にカスタマイズが施されているので、そのままでも大丈夫ですよ!

悩む人

でも、初期設定とかあるよね?

と思った場合、以下の記事を参考にしてみてください。

今回は以上です。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメント一覧 (2件)

コメントする

目次
閉じる