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

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

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

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

あわせて読みたい
「SWELL」でwebサイトのウィジェットを設定してみた! WordPress初心者のエディター小林が、WordPressで人気のテーマ「SWELL」を実際に使い、学びながら紹介していく本記事。今回のテーマは、「記事投稿ページの設定方法」に...
TOC

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

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

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

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

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

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

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

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

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

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

 

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

「フォント設定」

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

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

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

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

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

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

「カスタマイザーのリセット」では「カスタマイザー」内で行われた全ての設定が削除され、初期化されます。カラー以外の設定をしている場合は、使用する時に十分注意してください!

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

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

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

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

あわせて読みたい
「SWELL」でサイトの基本カラーを設定してみた! WordPress初心者のエディター小林が、WordPressで人気のテーマ「SWELL」を実際に使い、学びながら紹介していく本記事。今回のテーマは、「SWELLの基本カラーの設定方法...

【無料Webサイト診断実施中】

現在運営しているWebサイトでのSEOやマーケティング戦略でお悩みの方に、無料のサイト診断を実施中です。

  • SEO対策や広告戦略で思うように成果が上がらない
  • これからコンテンツマーケティングを実施したいけど、何をすれば良いかわからない
  • 検索順位が思うように上がらない or 急激に下がってしまった

といった方のお悩みを、Webマーケティングに精通したスタッフが無料で診断し、アドバイスします。

無料診断は下記LINE公式アカウントからお申し込みください。

※申し込み状況によっては、無料診断の実施が遅くなる、または実施できない可能性があることをご了承ください。

 

Let's share this post!
TOC
閉じる