sucreSWELLのデモサイトには、いろいろなデザインパターンが用意されています。
その中でも、私は「02番」のデモを選びました。
理由は、サイト全体の構成やカテゴリの見せ方がとても使いやすそうだったから、
使っている方も多く参考になる情報が多いからです。
ちなみに、SWELLには公式デモサイトが複数用意されていて、好みや目的に合わせて選ぶことができます。
デザイン選びの参考にもなるので、ぜひチェックしてみてください。
今回使用したのは「DEMO 02（着せ替えテーマ）」です👇
デモサイトインポート手順
着せ替えインポートとは？
SWELLでは、公式デモサイトと同じレイアウトを簡単に再現できる「着せ替えデータ」が提供されています。
これを使うことで、初期デザインが整い、カスタマイズのスタートがとてもスムーズになります。
着せ替えデータを使えば、ゼロから作り込む手間が減り、
デザインのベースを作ることに集中できるので、初心者にもとても優しい機能です🌿
この記事では、
「SWELLデモ02」をインポートして、私のホームページ作りをした手順をまとめていきます。
インポート作業の準備
まず、着せ替えに必要なデータを準備します。
SWELL公式サイトの
🔗デモサイトデータ一覧ページから、
「swell_demo02.dat_.zip」ファイルをダウンロードします。
ダウンロードしたZIPファイルを解凍する
SWELL着せ替えに必要なプラグイン｜Customizer Export/Importの導入
着せ替えデータをインポートするためには、
「Customizer Export/Import」というプラグインが必要です
（👉 このプラグインについては、こちらの解説記事で詳しく説明されています。）
🛠 WordPress管理画面 ＜ プラグイン ＜ プラグインを追加
🔍 検索欄に「Customizer Export/Import」と入力
対象のプラグインが表示されたら
👉「インストール」→「有効化」をクリック
着せ替えデータのインポート手順
🛠️ WordPress管理画面＜外観＜カスタマイズ ＜ エクスポート/インポート
（下のほうにある 「Customizer Export/Import」をインポートすると表示される）
.zipファイルを解凍し、swell_demo02.datファイルを取り出します。- WordPress管理画面「外観 → カスタマイズ → エクスポート/インポート」に進みます。
- 「ファイルを選択」から
swell_demo02.datを選びます。 - 「画像ファイルをダウンロードしてインポートしますか？」に✅チェックを入れます。
- 最後に「インポート」をクリック！
インポート時のチェックポイント
- インポート後、一度「外観」や「トップページ」を確認します。
- 必要に応じて、メニューやウィジェットの再設定が必要な場合もあります。
まとめ 着せ替え後のサイトイメージ
着せ替えインポートが完了すると、
デモサイトとほぼ同じデザインのホームページができあがります。
sucreこれから少しずつ、
世界にひとつだけの「私のホームページ」を育てていきたいです🌿
このあと、私は「カラー設定」や「レイアウトの微調整」を行い、
自分らしいサイト作りを始めました。
🔗参考リンク集
- 🔗 デモサイト02の特徴について（公式デモページ）
→ SWELLデモ02のデザインや特徴が紹介されています。 - 🔗 SWELLデモサイトデータ一覧ページ
→ デモデータのダウンロードと、インストール方法がまとめられています。 - 🔗 Customizer Export/Importプラグイン解説（Nelog）
→ WordPressのテーマ設定をインポート・エクスポートできるプラグインについて詳しく解説されています。
