「SWELL」でwebサイトの基本デザインを設定してみた！

WordPress初心者のエディター小林が、WordPressで人気のテーマ「SWELL」を実際に使い、学びながら紹介していく本記事。今回のテーマは、「記事投稿ページの設定方法」について。

その細かい手順を画像付きで、ゼロから丁寧に解説していきます！

WordPressの人気テーマ「SWELL」についての関連記事はこちら。

まずは、SWELLの超便利機能「カスタマイザー」から

「SWELL」では、WordPress管理画面にある「カスタマイザー」からサイトのビジュアルやデザインに関するあらゆる設定をここから行えます！

「カスタマイズ」をクリック。
（呼称は「カスタマイザー」なのに表示は「カスタマイズ」。。）

カスタマイザーでは、左側の設定項目で変更した設定を、右画面のプレビューでその都度確認しながら作業ができるのです！とても便利！

「サイト基本デザイン」で設定できること

今回は、カスタマイザー「サイト全体設定」の項目にある「基本デザイン」を設定し、サイトの見え方がどう変わるかをを検証してみました。

「基本デザイン」では、
・サイト全体の見た目
・フォント設定
・コンテンツ幅の設定
・ページ背景
などを設定できます。

「サイト全体の見た目」を設定する

「サイト全体の見た目」の項目では、以下内容が設定できました。
・全体の質感
・コンテンツの背景を白にする

・全体の質感
→「全体をフラットにする」は、印象があまり変わらない気がしました。「全体に丸みをもたせる」は、コンテンツのサムネイルの角や検索ボックス丸みを帯びて、柔らかな印象になりました。

 

・コンテンツの背景を白にする
→ワンクリックで背景が全て白に。フォントの色を白にしている場合テキストが同化してしまうので、注意が必要ですね。

「フォント設定」

「フォント設定」の項目では、サイト内のフォントとそのサイズ設定ができます。

「ページ背景」を設定する

「ページ背景」の設定では、選択した画像を、サイトの全背景に設定できます。

横長の画像を背景に設定すると、画面をスクロールした時、途中で区切りが表示されてしまいました。縦長の画像を選択するあるいは、画像位置やサイズ設定で調節すると良いと思います。

もしも設定をリセットしたくなったら！

ここで、設定項目が多く一つ一つ手作業で元に戻すのが面倒くさくなってしまった時の最後の手段として、「カスタマイザーのリセット」をご紹介しておきます。

カスタマイザーのリセットは、WordPress管理画面の「SWELL設定」→「リセット」→「カスタマイザーのリセット」→「デフォルトに戻す」

最適なサイトの見え方を模索あるのみ

SWELLでサイトのデザインの見え方の設定する方法は、今回紹介した方法だけでなくまだまだあります。

他の記事でも色々と紹介していますので、是非ご覧ください！