MENU

当ブログ愛用のWordPressテーマ

広告

\乗り換え先おすすめテーマ!/

/ブロガーとして本格的に取り組む\

最新のSEO・サイト高速化に対応|WordPressテーマ「SWELL」の評判・レビューはこちら ≫

SWELLの評判・レビューはこちら ≫

クリック

タップ

SWELLのデモサイト一覧|ダウンロードで初心者もプロ級デザインに!

「デモサイトへの着せ替え方法は?」

「着せ替え後の注意点ってある?」

「デモサイトをインポートできない…」

この記事では、そんな方に向けて、SWELLのデモサイトへ着せ替える方法を解説します。

かめコンパス

こんにちは、かめコンパスです!

デモサイトとは…WordPressテーマを利用して作成されたサンプルサイト

この記事を読めば、あなたも簡単に

  • SWELL独自のデモサイトに着せ替えができる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、おしゃれなデザインでブログ運営できるようになれますよ。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください!

\まず公式サイトのデザインを見てみましょう/

/特徴:シンプルで洗練されたデザイン!\

SWELL購入を検討中の人はこちらもご覧ください!/

目次

SWELLのデモサイト着せ替えデータは全6種類!

SWELLには無料で使えるデモサイト着せ替えデータが6種類あります。

以下の画像は、公式サイトで公開されているデモサイトです。

タブの切り替え

SWELL公式サイトで公開されているデモサイト01
画像引用:SWELL DEMO 01

特徴

  • モノクロを基調とした万人受け型デザイン
  • ヘッダー下に記事スライダーを設置していて回遊率が高い
  • 新着順・人気順で記事を探せる
かめコンパス

DEMO 03と06は画面いっぱいに画像が表示されるのでおすすめだよ

SWELL公式サイトではこれら6つのデモサイトとは別に、SWELLを利用している他の個人ブログも紹介されています。

公式SWELLのデモサイト一覧

デモサイト着せ替えを利用するメリット

SWELLのデモサイト着せ替えファイルを利用するメリットは以下の2つです。

  • 初心者でも無料でおしゃれなサイトに仕上げられる
  • カスタマイズする時間を記事の執筆に回せる

サイトの色決めやコンテンツの配置、ヘッダーやフッターの作成など、自分で一からサイトのデザインを作るにはかなりの時間と労力がかかります。

デザインセンスも必要になってくるでしょう。

ただ、SWELLのデモサイト着せ替えファイルを利用すれば、かんたんにプロ並みのおしゃれなサイトデザインを作れます。

かめコンパス

私は一から自力でサイト設計したので、分からないことを調べるだけでも一苦労しました(笑)

着せ替え後も多少の修正は必要になりますが、大きくカスタマイズしなくてもいいので、記事を書くことに集中できますよ。着せ替え後に必要な修正点は後ほど「SWELLのデモサイト着せ替え後にやるべき修正点2つ+α」で解説します。

かめコンパス

副業でブログ運営している人はより時間を大切にしようね

デモサイト着せ替えをおすすめな人

SWELLのデモサイト着せ替えファイルの利用をおすすめな人は以下の3つです。

  • ブログ始めたての初心者
  • 自力でおしゃれにカスタマイズするのが苦手
  • 限りある時間を記事の執筆に使いたい

すでに数十記事以上ブログで公開している人や他テーマからSWELLへ移行してきた人は、ある程度すでにサイト設計しているでしょう。

自力で作ったサイトデザインよりもデモサイトのほうが良いというならば別ですが、基本今までのサイトデザインを引き継いだほうがあなたのブログファンも困惑せずに済みます。

一方ブログ始めたての初心者はまだ不完全なサイト状態なので、これからカスタマイズにかける時間と労力を考えるとデモサイト着せ替えファイルの利用したほうがいいです。

かめコンパス

私もブログを始めた初期にデモサイトに出会いたかったな~と思っています(笑)

自分自身にデザインセンスがないと思っている人にもおすすめですよ。

SWELLのデモサイトをダウンロード・着せ替え方法

デモサイトをダウンロード・着せ替えるには、SWELL会員サイト「SWELLERS’」に登録しておく必要があります。

