SWELLの外観カスタマイズの設定「おしゃれなコーポレートサイトに！」

こんにちは、Sakiです！

この記事では「デモサイト」をベースに、WordPressテーマ「SWELL」の外観カスタマイズの設定方法を解説しています！

＞＞デモサイトを見る

デモサイトではアロマサロンを想定していますが、文章や写真・サイトの色を変えれば、どんなコーポレートサイト・企業サイト・ホームページにも合います！

SWELLの外観カスタマイズの設定「おしゃれなコーポレートサイトに！」

この記事では、WordPressの「初期設定」を完了した状態から解説を始めています。

初期設定がまだの場合は、最初に下記の記事から初期設定を済ませてください。

それではさっそくSWELLの「外観カスタマイズ」について解説していきます！

• 管理画面「外観」→「カスタマイズ」

• 上にある「現在のテーマ」が「SWELL CHILD」になっているか確認

ここがCHILDになっていないと、今後アップデートがあった際に設定が元に戻るので要注意です！

SWELLの子テーマのダウンロードと、インストール方法については下記で解説しています！

WordPressの基本情報の確認

• 「WordPress設定」→「サイト基本情報」へ移動
• サイトタイトル＆キャッチフレーズを確認
• サイトアイコンを設定(任意)

サイトのタイトルやキャッチフレーズを変更する場合は、ここから設定できます。

キャッチフレーズについて

キャッチフレーズは、できるだけサービスの内容が分かるものにしておくのがポイントです！

サイトアイコンについて

サイトアイコンというのは、このような検索バーに表示されるマークのことです。

設定していない場合は、WordPressの「W」のマークが表示されます。

サイトの全体カラー

• 「サイト全体設定」→「基本カラー」
• それぞれの色を設定

カラーコードは配色サイトから探すのがおすすめなので、ぜひ下記の記事も参考にしてください！

そして少し「テキストカラー」のポイントを解説すると、真っ黒ではない方がおすすめです！

全体の見た目とフォント

• 「サイト全体設定」→「基本デザイン」へ移動
• 「全体の質感」をお好きな方にチェック

デモサイトではフラットにしていますが、お好きな方で大丈夫です。

• 「サイト全体設定」→「基本デザイン」
• フォントやサイズを調整

こちらもお好きなフォントやサイズを選んでください！

サイドバーの表示/非表示

• 「サイドバー」へ移動
• サイドバーの位置を設定

今回はトップページと固定ページの、サイドバーのチェックを外しました。

メインビジュアル

• 「トップページ」→「メインビジュアル」へ移動
• 「画像」を選択

• 「表示設定」のメインビジュアルの高さを設定

• 「フィルター処理」→なし
• 「オーバーレイカラー」→0

フィルターについては、ある方がいい場合はお好きなものに設定してください。

オーバーレイカラーとは、画像の上から薄く付ける色のことです。

• 画像とテキストを設定

記事スライダー

記事スライダーというのは、このようにメインビジュアルの下に表示される記事のことです。

今回はホームページ型のサイトにするので、「設置しない」設定にします。

• 「トップページ」→「記事スライダー」へ移動
• 「設置しない」にチェック

コンテンツ上の余白

• 「トップページ」→「その他」へ移動
• 「なし」を選択

今回は「固定ページ」で作成するデザインの部分で余白を作るので、ここでは「なし」に設定しておきます。

サイトを更新して全体像を確認しよう！

以上でSWELLの「外観カスタマイズ」の設定が完了です！

保存してからサイトを更新して、全体像を確認してください。

外観カスタマイズができたら、あとはページの細部のデザインを進めていきます。

固定ページなどを作成しながら、どんどん素敵なサイトを作っていってくださいね！

SWELLを使ったトップページのデザインについては、下記の記事で解説しています！