SWELLのデモサイト一覧｜ダウンロードで初心者もプロ級デザインに！
「デモサイトへの着せ替え方法は？」
「着せ替え後の注意点ってある？」
「デモサイトをインポートできない…」
この記事では、そんな方に向けて、SWELLのデモサイトへ着せ替える方法を解説します。
かめコンパスこんにちは、かめコンパスです！
この記事を読めば、あなたも簡単に
- SWELL独自のデモサイトに着せ替えができる
ようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、おしゃれなデザインでブログ運営できるようになれますよ。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！
＼まず公式サイトのデザインを見てみましょう／
／特徴：シンプルで洗練されたデザイン！＼
＼SWELL購入を検討中の人はこちらもご覧ください！／
SWELLのデモサイト着せ替えデータは全6種類！
SWELLには無料で使えるデモサイト着せ替えデータが6種類あります。
以下の画像は、公式サイトで公開されているデモサイトです。
＼タブの切り替え／
特徴
- モノクロを基調とした万人受け型デザイン
- ヘッダー下に記事スライダーを設置していて回遊率が高い
- 新着順・人気順で記事を探せる
かめコンパスDEMO 03と06は画面いっぱいに画像が表示されるのでおすすめだよ
SWELL公式サイトではこれら6つのデモサイトとは別に、SWELLを利用している他の個人ブログも紹介されています。
デモサイト着せ替えを利用するメリット
SWELLのデモサイト着せ替えファイルを利用するメリットは以下の2つです。
- 初心者でも無料でおしゃれなサイトに仕上げられる
- カスタマイズする時間を記事の執筆に回せる
サイトの色決めやコンテンツの配置、ヘッダーやフッターの作成など、自分で一からサイトのデザインを作るにはかなりの時間と労力がかかります。
デザインセンスも必要になってくるでしょう。
ただ、SWELLのデモサイト着せ替えファイルを利用すれば、かんたんにプロ並みのおしゃれなサイトデザインを作れます。
かめコンパス私は一から自力でサイト設計したので、分からないことを調べるだけでも一苦労しました（笑）
着せ替え後も多少の修正は必要になりますが、大きくカスタマイズしなくてもいいので、記事を書くことに集中できますよ。※着せ替え後に必要な修正点は後ほど「SWELLのデモサイト着せ替え後にやるべき修正点2つ+α」で解説します。
かめコンパス副業でブログ運営している人はより時間を大切にしようね
デモサイト着せ替えをおすすめな人
SWELLのデモサイト着せ替えファイルの利用をおすすめな人は以下の3つです。
- ブログ始めたての初心者
- 自力でおしゃれにカスタマイズするのが苦手
- 限りある時間を記事の執筆に使いたい
すでに数十記事以上ブログで公開している人や他テーマからSWELLへ移行してきた人は、ある程度すでにサイト設計しているでしょう。
自力で作ったサイトデザインよりもデモサイトのほうが良いというならば別ですが、基本今までのサイトデザインを引き継いだほうがあなたのブログファンも困惑せずに済みます。
一方ブログ始めたての初心者はまだ不完全なサイト状態なので、これからカスタマイズにかける時間と労力を考えるとデモサイト着せ替えファイルの利用したほうがいいです。
かめコンパス私もブログを始めた初期にデモサイトに出会いたかったな～と思っています（笑）
自分自身にデザインセンスがないと思っている人にもおすすめですよ。
SWELLのデモサイトをダウンロード・着せ替え方法
デモサイトをダウンロード・着せ替えるには、SWELL会員サイト「SWELLERS’」に登録しておく必要があります。
会員サイトへの登録がまだの人は、下の記事を参考に登録してください。
それではデモサイトをダウンロード・着せ替えをしていきましょう。
ダウンロードしたzipファイルを解凍する
＼クリックで開く／
zipファイルの解凍方法はこちら
解凍方法①：解凍したいzipファイルを右クリックし、すべて展開...をクリックする
解凍方法②：解凍したいzipファイルを開き、ファイル内のものを別のフォルダに移動させる
この2つの方法どちらかでzipファイルを解凍できます。
解凍したフォルダにある「swell_demo〇〇.dat」というファイルを使います。※〇〇はデモデータの番号
＼クリックで開く／
プラグインをインストール・有効化する方法はこちら
WordPress管理画面で、プラグイン⇒新規プラグインを追加をクリックする
検索窓に「Customizer Export/Import」と入力する
今すぐインストールをクリックする
有効化をクリックする
これでプラグインをインストール・有効化できます。
WordPress管理画面で、外観⇒カスタマイズの順にクリックする
エクスポート/インポートをクリックする
書き出しをクリックする
「swell-export.dat」もしくは「swell_child-export.dat」というファイルがダウンロードされます。
- ファイルを選択をクリックし、先ほどダウンロードした「swell_demo〇〇.dat」ファイルを選ぶ
- インポートをクリックする
これでデモサイトの着せ替え完了です。
ただ着せ替え後の自サイトを見てもらえれば分かりますが、修正したほうがいい点がいくつかありますので紹介していきます。
かめコンパス修正する箇所は少ないから安心してね
SWELLのデモサイト着せ替え後にやるべき修正点2つ+α
SWELLのデモサイト着せ替え後に修正すべき点は以下のとおりです。
- コピーライト ※全デモデータ共通
- SNSリンク ※全デモデータ共通
- お知らせバー・記事スライダーのタイトル・タブ切り替え ※デモデータ02のみ
- メインビジュアル ※デモデータ03・05・06
それぞれ詳しく解説します。
かめコンパス自身が選んだデモデータの番号に当てはまる所を読んでね
修正点１：コピーライト
全デモデータで関係あり
SWELLのデモサイトに着せ替えた後、サイト下部にあるコピーライトが「© SWELL DEMO 〇〇.」に変わってしまいます。※〇〇はデモデータの番号
ですので、自分のサイト名に修正しましょう。
WordPress管理画面で、外観⇒カスタマイズの順にクリックする
フッターをクリックする
「コピーライトのテキスト」を自分のサイト名に変更する
公開をクリックする
かめコンパスコピーライト＝著作権なので必ず修正してね
修正点２：SNSリンク
全デモデータで関係あり
SWELLのデモサイト着せ替え後、SNSのリンク先が関係のないページに設定されます。
自分が利用しているSNSにリンクを修正し、利用していないSNSのリンクは消しましょう。
外観⇒カスタマイズ⇒SNS情報の順にクリックする
「SNSリンク設定」で自分のSNSのURLを入力し、公開をクリックする
※利用していないSNSのURLは消しましょう。
かめコンパス利用しているSNSアカウントを設定して、ユーザーとのコミュニケーションを増やそう
修正点α：お知らせバー・記事スライダーのタイトル・タブ切り替え
デモデータ02のみ関係あり
SWELLのデモサイト着せ替え後は、「お知らせバー」「記事スライダーエリアのタイトル」「タブ切り替え」の3つが、関係のないテキストに設定されます。
不要な設定は削除し、必要な設定のみ修正しましょう。
デモデータ02の修正方法
外観⇒カスタマイズ⇒サイト全体設定の順にクリックする
お知らせバーをクリックする
「お知らせ内容」「リンク先のURL」「ボタンテキスト」を修正し、公開をクリックする
修正点α：メインビジュアル
デモデータ03・05・06で関係あり
SWELLのデモサイト着せ替え後、メインビジュアルの画像やテキストなどを修正しましょう。
外観⇒カスタマイズ⇒トップページの順にクリックする
メインビジュアルをクリックする
以下の項目を修正し、公開をクリックする
＼タブの切り替え／
全画像の「メインテキスト」「サブテキスト」「リンク先URL」「ボタンテキスト」
SWELLのデモサイト着せ替えでよくある質問
ここからはSWELLのデモサイト着せ替えでよくある質問に回答します。
かめコンパス気になる質問をクリックしてね
デモサイト着せ替えデータをインポートできない
SWELLでデモサイト着せ替えデータをインポートできない原因は、プラグイン「Customizer Export/Import」をインストールしていない、もしくは有効化していないからです。
プラグインをインストール・有効化して、再度インポートしてみましょう。
※プラグイン「Customizer Export/Import」をインストール・有効化する方法は、本記事の「SWELLのデモサイトをダウンロード・着せ替え方法 – STEP3」で紹介
デモサイト着せ替え前に戻すには？
SWELLのデモサイトを着せ替え前に戻す方法は、下記2通りあります。
- バックアップファイルから復元する※おすすめ
- リセット機能を使う
それぞれのやり方は以下のとおりです。
＼タブの切り替え／
本記事の「SWELLのデモサイトをダウンロード・着せ替え方法 – STEP6」でバックアップ用ファイルをダウンロードしている人は、以下の方法で元に戻してください。
WordPress管理画面で、外観⇒カスタマイズの順にクリックする
エクスポート/インポートをクリックする
- ファイルを選択をクリックし、先ほどダウンロードした「swell-export.dat」ファイルを選ぶ
- インポートをクリックする
これで着せ替え前に戻すことができます。
SWELLのデモサイト着せ替えまとめ
今回は、SWELLのデモサイトへ着せ替える方法を紹介しました。
＼読み直したい箇所をクリック／
SWELLの設定や記事の執筆に慣れてきたら、自分好みのデザインにカスタマイズしてみましょう。
以下の記事ではサイトの箇所別でカスタマイズする方法を紹介しています。
当ブログでは、SWELLに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“コメント”してくれると嬉しいです！
・ ・ ・
＼当ブログ愛用のWordPressテーマ／
- 記事を書くスピードが1段階アップ
- サイトの表示速度が圧倒的に速い
- 独自のサイト高速化でSEO評価が向上
- デザインがシンプルでおしゃれ
- SWELL独自のブロック機能が優秀
↓ ↓ ↓
この記事が気に入ったら
フォローしてね！
コメント