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

こんにちは、Sakiです!
この記事では、WordPressテーマ「SWELL」を使ったコーポレートサイトの作り方を解説しています。
この記事は下層ページの作成手順です。トップページについては、下記の記事を参考にしてください!

デモサイトはアロマサロンを想定して作っていますが、他のサロン関係のサービスでも、それ以外のサービスでも大丈夫です!

同じ構成でも色や画像を変えることで、雰囲気を大きく変えられます。ぜひご自身のサービスのオリジナリティを出してくださいね!
- 初心者でも直感で簡単に操作できる
- コードや難しい知識不要
- ホームページにもブログにも対応
- Webデザイナーに嬉しい100%GPL
- 利用者も多い人気テーマ
\ホームページ制作承ってます/


Etorire-designでは、個人事業主・フリーランス・ひとり起業をされている、女性起業家さま向けのホームページ制作を承っています!
ホームページ制作を依頼したい方、ホームページの自作に挑戦したけど完成しなかった方など、お気軽にご相談くださいませ♪
サイト作成前の事前確認


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


SWELL「コーポレートサイト用」のサービスページ作成手順
それではここから、SWELLを使った「コーポレートサイト用」のサービスページ作成手順を解説していきます。
サービスページの全体像は、デモサイトのサービスページからご確認ください。
ブロックごとに背景の色を変えていますが、このブロックに分けて解説を進めます。ご自身のサイトに必要ない部分は作らなくてもOKです!
ブロック1「サービス紹介文の作成」
フルワイドとタイトルを追加


- 「+」から「フルワイド」を選択



ここで見つからなければ、「すべて表示」から探してください。


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



ここはお好きなサイズで大丈夫です!


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


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


- 「+」から「カラム」を探して選択


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



左右のバランスを変えたいときは、「30/70」などを選んでも大丈夫です!




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





こんな感じで左側に写真が表示されればOKです!


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


ここで、テキストが上から表示されているとバランスが悪いので、中央に寄せます。
- 右側のカラム全体を選択


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



左側の写真に対して、テキストが上下中央になっていればOKです!
ブロック2「料金表の作成」
次に料金表を作っていきます。
フルワイドとタイトルを追加


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


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


- 「+」から「見出し」を選択


- 見出しのタイトルを入力
- ツールバーの「H2」を選択して「H3」に変更
料金表の作成


- 「+」から「テーブル」を追加


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


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


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



ヘッダーセクションは、「メニュー名」や「料金」など各列のタイトルを入力できるのでおすすめです!


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



表を見やすくするために、今回は背景色に白を設定しました!
カラーコードは「#ffffff」です。


- 各メニュー名を太字にする
この設定はなくても大丈夫ですが、今回は強調させるために太字にします。


- 右側バーから「表のセル幅を固定」をオンに
表のセル幅を固定することで、区切り線が中央にきました。



こちらは列数やメニュー数に合わせて設定してください!


- 右側バーから「横スクロール」を「SPのみ可能」に設定
この設定をすることで、スマホからの閲覧でも表が崩れる心配がありません。見やすさのためにも、表の幅が大きくなる時は設定するのがおすすめです!
料金表の複製


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





このように1つ目と同じものが追加されているはずです!


あとは2つめの料金表用に、タイトルや料金などを変更して完了です。
ブロック3「ご利用方法」


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


- 「+」から「ステップ」を追加


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


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





今回は「ビッグ」のスタイルにしてみました!
ページを更新してサービスページ全体を確認
以上でサービスページのカスタマイズが完了です。
最後にページを更新して、サービスページ全体を確認してみましょう!



お疲れさまでした!思い通りのページはできましたか?
ページタイトルについて
ちなみに現在、とくに設定していない場合は、下記のようなページタイトルになっているかと思います。


この部分は、設定を変更することで、タイトルの下に背景画像を表示させることができます。
これは下層ページのヘッダーデザインの設定になりますが、手順は下記の記事で解説しています!