会員サイトへの登録方法

会員サイトへの登録がまだの人は、下の記事を参考に登録してください。

それではデモサイトをダウンロード・着せ替えをしていきましょう。

STEP
デモサイトデータをダウンロードする

デモデータのインストールページにアクセスし、利用したいデータファイルをダウンロードする

SWELL会員サイト「SWELLERS’」にあるデモサイトデータをダウンロードする場所

zipファイルでダウンロードされます。

STEP

ダウンロードしたzipファイルを解凍する

クリックで開く

zipファイルの解凍方法はこちら

解凍方法①:解凍したいzipファイルを右クリックし、すべて展開...をクリックする

「すべて展開...」がある場所とzipファイルが解凍できた様子

解凍方法②:解凍したいzipファイルを開き、ファイル内のものを別のフォルダに移動させる

zipファイル内のものを別のフォルダに移動させてzipファイルを解凍させた様子

この2つの方法どちらかでzipファイルを解凍できます。

解凍したフォルダにある「swell_demo〇〇.dat」というファイルを使います。〇〇はデモデータの番号

STEP
プラグイン「Customizer Export/Import」をインストール・有効化する

クリックで開く

プラグインをインストール・有効化する方法はこちら
STEP

WordPress管理画面で、プラグイン新規プラグインを追加をクリックする

WordPress管理画面の「プラグイン」「新規プラグインを追加」がある場所
STEP

検索窓に「Customizer Export/Import」と入力する

検索窓がある場所
STEP

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

Customizer Export/Importの「今すぐインストール」がある場所
STEP

有効化をクリックする

Customizer Export/Importの「有効化」がある場所

これでプラグインをインストール・有効化できます。

STEP
着せ替えデータをインポートする

WordPress管理画面で、外観カスタマイズの順にクリックする

「外観」「カスタマイズ」がある場所
STEP

エクスポート/インポートをクリックする

「エクスポート/インポート」がある場所
STEP

デモサイトを着せ替え前に戻せるようバックアップ用ファイルをダウンロードしておいてください。

バックアップ用ファイルのダウンロード方法

書き出しをクリックする

「書き出し」がある場所

「swell-export.dat」もしくは「swell_child-export.dat」というファイルがダウンロードされます。

  1. ファイルを選択をクリックし、先ほどダウンロードした「swell_demo〇〇.dat」ファイルを選ぶ
  2. インポートをクリックする
デモサイトファイルをインポートする手順説明

これでデモサイトの着せ替え完了です。

ただ着せ替え後の自サイトを見てもらえれば分かりますが、修正したほうがいい点がいくつかありますので紹介していきます。

かめコンパス

修正する箇所は少ないから安心してね

SWELLのデモサイト着せ替え後にやるべき修正点2つ+α

SWELLのデモサイト着せ替え後に修正すべき点は以下のとおりです。

修正点2つ+α
  • コピーライト デモデータ共通
  • SNSリンク デモデータ共通
  • お知らせバー・記事スライダーのタイトル・タブ切り替え ※デモデータ02のみ
  • メインビジュアル ※デモデータ030506

それぞれ詳しく解説します。

かめコンパス

自身が選んだデモデータの番号に当てはまる所を読んでね

修正点1:コピーライト

コピーライトがある場所

デモデータで関係あり

SWELLのデモサイトに着せ替えた後、サイト下部にあるコピーライトが「© SWELL DEMO 〇〇.」に変わってしまいます。〇〇はデモデータの番号

ですので、自分のサイト名に修正しましょう。

STEP
コピーライトの修正方法

WordPress管理画面で、外観カスタマイズの順にクリックする

「外観」「カスタマイズ」がある場所
STEP

フッターをクリックする

「フッター」がある場所
STEP

「コピーライトのテキスト」を自分のサイト名に変更する

「コピーライトのテキスト」がある場所
STEP

公開をクリックする

「公開」がある場所
かめコンパス

コピーライト=著作権なので必ず修正してね

修正点2:SNSリンク

SNSリンクが貼られている場所

デモデータで関係あり

