当サイトでは実際に購入した商品のみをレビューし、アフェリエイトリンク付きでご紹介しています
【SWELL】トップページに波のカスタマイズをする
![【WordPressテーマ】SWELLトップページに波のカスタマイズをする](https://classynode.com/wp-content/uploads/2021/04/wpswell_custom_top_eyecatch.jpg)
SWELLには、波のブロック🌊という素敵な機能があります!
この記事では、トップページに、波線を置く手順をご紹介します。
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
わたしは、この波ブロックを使うために、SWELLへ移行しました
この記事でわかること
- トップページを波を置く方法
- トップページを固定ページに切り替える方法
- 新着記事一覧ページを作成する方法
- トップページからサイドバーを消す方法
目次
カスタマイズ後の完成図はこちら
じゃーん✨
![](https://classynode.com/wp-content/uploads/2021/04/swelltoppage_wave_sample.jpg)
![](https://classynode.com/wp-content/uploads/2021/04/swelltoppage_wave_sample.jpg)
この「なみなみ」を作っていきます!🌊
変更前のデザインは、こちら
![](https://classynode.com/wp-content/uploads/2021/04/swelltoppage_202104.jpg)
![](https://classynode.com/wp-content/uploads/2021/04/swelltoppage_202104.jpg)
なみなみを設置するカスタマイズ手順
トップページに波を置くためには、固定ページを作成し、それをトップページにします。
(外観メニューからのカスタマイズでは実現できません)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
手順はカンタンです!
まず、全体の流れをご紹介します。
全体の流れ
- 新しい固定ページ(トップページ)を作る
- 追加した固定ページに、波を設置!
- 追加した固定ページに、投稿リストを設置
- 追加した固定ページの名前を決める
- 新しい固定ページ(新着記事一覧)を作る
- ホームページの表示設定を切り替える
- サイドバーを非表示にする
- ウィジェットを整える
- メニューを整える
次に、具体的な操作手順です。
STEP
新しい固定ページ(トップページ)を作る
![WordPressメニュー](https://classynode.com/wp-content/uploads/2021/04/wp_createpage.jpg)
![WordPressメニュー](https://classynode.com/wp-content/uploads/2021/04/wp_createpage.jpg)
- WordPressの管理画面を開く
- メニューの「固定ページ」をクリック
- 「新規追加」をクリック
STEP
追加した固定ページに、波を設置する!
![](https://classynode.com/wp-content/uploads/2021/04/swellsetting_fullwideblock_wave.jpg)
![](https://classynode.com/wp-content/uploads/2021/04/swellsetting_fullwideblock_wave.jpg)
- 「ブロックの追加」ボタンをクリック
- 「フルワイド」を検索し、クリック
- フルワイドブロックを選択し、ブロックの設定タブで背景色を設定する
- 上部の境界線の形状で「波」、上部の境界線の高さレベルで「4」を設定する
- 下部の境界線の形状で「波」、下部の境界線の高さレベルで「4」を設定する
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
憧れの波ができた!🌊
STEP
追加した固定ページに、投稿リストを設置する
![](https://classynode.com/wp-content/uploads/2021/04/wp_createmorelink.jpg)
![](https://classynode.com/wp-content/uploads/2021/04/wp_createmorelink.jpg)
- フルワイドブロックの中の、「ブロックを追加」ボタンをクリック
- 「投稿リスト」を検索し、クリック
- 投稿リストを選択し、ブロックの設定タブを開く
- MOREリンクの表示テキストに「もっと見る」を入力
- MOREリンクのURLに「new-posts」を入力
STEP
固定ページのページ名(URL)を決める
![](https://classynode.com/wp-content/uploads/2021/04/setting_permalink_home.jpg)
![](https://classynode.com/wp-content/uploads/2021/04/setting_permalink_home.jpg)
- URLスラッグに「home」と入力
- タイトルに「ホーム」と入力
- 「公開」ボタンをクリック
STEP
新着記事一覧用の固定ページを作成する
![](https://classynode.com/wp-content/uploads/2021/04/wp_createnewposts.jpg)
![](https://classynode.com/wp-content/uploads/2021/04/wp_createnewposts.jpg)
- WordPressの管理画面を開く
- メニューの「固定ページ」をクリック
- 「新規追加」をクリック
- タイトルに「新着記事一覧」と入力
- URLスラッグに「new-posts」と入力
- 「公開」ボタンをクリック
新着記事の”URLスラッグ”と、
トップページの”MOREリンクURL”は、
必ず同じ値にしましょう🔗
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
新着記事一覧用のページは、これだけでOK!
STEP
ホームページの表示設定を切り替える
![](https://classynode.com/wp-content/uploads/2021/04/wp_viewsetting_homepage.jpg)
![](https://classynode.com/wp-content/uploads/2021/04/wp_viewsetting_homepage.jpg)
- WordPressの管理画面を開く
- 「設定」をクリック
- 「表示設定」をクリック
- ホームページの表示で「固定ページ」を選択
- ホームページで「ホーム」を選択
- 投稿ページで「新着記事一覧」を選択
- 「変更を保存」をクリック
STEP
(必要があれば)サイドバーを非表示にする
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
サイドバーを使うと、
フルワイドブロックが画面の途中で切れてしまいます。
サイドバーは諦めましょう。
- WordPressの管理画面を開く
- 「外観」をクリック
- 「カスタマイズ」をクリック
- 「サイドバー」をクリック
- 「トップページにサイドバーを表示する」のチェックを外す
- 「固定ページにサイドバーを表示する」のチェックを外す
STEP
(必要があれば)ウィジェットを設定する
- WordPressの管理画面を開く
- 「外観」をクリック
- 「ウィジェット」をクリック
- 「トップページ上部」「トップページ下部」に好きなウィジェットを配置
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
トップページ下部に、
カテゴリやタグクラウドウィジェットを配置しました。
お好みでどうぞ!
STEP
メニューを整える
![](https://classynode.com/wp-content/uploads/2021/04/wp_setting_grobalmenu.jpg)
![](https://classynode.com/wp-content/uploads/2021/04/wp_setting_grobalmenu.jpg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
![](https://classynode.com/wp-content/uploads/2021/03/sirone.jpeg)
固定ページを追加したために、メニューのリンクが増えています。
少しくどい気がするので、これを消します。
- WordPressの管理画面を開く
- 「外観」をクリック
- 「メニュー」をクリック
- 「新しいメニューを作成しましょう」をクリック
- メニュー名に「ヘッダー」を入力
- メニュー位置「グローバルナビ」にチェックを入れる
- 他のチェックを外す
- 「メニューを保存」ボタンをクリック
以上です。おつかれさまです!🌊✨👏
![猫の挿絵002](https://classynode.com/wp-content/uploads/2023/03/cat002.png)
![猫の挿絵002](https://classynode.com/wp-content/uploads/2023/03/cat002.png)
まとめ
![](https://classynode.com/wp-content/uploads/2021/04/swelltoppage_202105.jpg)
![](https://classynode.com/wp-content/uploads/2021/04/swelltoppage_202105.jpg)
波のデザインを追加し、ゆったりとしたデザインになりました。
SWELLを使うと、オシャレなサイトを作りやすいですね!
こちらの記事もどうぞ!
アイキャッチに使用したSWELLアイコンは、開発元の許可をいただき、ダウンロードしたテーマから引用させていただきました。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://classynode.com/wp-content/uploads/2021/05/wpswell_basiccolor_eyecatch-300x158.jpg)
![](https://classynode.com/wp-content/uploads/2021/05/wpswell_basiccolor_eyecatch-300x158.jpg)
![](https://classynode.com/wp-content/uploads/2021/05/wpswell_basiccolor_eyecatch-300x158.jpg)
【SWELL】見出しの文字色をカスタマイズする
SWELL標準では、見出しやカテゴリが白文字です。淡い背景色だと読みづらいため、CSSで文字色をカスタマイズしてみました。 SWELLを使い始めたら、まずはサイトのメイ…
最後まで読んでいただき、ありがとうございました。
みなさまの暮らしがより良くなりますように。