【完全ガイド】SWELLデモサイトのダウンロードと簡単カスタマイズ方法

そんなお悩みを抱えていませんか？

SWELLのデモサイトを活用すれば、プロ級のおしゃれサイトを簡単に作ることができます。

こちらのページでは、SWELLデモサイトの着せ替え手順や基本的な設定方法、さらにカスタマイズのポイントまで詳しく解説していきます。

SWELLをまだインストールしていない方は、さきにこちらをお済ませください。

  ワードプレスにSWELLテーマをインストールする方法はこちら

SWELLのデモサイトとは？

WordPressテーマ「SWELL」の公式サイトでは、洗練された６種類のデモサイトが公開されています。

SWELLデモサイト01

SWELLデモサイト02

SWELLデモサイト03

SWELLデモサイト04

SWELLデモサイト05

SWELLデモサイト06

SWELLデモサイトの特徴

SWELLデモサイトの特徴はつぎの３つ。

それぞれ解説していきます。

簡単に着せ替えできる

SWELLの公式サイトでは、デモサイトごとに『着せ替えファイル』が無料で提供されています。

好きなデモサイトの『着せ替えファイル』をダウンロードして、自分のサイトに取り込むだけで、プロが作ったようなサイトデザインに変えることが可能です。

テンプレートは６種類

『着せ替えファイル』はデモサイトごとに用意されているので、全６種類あります。

ブログサイト向けのものから、ビジネスサイト向けのものまで、目的に合わせて自由に選ぶことが可能。サイトで使う画像や色味をかえるだけで、あなただけのオリジナルサイトが作れちゃいますよ。

コンテンツ作成に集中できる

サイトデザインをゼロから考える必要がないので、すぐにブログ記事や商品紹介などのコンテンツ作成に取りかかれます。

デザインが整った状態からスタートできるため『早く情報を発信したい！』という方にぴったりです。

デモサイトに着せ替える前に準備しておくこと

デモサイトに着せ替えるまえに、つぎの４つを済ませておきましょう。

サイトデザインを自分好みにカスタマイズしたい方は、SWELLテーマ（親テーマ）をインストールしてから、子テーマをインストールして有効化しておいてください。

くわしいやり方については、こちらの記事にまとめています。

  ワードプレスにSWELLテーマをインストールする方法はこちら

SWELLデモサイトへの着せ替え手順３ステップ

SWELLのデモサイトと同じデザインに着せ替える手順はつぎのとおり。

STEP1.デモデータをダウンロードしよう

まずはSWELLのデモサイト一覧から、あなたのお好きなデモサイトを１つえらんでください。

お気に入りのデモサイトが決まったら、SWELLデモデータのダウンロードページをひらきます。

ダウンロードしたいデモサイト番号の右側にある『ダウンロード』ボタンをクリック。

ダウンロードしたzipファイルは、そのままでは使えないので、ファイルを展開していきましょう。

パソコンのダウンロードをひらいて、ダウンロードしたファイルの上で右クリック。

『すべて展開…』をクリック。

展開先を確認して『展開』ボタンをクリック。

展開されたファイル内にある『swell_demo〇〇.dat』をつかって、デモサイトに着せ替えていきましょう。

STEP2.WordPressに『Customizer Export/Import』プラグインを追加しよう

ワードプレスをひらいて、画面左側にあるメニューの『プラグイン』にカーソルをもっていき、表示された『新規プラグインを追加』をクリック。

プラグインの検索に『Customizer Export/Import』と入力。

検索結果に表示されたCustomizer Export/Importにある『今すぐインストール』ボタンをクリック。

そのまま『有効化』ボタンをクリック。

STEP3.SWELLのデモデータをWordPressにインポートしよう

画面左上にある『カスタマイズ』をクリック。

画面左側のメニューにある『エクスポート/インポート』をクリック。

インポートの『ファイルを選択』ボタンをクリック。

さきほど展開したファイル内にある『swell_demo〇〇.dat』を選択。

画像ファイルをダウンロードしてインポートしますか？のチェックボックスにチェック。

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

【補足】WordPressから『Customizer Export/Import』プラグインを削除しよう

不必要になったプラグインは削除しておきましょう。

ワードプレスをひらいて画面左側のメニューにある『プラグイン』をクリック、Customizer Export/Importの下にある『無効化』をクリック。

無効化できたら『削除』をクリック。

SWELLデモサイトのデザインをカスタマイズしよう

SWELLでは、デモサイトのデザインに着せ替えたあとで、さらに自分好みにカスタマイズすることができます。

カスタマイズするために必要な知識

サイトデザインをカスタマイズするには『カスタマイザー』を使います。

画面上部のメニューにある『カスタマイズ』をクリックすると、

カスタマイザー画面をひらくことができます。

サイト全体の設定だけでなく、ヘッダーやフッターなど、サイトの主要パーツごとに細かい設定ができるので、とっても便利！専門的な知識は、まったく必要ありません。

ちなみに、カスタマイザーでは設定できないデザイン変更については、

などの専門知識が必要になってきます。

着せ替え後にカスタマイズしておきたい項目

デモサイトへの着せ替えがおわったら、必ず変更しておきたいのが次の３つ。

順番にやっていきましょう。

メインビジュアルを設定する方法

画面左側のメニューにある『トップページ』をクリック。

『メインビジュアル』をクリック。

サイトのメインビジュアルは、こちらで変更できます。

