![](https://aroma-ecru.com/wp-content/uploads/2022/01/uresiicercle-1-150x150.png)
headerができたのでトップページの作り方を知りたいです
この記事はこんな方の悩みの解決されます
- SWELLのトップページの作り方がわかる
- SWELLのフルワイドセクションの作り方がわかる
- ブロックエディタで3カラムの写真を入れる方法がわかる
ダミーサイトをササッと作ってみました。
猫カフェをイメージしています。
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/17aa3c7f9270d8334d85a9b295b18af1-769x1024.jpg)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/17aa3c7f9270d8334d85a9b295b18af1-769x1024.jpg)
これからワードプレスのインストールをする方は下記のサイトにWordPressを始める手順を載せています。
\ サーバーから契約する方はここをクリック!/
SWELLでサイト型サイトのトップページを作りましょう
(任意)トップページのサイドバーを非表示にする
トップページにサイドバーが不要な場合はサイドバーを非表示にしましょう。
「カスタマイズ」→「サイドバー」からトップページにサイドバーを表示するのチェックを外す
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/13-1024x472.png)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/13-1024x472.png)
トップページ用の固定ページを作る
トップページ用固定ページをWordPressのトップページになるように紐づける
トップページを編集するためにダッシュボードから新規固定ページを作る
作った新規固定ページに「トップページ」というタイトルをつける
ここでは仮に「トップページ」という名前をつけていますがなんでもいいです
新規で作ったページを「公開」する
ダッシュボード「設定」→「表示設定」でホームページの表示部分の固定ページに先ほど作った「固定ページ」を指定する
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-09-8.48.32-1024x458.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/2021-11-09-8.48.32-1024x458.png)
トップページ(固定ページ)を編集する
ダッシュボード→「固定ページ一覧」→「トップページ」を選択
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-11.17.56-1024x386.jpg)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-11.17.56-1024x386.jpg)
入力方法は下の動画を参考にしてみてください。
①「+」ボタンを押してショートカットメニューを開き「②」の「見出し」をクリックし見出しを作る
見出しができたらテキストを入力する
![](https://aroma-ecru.com/wp-content/uploads/2022/02/2022-02-04-16.01.50.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/02/2022-02-04-16.01.50.jpg)
見出しの下あたりをクリックしカーソルを出して本文を入力する
フルワイドセクションを作る
SWELLには全幅で表示できる「フルワイドセクション」があります。
フルワイドセクションを使うことでセクションの境界線を波線にしたり斜線にすることができます。
![](https://aroma-ecru.com/wp-content/uploads/2022/02/2022-02-04-15.10.36-1024x398.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/02/2022-02-04-15.10.36-1024x398.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
最初はなかなかこの「+」マークが探せないかもしれませんが慣れていけば見つけられるようになります
ショートカットメニューから「すべてのメニュー」をクリックし左側メニューから「フルワイド」を選ぶ
![](https://aroma-ecru.com/wp-content/uploads/2022/02/2022-02-04-15.15.13.png)
![](https://aroma-ecru.com/wp-content/uploads/2022/02/2022-02-04-15.15.13.png)
右側メニューの「背景色」の部分をクリックして好きな色に変えることができます。
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-17.00.40-1024x458.jpg)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-17.00.40-1024x458.jpg)
3カラムの作り方
写真を横に3列に並べる。
「+」マークをクリックしショートカットメニューからカラムを選ぶ。
もしショートカットメニューにカラムがない場合は「すべて表示」を押して左側に出てくるメニューからカラムを選ぶ。
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.34.15-1-1024x471.jpg)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.34.15-1-1024x471.jpg)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.40.15-1024x484.jpg)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.40.15-1024x484.jpg)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.41.42-1024x295.jpg)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.41.42-1024x295.jpg)
枠の中の「+」を押しとショートカットメニューが現れるのでその中から画像をクリック。
メディアライブラリの中にあらかじめ入れたい画像を入れておくか、アップロードをクリックしてパソコンの中から載せたい画像を選ぶ。
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.44.23-1024x545.jpg)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.44.23-1024x545.jpg)
画像が入りました。
綺麗に入れるコツとして3枚の画像の縦横比を同じにすること。
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.49.17-1024x474.png)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.49.17-1024x474.png)
写真の下にテキストを入れる。
写真の右下の「+」ボタンを押してショートカットメニューを出し「段落」をクリックします。
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.51.44-1024x475.png)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.51.44-1024x475.png)
テキストが入りました。
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.57.51-1024x501.png)
![SWELLでトップページをカスタマイズする](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-21-16.57.51-1024x501.png)
写真の上に文字を重ねたい時は「バナーリンク」を使うと良い
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
こんな感じで「+」ボタンを押しながらどんどん積み上げていく感じでコンテンツを書いていってください。
次ページはトップページに投稿一覧を表示する・グローバルナビに投稿一覧を表示します。
次の手順はこちらから見ることができます。
\ SWELL購入はこちらから /
![](https://aroma-ecru.com/wp-content/uploads/2022/11/0115_xlarge-150x150.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/11/0115_xlarge-150x150.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/11/0115_xlarge-150x150.jpg)
SWELLのテーマを入れたのはいいけれど、どうやったら素敵なデザインになるの?
ブログを始めたくてSWELLを入れたのにつまづいている・・
そんな方に向けてオンラインレッスンもご用意しております。
コメントを投稿するにはログインしてください。