MENU
カテゴリー
【新年度応援セール!】期間限定で 20%OFF!

サイトのベースとなるデザイン・レイアウトの設定方法

2020 3/11
サイトのベースとなるデザイン・レイアウトの設定方法
記事上のウィジェットエリア

このページでは、SWELLでを使ったサイト全体のベースとなるレイアウトやデザインの設定方法を説明していきます。

サイト全体に関わる基本的な設定は、「外観」>「カスタマイズ」>「サイトの全体設定」というメニューの中でさらにパネル分けして整理しています。

「サイト全体設定」メニュー
「サイト全体設定」メニュー
「サイト全体設定」の中身
「サイト全体設定」の中身

SWELLでは基本的にテーマカスタマイザーから全ての設定を行うことができます。

カスタマイザーの起動方法については以下の記事を参考にして下さい。

以下では、カスタマイザー上での操作について説明していきます。

目次前広告表示エリア
目次

基本カラーの設定

「サイトの全体設定」>「基本カラー」メニューの中で、

  • メインカラー
  • テキストカラー
  • リンクの色
  • 背景色

について設定できます。

カラー設定について詳しくは以下の記事をご覧ください。

基本デザインの設定

続いて、「サイトの全体設定」>「基本デザイン」メニューの中にある項目について説明していきます。

「サイトの全体設定」>「基本デザイン」
「サイトの全体設定」>「基本デザイン」

サイト全体の見た目に関する設定

「サイトの全体設定」>「基本デザイン」へと進むと、まず最初に次のような設定エリアがあります。

「サイト全体の見た目」設定
「サイト全体の見た目」設定
「全体の質感」設定
  • 全体をフラットにする」というチェックをオンにすると、投稿リストのサムネイル画像部分など、デフォルトで影のついている箇所の多くで影がなくなります。
  • 全体に丸みをもたせる」というチェックをオンにすると、読んで字のごとく、様々な箇所が丸みを帯びたデザインに変化します。
「コンテンツの背景を白にする」設定

背景色をグレーにしつつ、本文などのコンテンツエリアの背景は白色に保つ、という設定ができます。

わかりにくいと思うので実際にこの設定のオン・オフを切り替える様子をGif画像にしてみました。

コンテンツの独立設定切り替え
オン・オフを切り替える様子

いずれも、テキストでの説明だけだと少しわかりにくいかもしれませんが、実際に設定してみると印象が結構変わりますのでぜひ好みに合わせて設定してください!

フォント設定

「サイトの全体設定」>「基本デザイン」の中にはさらに、「フォント設定」というエリアがあります。

フォント設定
フォント設定

ここで、

  • ページ全体のベースとなるフォントの種類
  • 記事本文中のフォントサイズ

について設定できます。

フォントファミリーとフォントサイズの設定によって具体的にどのような値がセットされるかは、以下の記事をご覧ください。

サイト全体のフォントファミリーに関する設定について

記事本文のフォントサイズの設定について

コンテンツ幅の設定

フォント設定の下に、「コンテンツ幅の設定」というエリアがあります。

コンテンツ幅の設定
コンテンツ幅の設定

これにより、「サイト幅」と「記事コンテンツ幅」を設定できます。

ページ背景の設定

さらにその下には、「ページ背景」という設定エリアがあります。

ページ背景の設定
ページ背景の設定

ここから、サイト全体でページの背景に画像を設定することができます。

画像を設定すると、さらにこの下に詳細設定が出てきますので、色々試してみてください。

タイトルデザインの設定

続いて、「サイトの全体設定」>「タイトルデザイン」というメニューの中の設定項目を紹介します。

「サイトの全体設定」>「タイトルデザイン」
「サイトの全体設定」>「タイトルデザイン」

ページタイトル・サブコンテンツのタイトルデザイン設定

「タイトルデザイン」メニューに入ると、まず先頭に以下のような設定項目が並んでいます。

ページタイトルの設定
ページタイトルのデザイン設定
ページタイトルのデザイン

これは、固定ページおよびアーカイブページで、かつ、表示位置が「コンテンツ内」のタイトルに適用されるデザイン設定です。

「コンテンツ内」に表示されるページタイトルの例
「コンテンツ内」に表示されるページタイトルの例
サブコンテンツのタイトルデザイン

サブコンテンツ」という呼び方がそのうち変えるかもしれないですが、記事ページの本文下に表示される「この記事を書いた人」や「関連記事」などのような部分のタイトルや、メインコンテンツ内に挿入されるウィジェットエリアのタイトルのことを指しています。

著者情報エリアの例
ここの「この記事を書いた人」

ウィジェットタイトルのデザイン設定

さらにその下で、4種類のウィジェットエリアでのタイトルデザインを設定することができます。

ウィジェットタイトルのデザイン設定
ウィジェットタイトルのデザイン設定

この他にも、固定ページ・投稿ページのタイトル位置の設定などはカスタマイザーの「投稿・固定ページ」>「タイトル」メニューの中で設定できます。

NO IMAGE画像の設定

続いて、「サイトの全体設定」>「NO IMAGE画像」というメニューの中の設定項目を紹介します。

NO IMAGE画像とは、記事一覧リストでアイキャッチ画像が設定されていない投稿を表示する時にその代わりに表示される画像のことです。

「NO IMAGE画像」設定メニュー
「サイトの全体設定」>「NO IMAGE画像」

このメニューの中には以下のような設定項目が並んでいますので、こちらで好きな画像を設定してください。

NO IMAGE画像の設定
NO IMAGE画像の設定

NO IMAGE)画像の設定については、こちらのページでも解説しています。

お知らせバーの設定

さらに「NO IMAGE画像」の下には「お知らせバー」に関する設定項目をまとめたメニューが用意されています。

「サイト全体設定」>「お知らせバー」
「サイト全体設定」>「お知らせバー」

お知らせバー」とは、以下のようなヘッダーの上下に表示できるエリアのことです。

お知らせバー
お知らせバー

ここの設定については、以下の記事で詳しくまとめています。

パンくずリストの設定

さて続いて、その下には「パンくずリスト」というメニューが用意されています。

「サイト全体設定」>「パンくず」
「サイト全体設定」>「パンくず」

このパンくずリストに関する設定については以下の記事でまとめていますので、ぜひご覧ください。

ページャーのデザイン設定

パンくずリストの下に、「ページャー」というカスタマイザーメニューがあります。

「サイト全体設定」>「ページャー」
「サイト全体設定」>「ページャー」

詳しくは以下の記事をご覧ください。

サイドバーの表示設定

さらにその下へ進むと、以下のようにサイドバーに関する設定項目が出てきます。

サイドバーの設定

ここでは、

  • どのページにサイドバーを表示するか
  • サイドバーの各ウィジェットアイテムのタイトルのデザイン

について設定可能です。

記事下のウィジェットエリア

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

目次
閉じる