SWELLを使ったコーポレートサイトの作り方【サロンや企業サイトに】【サービスページ】

こんにちは、Sakiです！

この記事では、WordPressテーマ「SWELL」を使ったコーポレートサイトの作り方を解説しています。

今回はこちらのデモサイトに沿って、サイト作成(今回はサービスページ)を進めています。

この記事は下層ページの作成手順です。トップページについては、下記の記事を参考にしてください！

＼ホームページ制作承ってます／

サイト作成前の事前確認

この記事では画像のように、固定ページの「サービス」ページを使って作成を進めていきます。

ページ名はなんでも大丈夫ですが、固定ページを作成してから始めてください！

固定ページの作成方法は、下記の記事で解説しています！

SWELL「コーポレートサイト用」のサービスページ作成手順

それではここから、SWELLを使った「コーポレートサイト用」のサービスページ作成手順を解説していきます。

サービスページの全体像は、デモサイトのサービスページからご確認ください。

ブロックごとに背景の色を変えていますが、このブロックに分けて解説を進めます。ご自身のサイトに必要ない部分は作らなくてもOKです！

ブロック１「サービス紹介文の作成」

フルワイドとタイトルを追加

• 「＋」から「フルワイド」を選択

• 右側バーからサイズを設定

• 右側バーから背景色を設定(デモサイトは#ffffff)

• 見出し(タイトル)を追加
• 右側バーからテキストの色を変更

カラムを追加

• 「＋」から「カラム」を探して選択

• パターンは「50/50」を選択

今回は「50/50」を選んだので、カラム数は２になっています。カラム数を増やしたい場合はここから変更もできます！

• 左側のカラムに「画像」を追加
• お好きな写真を選択

• 右側のカラムにテキストを入力

ここで、テキストが上から表示されているとバランスが悪いので、中央に寄せます。

• 右側のカラム全体を選択

• ツールバーから「中央揃え」を選択

ブロック２「料金表の作成」

次に料金表を作っていきます。

フルワイドとタイトルを追加

• １つ目のフルワイドの下にある「＋」を選択
• 「フルワイド」を追加
• 右側バーからサイズを設定

• 背景色を設定(デモサイトは#f9edf2)
• 「見出し」の部分にタイトルを追加

料金表用の見出しを追加

今回は２種類の料金表を入れるので、それぞれの見出しを付けておきます。

• 「＋」から「見出し」を選択

• 見出しのタイトルを入力
• ツールバーの「H2」を選択して「H3」に変更

H2＝見出し２、H3＝見出し３です。

料金表の作成

• 「＋」から「テーブル」を追加

• カラム数と行数を設定して表を作成

カラム数＝横の列数、行数＝縦の行数です！

表が追加されましたが、背景色の関係で見づらくなっています。なのでデザインを設定して、見やすいようにしたいと思います。

• 右側バーから「ヘッダーセクション」をオンに

• 右側バーから「背景色」を設定

• 各メニュー名を太字にする

この設定はなくても大丈夫ですが、今回は強調させるために太字にします。

• 右側バーから「表のセル幅を固定」をオンに

表のセル幅を固定することで、区切り線が中央にきました。

• 右側バーから「横スクロール」を「SPのみ可能」に設定

この設定をすることで、スマホからの閲覧でも表が崩れる心配がありません。見やすさのためにも、表の幅が大きくなる時は設定するのがおすすめです！

料金表の複製

２つめの料金表も１つめと同じスタイルなら、「複製」で追加すると手間が省けます！

• １つめの「見出し」と「表」の両方を選択
• ツールバーから「複製」をクリック

あとは２つめの料金表用に、タイトルや料金などを変更して完了です。

ブロック３「ご利用方法」

• これまでと同じ手順で、フルワイドとタイトルを追加

• 「＋」から「ステップ」を追加

• タイトルやテキストを入力

３つめのステップを追加するときは、「ステップ」全体を選択すると、下に「＋」が現れるのでそこから追加してください。

ステップのデザインなどは、右側のバーから変更できます！

ページを更新してサービスページ全体を確認

以上でサービスページのカスタマイズが完了です。

最後にページを更新して、サービスページ全体を確認してみましょう！

ページタイトルについて

ちなみに現在、とくに設定していない場合は、下記のようなページタイトルになっているかと思います。

この部分は、設定を変更することで、タイトルの下に背景画像を表示させることができます。

これは下層ページのヘッダーデザインの設定になりますが、手順は下記の記事で解説しています！