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

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

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

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

カスタマイザーの起動

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

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

あわせて読みたい
【SWELLの設定】「テーマカスタマイザー」の使用方法
【SWELLの設定】「テーマカスタマイザー」の使用方法SWELLの設定やカスタマイズは、ほぼ全て「テーマカスタマイザー」機能で行うことができるように設計しました。「テーマカスタマイザー」機能はリアルタイムで設定が反映...

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

デザインやレイアウトの基本的な設定はカスタマイザー内の「デザイン・レイアウト」というメニューから設定できます。

デザイン・レイアウト設定

サイトの質感設定

「外観」>「カスタマイズ」>「デザイン・レイアウト」と進むと、まずはじめに以下のような設定項目があるかと思います。

サイトの質感設定

これは何かと言うと、ヘッダー部分やサムネイル画像、各種ボタンなどに影をつけるかつけないかの設定となります。

設定を切り替えた時の様子をGif画像にしてみました

「フラット」と「立体」の切り替え
「フラット」と「立体」の切り替え

この画像だと少しわかりいくいかもしれませんが、実際に設定してみると印象が結構変わりますので、ぜひ好みに合わせてください!

コンテンツの独立設定

続いて、「サイトの質感」設定のすぐ下には、「コンテンツの独立設定」という設定項目があります。

コンテンツの独立設定

これは背景と主要コンテンツ部分を分けるかどうかという設定になります。

どのように変化するかを見ていただくのが一番かと思いますので、こちらもGif画像を用意しました。

コンテンツの独立設定による変化

コンテンツの独立設定切り替え

デフォルト状態の画像と、
コンテンツの独立設定を「オン」、「コンテンツを線で囲む」にチェックを入れ、背景色をグレーにした場合の画像の比較です。

パンくずリストの位置設定

画像

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

あわせて読みたい
パンくずリストの表示設定
パンくずリストの表示設定ここでは、SWELLで使用できるパンくずリストの表示位置やデザインに関する基本的な設定方法について説明していきます。【カスタマイザーの起動】パンくずリストに関する...

サイドバーの表示設定

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

サイドバーの設定

ここでは、

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

について設定可能です。

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

サイドバーに関する設定項目のさらに下側で、ページャーのデザインを設定できます。(ver.1.1.5 ~ )

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

あわせて読みたい
ページャーのデザイン設定方法
ページャーのデザイン設定方法ここでは、SWELLに表示されるページャーのデザイン設定方法について説明していきます。ページャーとは、投稿リストなどの下に表示される、ページ送り用のナビゲーション...

サイト全体のベースとなるフォントの設定方法

SWELL ver1.2.1より、サイト全体のフォントを4パターンから選択できるようになりました。

サイトの文字を明朝体に変えることも可能です。

あわせて読みたい
サイト全体のベースとなるフォントの設定方法【font-family設定】
サイト全体のベースとなるフォントの設定方法【font-family設定】このページでは、WordPressテーマ「SWELL」でのフォントの設定方法について解説していきます。(ver1.2.1から設定可能になりました)「外観」>「カスタマイズ」から...

その他:サイト全体の基本カラーの設定について

サイト全体に関わる基本的な色についての設定方法についても、以下の記事で説明しています。

あわせて読みたい
サイト全体の基本カラーの設定方法
サイト全体の基本カラーの設定方法SWELLでは、様々な部分で色を自由に設定することができます。ここでは、その中でもサイトのベースとして重要になってくる各カラーの設定方法について説明していこうと思...

ぜひご覧ください。

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

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

目次
目次