SWELLのデモサイト着せ替え後、SNSのリンク先が関係のないページに設定されます。

自分が利用しているSNSにリンクを修正し、利用していないSNSのリンクは消しましょう。

STEP
SNSリンクの修正方法

外観カスタマイズSNS情報の順にクリックする

「SNS情報」がある場所
STEP

「SNSリンク設定」で自分のSNSのURLを入力し、公開をクリックする

利用していないSNSのURLは消しましょう。

「SNSリンク設定」がある場所
かめコンパス

利用しているSNSアカウントを設定して、ユーザーとのコミュニケーションを増やそう

修正点α:お知らせバー・記事スライダーのタイトル・タブ切り替え

お知らせバー・記事スライダーのタイトル・タブ切り替えの場所

デモデータ02のみ関係あり

SWELLのデモサイト着せ替え後は、「お知らせバー」「記事スライダーエリアのタイトル」「タブ切り替え」の3つが、関係のないテキストに設定されます。

不要な設定は削除し、必要な設定のみ修正しましょう。

デモデータ02の修正方法

外観カスタマイズサイト全体設定の順にクリックする

「サイト全体設定」がある場所

お知らせバーをクリックする

「お知らせバー」がある場所

「お知らせ内容」「リンク先のURL」「ボタンテキスト」を修正し、公開をクリックする

「お知らせ内容」「リンク先のURL」「ボタンテキスト」がある場所

修正点α:メインビジュアル

メインビジュアルの場所

デモデータ030506で関係あり

SWELLのデモサイト着せ替え後、メインビジュアルの画像やテキストなどを修正しましょう。

STEP
デモデータ03・05・06の修正方法

外観カスタマイズトップページの順にクリックする

「トップページ」がある場所
STEP

メインビジュアルをクリックする

「メインビジュアル」がある場所
STEP

以下の項目を修正し、公開をクリックする

タブの切り替え

全画像の「メインテキスト」「サブテキスト」「リンク先URL」「ボタンテキスト」

「メインテキスト」「サブテキスト」「リンク先URL」「ボタンテキスト」がある場所

SWELLのデモサイト着せ替えでよくある質問

ここからはSWELLのデモサイト着せ替えでよくある質問に回答します。

かめコンパス

気になる質問をクリックしてね

デモサイト着せ替えデータをインポートできない

SWELLでデモサイト着せ替えデータをインポートできない原因は、プラグイン「Customizer Export/Import」をインストールしていない、もしくは有効化していないからです。

プラグインをインストール・有効化して、再度インポートしてみましょう。

※プラグイン「Customizer Export/Import」をインストール・有効化する方法は、本記事の「SWELLのデモサイトをダウンロード・着せ替え方法 – STEP3」で紹介

デモサイト着せ替え前に戻すには?

SWELLのデモサイトを着せ替え前に戻す方法は、下記2通りあります。

  • バックアップファイルから復元するおすすめ
  • リセット機能を使う

それぞれのやり方は以下のとおりです。

タブの切り替え

本記事の「SWELLのデモサイトをダウンロード・着せ替え方法 – STEP6」でバックアップ用ファイルをダウンロードしている人は、以下の方法で元に戻してください。

STEP

WordPress管理画面で、外観カスタマイズの順にクリックする

「外観」「カスタマイズ」がある場所
STEP

エクスポート/インポートをクリックする

「エクスポート/インポート」がある場所
STEP
  1. ファイルを選択をクリックし、先ほどダウンロードした「swell-export.dat」ファイルを選ぶ
  2. インポートをクリックする
バックアップ用ファイルをインポートする手順説明

これで着せ替え前に戻すことができます。

SWELLのデモサイト着せ替えまとめ

今回は、SWELLのデモサイトへ着せ替える方法を紹介しました。

SWELLの設定や記事の執筆に慣れてきたら、自分好みのデザインにカスタマイズしてみましょう。

以下の記事ではサイトの箇所別でカスタマイズする方法を紹介しています。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“(Twitter)フォロー”や“ブックマーク”してくれると嬉しいです!

SWELLのデモサイトへ着せ替え・ダウンロード方法の記事

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

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

コメント

コメントする

目次