メインビジュアルに動画を配置したい場合は『動画の設定』よりファイルをアップロードしてください。

メインビジュアルに画像を配置したい場合は、メインビジュアルの表示内容で『画像』を選択。

『各スライドの設定』より画像をアップロードしてください。

『フィルター処理』をつかえば、さらにあなた好みのメインビジュアルにカスタマイズできます。

メインビジュアルの上にテキストを配置したい場合は『メインテキスト』や『サブテキスト』にお好きな文字列を入力します。

メインビジュアルの上にテキストを配置したくない場合は、空欄にしてください。

設定が終わったら『公開』ボタンをクリック。

メインビジュアルの設定が保存できたら、左向き矢印をクリック。

つづけて、左向き矢印をクリック。

サイトの基本カラーを設定する方法

画面左側にある『サイト全体設定』をクリック。

『基本カラー』をクリック。

基本カラー設定画面がひらきました。

メインカラーの『色を選択』ボタンをクリック。

メインに使いたい色のカラーコードを入力してください。カラーパレットのお好きな色の上を直接クリックしても大丈夫です。

メインカラーが決まったら、テキストカラーの『色を選択』ボタンをクリック。

テキストカラーに『#333333』と入力します。

テキストカラーは真っ黒『#000000』よりも少し明るい黒『#333333』の方が、読者の目に負担がかかりません。

つづいて、リンクカラーの『色を選択』ボタンをクリック。

テキストカラーは『#0000ee』と入力。

『#0000ee』の青色は多くのユーザーにとって『これはクリックできるリンクだ』と認識されています。青色以外の色だとリンクと気づいてもらえず、クリック率が下がりやすくなります。

さいごに背景色の『色を選択』ボタンをクリック。

背景色には『#ffffff』と入力。

『#ffffff』の白色は、文字や画像がきちんと認識できるため、テキスト中心のブログサイトにおすすめです。

基本カラーがすべて指定できたら、画面右上にある『公開』ボタンをクリック。

画面左上にある左向き矢印をクリック。

つづけて、左向き矢印をクリック。

フッターのコピーライトを設定する方法

画面左側にある『フッター』をクリック。

フッター設定画面がひらいたら、ページを下にスクロール。

コピーライトのテキストに表示されている文字列を削除して、あなたのサイト名を入力。

入力できたら、画面右上にある『公開』ボタンをクリック。

画面左上にある左向き矢印をクリック。

SNS情報を設定する方法

画面左側にある『SNS情報』をクリック。

SNS情報設定画面がひらいたら、サイトと連携させたいSNSのプロフィールページURLを入力してください。

サイトとSNSを連携させたくない場合は、空欄にしてください。

ページを下にスクロールして『RSSページURL』に表示されている文字列を削除。

すべて入力できたら、画面右上にある『公開』ボタンをクリック。

画面左上にある『×』マークをクリックすると、カスタマイザー画面を閉じることができます。

その他の細かい設定については、SWELL公式サイトにある設定マニュアルをご覧ください。

SWELLで自作したデモサイトを紹介

こちらは、私がSWELLで作ったデモサイトです。

グラフィックデザイナーとしての経験と、ゼロから100万PVを達成したウェブサイト運営の実績を活かし、おしゃれで使いやすいホームページの作り方と、集客につながるSEO対策を講座にてお伝えしています。

SWELLのデモサイトを初期状態にもどす方法

SWELLのデモサイトを初期状態にもどす方法も解説しておきます。

STEP1.カスタマイザーのバックアップをとろう

画面左上にある『カスタマイズ』をクリック。

『エクスポート/インポート』をクリック。

『エクスポート/インポート』が表示されない場合は『Customizer Export/Import』プラグインを追加してください。

『書き出し』ボタンをクリック。

これでカスタマイザーのバックアップがダウンロードできました。

STEP2.SWELL設定でカスタマイザーをリセットしよう

画面左側にある『SWELL設定』にカーソルをもっていき、表示された『SWELL設定』をクリック。

画面上部のメニューにある『リセット』ボタンをクリック。

リセット画面がひらいたら、画面を下にスクロール。

カスタマイザーのリセットにある『デフォルトに戻す』ボタンをクリック。

メッセージを確認してから『OK』ボタンをクリック。

これでカスタマイザーを初期状態にもどすことができました。『OK』ボタンをクリック。

【補足】カスタマイザーを復元する方法

カスタマイザーを初期化したものの、やはり元にもどしたいなという方向けに、カスタマイザーを復元する方法もお伝えしておきます。

画面左上にある『カスタマイズ』をクリック。

画面左側のメニューにある『エクスポート/インポート』をクリック。

インポートの『ファイルを選択』ボタンをクリック。

STEP1でダウンロードしておいた『swell_export.dat』ファイルを選択。

画像ファイルをダウンロードしてインポートしますか？のチェックボックスにチェック。

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

SWELLデモサイトのまとめ

SWELLデモサイトへの着せ替え手順は、次の３ステップです。

カスタマイザーを使えば、あなた好みのデザインにカスタマイズすることもできます。
  SWELLを使って私がつくったデモサイトはこちら

『サイトデザインが整うまで誰にも見られたくない…』という方は、メンテナンスモードに切り替えておくといいでしょう。

  メンテナンスモードでサイト全体を非公開にする方法

サイトデザインがある程度決まったら、必要なコンテンツ作成に取りかかりましょう。

 ブログ最初の記事作成マニュアル