SWELLデモサイトで簡単にオシャレなブログに着せ替えよう！

今回は、WordPressテーマ「SWELL」のデモサイトを使った、着せ替えについて解説します。

＼ 本当に使いやすいテーマなら／

SWELLデモサイトの着せ替えとは？

SWELLの公式サイトには、初心者でも簡単にサイトデザインを整えられるデモサイトデータが６つ無料で用意されています。（2024年12月現在）

こちらが、６つのデモサイトです。

SWELL公式サイト

無料であるって、実はすごいことです！（着せ替えデータが有料のテーマもあるので）
はっきり言って、どれにしようか迷うほどです。

６つのデモサイトの違いについては、こちらの記事を参考にしてくださいね。

SWELLデモサイトの着せ替えのメリット

確かに、デモサイトを使って着せ替えしなくても、ブログは作れます！
でも、初心者にとってSWELLデモサイトの着せ替えは、本当にありがたい存在です。
大きくわけて、３つのメリットがあります。

メリット１：デザインの基礎が整った状態でスタートできる

デモサイトをインポートすると、サイト全体の構成やスタイルがあらかじめ設定された状態になるため、初期設定に時間をかける必要がありません。

メリット２：色やフォントなどの色味がすでに整えてある

デモサイトで好みのものあがればそのまま色やフォントなどの色味を活用できるので便利！　

メリット３：トップページのカスタマイズが簡単！

ブログを始める時に悩むのがトップページの構成。
デモサイトにはトップページの構成が決まっていて、仮の画像が含まれており、画像をあてはまめてしまえば、すぐに完成します。

初心者にとってこの機能はとても便利で、デザインを試してみても、気に入らなければ簡単に元の状態に戻せるので安心です。私は結局、実際に2つのデモサイトを着せ替えして、それぞれの特徴や使いやすさをじっくり研究しました。

それぞれ異なるデザインやレイアウトを持っているので、自分のブログのイメージに合うものを探す時間も楽しい経験でした。

＼ 本当に使いやすいテーマなら／

SWELLデモサイトを使った着せ替え手順

では、SWELLデモサイトを使った実際の着せ替え手順についてお伝えします。

まだ、「SWELL」を購入・インストールしてない、という方はこちらの記事を参考にしてください。

また、事前にSWELL会員サイトへの登録を完了させておいてください。

実際に着せ替え作業自体は、１０分程度で終わったと思います。

SWELL着せ終了後、すぐやっておきたい調整作業

まずは、これだけは！という作業を３つ厳選しました。全部で５分もかからないので、デモサイトをダウンロードしたら続けて作業しましょう。

作業① ヘッダーロゴの変更

ロゴの変更方法の詳細は、こちらの記事を参考にしてください。

作業② コピーライトの修正

コピーライトが「© SWELL DEMO ⚪︎⚪︎.」となっています。
これも修正しておきましょう。

管理画面から「外観」→「カスタマイズ」→「フッター」をクリックします。
「コピーライト設定」のところで修正しましょう。

作業③ SNSリンクの変更

SNSのリンクもSWELLのものになっています。

管理画面から「外観」→「カスタマイズ」→「SNS情報」で変更しましょう。

これで、すぐにやりたい作業は完了です！

デモサイト導入後、”あなたらしさ”を加える「3つのカスタマイズ」

無事にデモサイトのデータは読み込めましたか？ 綺麗なサイトが一瞬で完成して感動しますよね！

上記の作業が終わっていれば、まずはブログを書く「箱」の準備はOKです。

でも、実はここからが本番です。 今の状態は、言うなれば「出来合いのマネキンをそのままお店に置いている状態」。ここから「あなたらしさ」という服を着せてあげることで、初めて本当の自分のブログになります。

「設定画面がたくさんあって、どこから触ればいいかわからない…」という方に向けて、Webディレクターの視点で「まずここだけは変えるべき3つのポイント」をまとめました。

1. テーマカラー（メインカラー）を「自分色」に染める

デモサイトのままだと、どうしても「SWELLのテンプレ感」が残ってしまいます。まずは一番印象を左右する「色」を変えましょう。

WordPressの管理画面から [外観] ＞ [カスタマイズ] ＞ [サイト全体背sってい] ＞ [基本カラー] と進みます。 ここの「メインカラー」を自分の好きな色（あなたのテーマカラー）に変更するだけで、サイト全体の雰囲気がガラッとあなた色に染まりますよ！

2. メインビジュアル（トップ画像）をオリジナルにする

次に、サイトの「顔」であるトップページの大きな画像（メインビジュアル）を差し替えます。 デモサイトの綺麗な風景写真も良いですが、あなたの発信内容に合った画像や、自分で撮影した写真にすることで、一気にオリジナル感が出ます。

💡 スマホで画像が切れてしまう時は？ パソコンでは綺麗に見えるのに、スマホで見ると「なんだか画像が大きすぎる」「文字が見えにくい」と悩む初心者さんは非常に多いです。 そんな時は、スマホ用の画像を**「あえて正方形にする」**のがプロの裏技です。詳しくは以下の記事で解説しているので、画像を作る前にぜひ読んでみてくださいね。

[ ブログカード：『SWELLメインビジュアル。スマホは「正方形」が正解？あえて下を見せる「チラ見せ」の法則』のURL ]

3. まだ使わないパーツ（ブロック）は思い切って非表示に！

デモサイトには、記事スライダーや、タブ切り替えなど、高度で美しい機能が最初からモリモリに配置されています。

でも、記事数が少ないうちは「この枠に何を入れたらいいの？」とプレッシャーになってしまいますよね。 無理に全部を使おうとせず、「まだ自分には早いな」と思うブロックは、トップページの編集画面で思い切って削除（または非表示）にしてしまいましょう。 最初はシンプルに。記事が増えてきたら少しずつパーツを足していくのが、ブログ作りで挫折しない最大のコツです。

---

着せ替えの「次」へ！自分だけの「サイト型」を目指そう

まずはこの3つをクリアすれば、立派なあなただけのブログの完成です！ SWELLのデモサイトは、初心者でも迷わずスタートダッシュを切れる最高の機能です。

そして、ブログの運営に慣れてきて「もっと自分らしいデザインにしたいな」「読者にもっと親切な設計（導線）を作りたいな」という欲が出てきたら…… ぜひ、デモサイトの枠組みから一歩抜け出して、**自分だけの「サイト型トップページ」**作りに挑戦してみてください。

私も、このブログをSWELLの標準機能だけで「プロ仕様のサイト型」にフルリニューアルしました。その制作の全工程や、プロとしてのこだわりを以下のロードマップで公開しています。次のステップアップの参考にしてくださいね！

[ ブログカード：『SWELLでブログを「サイト型」にリニューアル！〜』のロードマップ記事のURL ]

---

カスタマイズで迷子になったら？プロに頼るのもアリです

「デモデータを入れてみたものの、なんだかデザインが崩れてしまった…」 「自分のイメージに合った色や画像が、どうしても作れない…」

WordPressの設定画面と一人でにらめっこしていると、あっという間に時間が溶けてしまいますよね。もし、どうしても行き詰まってしまったら、一人で悩まずに気軽に私に声をかけてください。

Webディレクターとして、あなたの「SWELLデビュー」や、ブログのカスタマイズ、デザインのお手伝いをさせていただきます。 まずは「こんなことで悩んでるんだけど…」と、お話しするだけでも大歓迎ですよ！

[ プロと作るなら：Web制作のお問い合わせ・ご相談はこちら ]