![](https://v-challenging.com/wp-content/uploads/2021/08/img_5624.jpg)
SWELLでブログをオシャレにしたい、、、
WordPressテーマ「SWELL」でおしゃれなサイトを作ろうとしている皆さん
- SWELLで自分好みのサイトを作れるのか?
- SWELLはどんなサイトが作れるのか?
- SWELLでおしゃれなサイトを作るにはどうすればいいのか?
とおしゃれで自分好みのサイト作りにお悩みかと思います。
本記事では、おしゃれなサイトを作るためにSWELLできること、SWELLのデモサイトの着せ替え機能、SWELLデモサイトのカスタマイズ例をご紹介します。
![](https://v-challenging.com/wp-content/uploads/profile-icon-150x150.webp)
![](https://v-challenging.com/wp-content/uploads/profile-icon-150x150.webp)
![](https://v-challenging.com/wp-content/uploads/profile-icon-150x150.webp)
私がブログ運営で学んだ知識を記事にしています!ぜひブログ運営の参考にしてみてください!
\本サイトで利用しているWordPressテーマ/
- SWELLの購入を検討している人
- SWELLを使って自分好みのサイトを作れるか検討中の人
- SWELLを使ったカスタマイズ例を探している人
![](https://v-challenging.com/wp-content/uploads/profile-icon-150x150.webp)
![](https://v-challenging.com/wp-content/uploads/profile-icon-150x150.webp)
![](https://v-challenging.com/wp-content/uploads/profile-icon-150x150.webp)
プロが作ったデザインの枠組み(=デモサイト)とプロが作ったカラーパターンの参考例を紹介しています!
WordPressテーマ「SWELL」デモサイトの色カスタマイズ例一覧
本記事ではWordPressテーマ「SWELL」のデモサイトを、本記事執筆者Tatsuが様々なカラーパターンでカスタマイズしたサイト例をご紹介します。
本記事でご紹介するカラーパターンのカスタマイズ例はこちら。
![](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo_customize_list-1.jpg)
![](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo_customize_list-1.jpg)
各カラーパターンの詳細は、本記事の後半で説明しています。
WordPressテーマ「SWELL」は高機能やブロックエディタに目が行きがちですが、デザインも非常に洗練されていておしゃれです。
そのため今回(本記事)では、デザイン性・オシャレにするための機能について、詳しく説明していきます。
SWELLのデザイン以外にも知りたい!という方は『WordPressテーマ【SWELL】の特徴とおすすめしたい人を徹底解説』でSWELLについて詳しく説明しているので、併せてチェックしてみてください。
![](https://v-challenging.com/wp-content/uploads/2021/10/アイキャッチ画像_WordPressテーマSWELL.png)
![](https://v-challenging.com/wp-content/uploads/2021/10/アイキャッチ画像_WordPressテーマSWELL.png)
WordPressテーマ「SWELL」は簡単に公式デモサイトデザインに着せ替えできる
WordPressテーマ「SWELL」は、SWELLを使えばどんなデザインにできるかイメージしやすいようにデモサイトが用意されています。
またこのデモサイトファイルはSWELL購入者に提供されているため、ダウンロードすることで簡単に自分のサイトに反映して着せ替えることができます。
SWELLデモサイトのイメージ例
WordPressテーマ「SWELL」のデモサイトを一覧で紹介します。
詳しく見たい方は、URLリンクからデモサイトへ行って見てみてください。
\公式デモサイト01/
\公式デモサイト02/
\公式デモサイト03/
\公式デモサイト04/
\公式デモサイト05/
\公式デモサイト06/
今回はこれらのデモサイトを様々なカラーパターンでカスタマイズしています。
SWELLデモサイトで使われている「サイトをオシャレにする機能」
WordPressテーマ「SWELL」のデモサイトを見て分かる通り、SWELLを使うとサイトをオシャレにすることができます。
サイトをオシャレにするといっても、見た目だけでなくユーザーが見やすい読みやすいような工夫が必要です。
デモサイトでも、サイトをオシャレかつ機能性を高めた機能がたくさん使われています。
その機能の一例を紹介します!
\メインビジュアルの動画再生/
![メインビジュアルの動画再生](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_動画.jpg)
![メインビジュアルの動画再生](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_動画.jpg)
トップページに動画を設定できます。
ビジュアルに訴えたいイメージなどをお持ちであれば、動画で迫力やオシャレな印象を持たせることができます。
\ウィンドウサイズにコンテンツ高をフィット/
![メインビジュアルのウィンドウサイズにフィット](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_コンテンツ高フィット.jpg)
![メインビジュアルのウィンドウサイズにフィット](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_コンテンツ高フィット.jpg)
トップページ一杯に画像を設定できます。
画像の高さはユーザーの端末高に合わせてくれるので、スマホから見ても綺麗になります。
\1カラム・2カラム構成/
![1カラム/2カラム](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_カラム.jpg)
![1カラム/2カラム](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_カラム.jpg)
サイトのレイアウトをサイドバー有無のカラム構成指定ができます。
サイトの見やすさ・戦略によって使い分けることができます。
\記事スライダー/
![記事スライダー](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_記事スライダー.jpg)
![記事スライダー](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_記事スライダー.jpg)
おすすめの記事など、ユーザーに見てもらいたい・ユーザーが探している記事をトップページで並べることができます。
\ピックアップバナー/
![ピックアップバナー](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_ピックアップバナー.jpg)
![ピックアップバナー](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_ピックアップバナー.jpg)
画像でわかりやすく記事のカテゴリを示してあげることができます。
\記事一覧の表示形式/
![記事一覧の表示形式](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_一覧形式.jpg)
![記事一覧の表示形式](https://v-challenging.com/wp-content/uploads/2021/11/swell_機能_一覧形式.jpg)
一覧性の高い記事のリスト型表示と、視認性の高いカード型で表示を切り替えることができます。
WordPressテーマ「SWELL」デモサイトの色カスタマイズ例
SWELLデモサイトを色んなカラーバリエーションでカスタマイズしてみました。
このカラーバリエーションはSANGO開発者が運営しているサルワカ「配色パターン見本40選」を参考に作成しています。
配色パターン見本40選
引用:https://saruwakakun.com/design/gallery/palette
SWELLデモサイト01の色カスタマイズ
『SWELL公式のデモサイト01』を4つのカラーパターンでカスタマイズしました。
![swell-demo-01_4042b3](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-01_4042b3.jpg)
![swell-demo-01_4042b3](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-01_4042b3.jpg)
![swell-demo-01_8cd790](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-01_8cd790.jpg)
![swell-demo-01_8cd790](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-01_8cd790.jpg)
![swell-demo-01_f6b352](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-01_f6b352.jpg)
![swell-demo-01_f6b352](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-01_f6b352.jpg)
![swell-demo-01_9ddcdc](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-01_9ddcdc.jpg)
![swell-demo-01_9ddcdc](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-01_9ddcdc.jpg)
SWELLデモサイト02の色カスタマイズ
『SWELL公式のデモサイト02』を4つのカラーパターンでカスタマイズしました。
![swell-demo-02_5cc0ef](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-02_5cc0ef.jpg)
![swell-demo-02_5cc0ef](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-02_5cc0ef.jpg)
![swell-demo-02_79a1d4](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-02_79a1d4.jpg)
![swell-demo-02_79a1d4](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-02_79a1d4.jpg)
![swell-demo-02_bcb5b5](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-02_bcb5b5.jpg)
![swell-demo-02_bcb5b5](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-02_bcb5b5.jpg)
![swell-demo-02_f43e43](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-02_f43e43.jpg)
![swell-demo-02_f43e43](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-02_f43e43.jpg)
SWELLデモサイト03の色カスタマイズ
『SWELL公式のデモサイト03』を1つのカラーパターンでカスタマイズしました。
デモサイト03は動画・画像をウィンドウサイズいっぱいのデザインなので、1種類のみ用意しました。
サイトカラーと画像を上手く合わせることで統一感のあるオシャレさを表現できます。
![swell-demo-03_6ac1b7](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-03_6ac1b7.jpg)
![swell-demo-03_6ac1b7](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-03_6ac1b7.jpg)
このカスタマイズでは、空とサイトヘッダーカラー、中央の人物とサイトメインカラー(ボタン色など)を合わせて統一感を出しています。
SWELLデモサイト04の色カスタマイズ
『SWELL公式のデモサイト04』を4つのカラーパターンでカスタマイズしました。
![swell-demo-03_58a9ef](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-03_58a9ef.jpg)
![swell-demo-03_58a9ef](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-03_58a9ef.jpg)
こちらはSANGOをイメージしてみました。
SANGOのデザインが好きだけど、SWELLも気になる!という方はSANGO風のデザインも検討の余地ありです。
![swell-demo-03_73d0c2](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-03_73d0c2.jpg)
![swell-demo-03_73d0c2](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-03_73d0c2.jpg)
![swell-demo-03_333333](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-03_333333.jpg)
![swell-demo-03_333333](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-03_333333.jpg)
![swell-demo-03_885988](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-03_885988.jpg)
![swell-demo-03_885988](https://v-challenging.com/wp-content/uploads/2021/11/swell-demo-03_885988.jpg)
まとめ:WordPressテーマ「SWELL」のデモサイトを使えばおしゃれなサイトを作れる
今回はWordPressテーマ「SWELL」のカラーパターンを用いたデモサイトカスタマイズ例をご紹介しました。
自分好みのサイトをオシャレに作りたい!と思っても、独力だとなかなか難しいです。
今回はデモサイトの機能性の高いデザインを使いつつ、カラーパターンもプロの例を使って見ました。
ぜひ、皆さんのサイト作りの参考になれば幸いです。
まだSWELLをGETしていない!という方は、ぜひおすすめテーマなので検討してみてください。
>>『WordPressテーマ「SWELL」のインストール手順』はこちら