この記事は4-5-1.SWELLで作る教室サイトのトップページ設計〈前編〉|着せ替えデザイン応用の抜粋・再編成です。SWELL公式HPでダウンロードできる着せ替えを使って、簡単にHPを作る方法を紹介します。
目次
着せ替えデザインを導入する（SWELLデモデータの読み込み）
💡 ここでやること
- SWELL公式の「着せ替えデザイン」を使って、初期デザインを導入
- トップページ・ブログ・見出しデザインなどが一瞬で整う
- あとで自分の写真や文章に差し替えるだけの状態を作る
説明アイコンSWELL子テーマを有効化したところから話を進めますよ。
🔧 着せ替え手順
STEP
SWELLの「デモサイト着せ替えファイル」をダウンロードする
着せ替えDEMOが6種類用意されています。今回はDEMO２を選択しました。下のボタンから公式サイトに移動します。お好きなものをダウンロードしてください。
STEP
ダウンロードしたZIPファイルを解凍する
Zipファイルをダブルクリック→展開をクリック。これで、解凍されたファイルが出来ます。
STEP
「Customizer Export/Import」をプラグインし、有効化する
STEP
外観→カスタマイズ→エクスポート/インポート
STEP２で解凍したファイルを選択し、インポートをクリック
📷 デモインポート後の表示
💡 ポイント
- SWELLの「着せ替え」では、ウィジェット・トップページ構成・メニュー位置まで自動設定される。
- HTMLやCSSの知識がなくても、5分で“形のあるサイト”が完成。
- あとは文字・写真を差し替えるだけで、オリジナルサイトに仕上がります。
まとめ
説明アイコンすでに公開しているHPの雰囲気を変えたい場合に、この着せ替えを使うと簡単に整います。
1から作る場合でも、DEMOと同じ構成で良ければ、文字と写真を差し替えれば完成です。
どこに、何が入っていて、どこに表示されるかが理解できないと難しく感じるかもしれません。
SWELLのDEMOは6種類用意されています。
気に入った構成があれば、着せ替え機能を使ってみるという方法もあります。
お試しください。
コメント