WordPress SWELLの初期設定、サイトの外観を設定する
SWELL公式ホームページ:https://swell-theme.com
SWELLをインストールしたら、好みに合わせて外観を設定しよう。
![](https://chironeko.com/wp-content/uploads/2020/11/360197.jpeg)
SWELLの外観設定の方法を解説します。
基本カラー:SWELL初期設定
![](https://chironeko.com/wp-content/uploads/2020/11/485624.jpeg)
まずはサイトの「テーマカラー」を設定しよう
「テーマカラー」は以下のメニューで設定できます。
外観 > カスタマイズ > サイトの全体設定 > 基本カラー
![SWELL、基本カラーの設定画面](https://chironeko.com/wp-content/uploads/2021/11/swell-setting18.png)
ヘッダー:SWELL初期設定
![](https://chironeko.com/wp-content/uploads/2020/11/706423.jpeg)
次は、ヘッダー全体を設定します
ヘッダーメニュー
新しく「ヘッダーメニュー」を作成するには、次の手順で行います。
外観 > メニュー
- [新しいメニューを作成しましょう] をクリック
- 名前を付け、メニューを作成 をクリック
- 必要なカテゴリーを選択
- メニューに追加 をクリック
- [グローバルナビ] を選択
- メニューを保存 をクリック
![SWELL、メニュー画面でヘッダーメニューを作成中](https://chironeko.com/wp-content/uploads/2021/11/swell-setting1.jpg)
![](https://chironeko.com/wp-content/uploads/2021/10/cat-379218.png)
より詳しく説明しています。
ヘッダーロゴ
ヘッダーにロゴ画像を設定するには、以下のメニューからアクセスします。
外観 > カスタマイズ > ヘッダー > ヘッダーのロゴ設定
![SWELL、ヘッダー画面でヘッダーロゴを設定](https://chironeko.com/wp-content/uploads/2021/11/swell-setting2.png)
ヘッダーを追従させる
ヘッダーを追従させるには、以下のメニューで設定します。
外観 > カスタマイズ > ヘッダー > ヘッダーの追従設定
![SWELL、ヘッダー追従設定の解説](https://chironeko.com/wp-content/uploads/2021/11/swell-setting3.png)
ヘッダー上のキャッチフレーズ
デフォルトではヘッダーの上に「キャッチフレーズ」が入っていますが、これを非表示にできます。
外観 > カスタマイズ > ヘッダー > キャッチフレーズ設定 > [表示しない]
さらにSNSアイコンリストを非表示にすると、ヘッダーの上のバーが消えます。
外観 > カスタマイズ > ヘッダー > ヘッダーバー設定 > [SNSアイコンリストを表示する] をOFF
![SWELL、キャッチフレーズを非表示にし、上のバーを消す解説](https://chironeko.com/wp-content/uploads/2021/11/swell-setting4.jpg)
お知らせバー:SWELL初期設定
お知らせバーを表示するには、次のメニューから設定します。
外観 > カスタマイズ > サイト全体 > お知らせバー
![SWELL、お知らせバー設定の解説](https://chironeko.com/wp-content/uploads/2021/11/swell-setting5.jpg)
ピックアップ:SWELL初期設定
トップに配置するオブジェクトには3つの種類があります
- メインビジュアル
- 記事スライダー
- ピックアップバナー
![](https://chironeko.com/wp-content/uploads/2020/11/706423.jpeg)
この3つを説明するね
メインビジュアル
トップに画像を配置するには、次のメニューから設定します。
外観 > カスタマイズ > トップページ > メインビジュアル
![SWELL、メインビジュアルの設定](https://chironeko.com/wp-content/uploads/2021/11/swell-setting6.jpg)
デフォルトではランダムな画像が表示されますが、好きな画像を設定できます。文字を際立てるために画像を暗くしたりできます。
ヘッダーの透過
ヘッダーを設定している場合、カテゴリーの背景を透過させることができます。
外観 > カスタマイズ > ヘッダー > トップページでの特別設定
![SWELL、メニュー背景を透明にする](https://chironeko.com/wp-content/uploads/2021/11/swell-setting7.jpg)
記事スライダー
トップに、回転する記事群を表示させるには、次のメニューから設定します。
外観 > カスタマイズ > トップページ > 記事スライダー
![SWELL、記事スライダーの設定画面](https://chironeko.com/wp-content/uploads/2021/11/swell-setting8.jpg)
ピックアップバナー
回転しない、固定の記事群を表示するには、次のメニューから設定します。
外観 > メニュー
- [新しいメニューを作成しましょう] をクリック
- 名前を付け、メニューを作成 をクリック
- 必要なカテゴリーを選択
- メニューに追加 をクリック
- [ピックアップバナー] を選択
- メニューを保存 をクリック
![SWELL、メニュー画面で、ピックアップバナーを作成中](https://chironeko.com/wp-content/uploads/2021/11/swell-setting9.jpg)
ピックアップバナーに関する細かい設定は、次のメニューから行います。
外観 > カスタマイズ > トップページ > ピックアップバナー
![SWELL、ピックアップバナーが表示されれた画面](https://chironeko.com/wp-content/uploads/2021/11/swell-setting10.jpg)
フッター:SWELL初期設定
フッターの真上に「3つの項目」を表示するには、次のメニューから設定します。
外観 > ウィジェット
![ウィジェット画面でフッターを設定](https://chironeko.com/wp-content/uploads/2021/11/swell-setting11.jpg)
「3列の項目」に色を設定するには、次のメニューから行います。
外観 > カスタマイズ > フッター
![SWELL、フッターの色設定画面](https://chironeko.com/wp-content/uploads/2021/11/swell-setting12.jpg)
フッターの真上に「3つの項目」が表示され、色も付きました。
サイドバー:SWELL初期設定
サイドバーを表示するには、次のメニューから設定します。
外観 > ウィジェット
![ウィジェット画面、共通サイドバー設定](https://chironeko.com/wp-content/uploads/2021/11/swell-setting13.jpg)
![SWELL、サイドバーにコンテンツが配置された画面](https://chironeko.com/wp-content/uploads/2021/11/swell-setting14.jpg)
トップページ:SWELL初期設定
既定のページで記事の表示を変えたい場合
トップページの記事の並び方を変更するには、次のメニューから行います。
外観 > カスタマイズ > 記事一覧リスト
![SWELL、トップページの記事の並び方を変更した画面](https://chironeko.com/wp-content/uploads/2021/11/swell-setting15.jpg)
独自のページをトップにしたい場合
トップページに独自のページを配置するには、次のメニューから行います。
外観 > カスタマイズ > WordPress設定 > ホームページ設定 > [固定ページ] を選択
![SWELL、トップページを固定ページに変更した画面](https://chironeko.com/wp-content/uploads/2021/11/swell-setting16.jpg)
見出し:SWELL初期設定
見出しのデザインを設定するには、次のメニューから行います。
外観 > カスタマイズ > 投稿・固定ページ > コンテンツのデザイン
![SWELL、見出しの設定画面](https://chironeko.com/wp-content/uploads/2021/11/swell-setting17.jpg)
![](https://chironeko.com/wp-content/uploads/2020/11/489978.jpeg)
一通り解説したけど分かったかな?
![](https://chironeko.com/wp-content/uploads/2020/11/359421.jpeg)
まだSWELLをお持ちでない方は、ホームページから詳細をご覧ください。
SWELLホームページ:swell-theme.com