SWELLといえば、波のブロック！
わたしが、SWELLに移行した理由のひとつは、「トップページに波を置きたかった」からです。
今回は、カンタンなトップページのカスタマイズ手順を共有します。
この記事でわかること
- トップページを波を置く方法
- トップページを固定ページに切り替える方法
- 新着記事一覧ページを作成する方法
- トップページからサイドバーを消す方法
目次
完成図
このなみなみを作っていきます。
ちなみに、変更前のトップページはこのようなデザインでした。
文字が多かったかな。
トップページのカスタマイズ手順
トップページに波を置きたいときは、外観からのカスタマイズでは実現できません。
「固定ページを作成」し、そのページをトップページに設定します。
手順はカンタンです。
複数の工程があるので、まず全体の流れを共有します。
全体の流れ
- 新しい固定ページ（トップページ）を作る
- トップページのデザインを作り、波を置く！
- 新しい固定ページ（新着記事一覧）を作る
- ホームページの表示設定を切り替える
- サイドバーを非表示にする
- ウィジェットを整える
- メニューを整える
次に、具体的な操作手順です。
新しい固定ページ（トップページ）を作る
- WordPressの管理画面を開く
- メニューの「固定ページ」をクリック
- 「新規追加」をクリック
トップページのデザインを作り、波を置く！
- 「ブロックの追加」ボタンをクリック
- 「フルワイド」を検索し、クリック
- フルワイドブロックを選択し、ブロックの設定タブで背景色を設定する
- 上部の境界線の形状で「波」、上部の境界線の高さレベルで「4」を設定する
- 下部の境界線の形状で「波」、下部の境界線の高さレベルで「4」を設定する
憧れの波ができた！
- フルワイドブロックの中の、「ブロックを追加」ボタンをクリック
- 「投稿リスト」を検索し、クリック
- 投稿リストを選択し、ブロックの設定タブを開く
- MOREリンクの表示テキストに「もっと見る」を入力
- MOREリンクのURLに「new-posts」を入力
- URLスラッグに「home」と入力
- タイトルに「ホーム」と入力
- 「公開」ボタンをクリック
新しい固定ページ（新着記事一覧）を作る
- WordPressの管理画面を開く
- メニューの「固定ページ」をクリック
- 「新規追加」をクリック
- タイトルに「新着記事一覧」と入力
- URLスラッグに「new-posts」と入力
- 「公開」ボタンをクリック
新着記事のURLスラッグと、
トップページのMOREリンクURLは、
必ず同じ値にしてください
新着記事一覧のデザインは、何もしなくてもOK！
ホームページの表示設定を切り替える
- WordPressの管理画面を開く
- 「設定」をクリック
- 「表示設定」をクリック
- ホームページの表示で「固定ページ」を選択
- ホームページで「ホーム」を選択
- 投稿ページで「新着記事一覧」を選択
- 「変更を保存」をクリック
ここまで来ると、完成に近いです！
もう少し微調整をします。
サイドバーを非表示にする
- WordPressの管理画面を開く
- 「外観」をクリック
- 「カスタマイズ」をクリック
- 「サイドバー」をクリック
- 「トップページにサイドバーを表示する」のチェックを外す
- 「固定ページにサイドバーを表示する」のチェックを外す
サイドバーを使うと、フルワイドブロックが画面の途中で切れてしまいます。
相性が良くないので、サイドバーは諦めましょう。
ウィジェットを整える
- WordPressの管理画面を開く
- 「外観」をクリック
- 「ウィジェット」をクリック
- 「トップページ上部」「トップページ下部」に好きなウィジェットを配置
Classynodeでは、カテゴリやタグクラウドをトップページ下部に配置しました。
お好みの設定をしてください。
メニューを整える
固定ページを追加したために、メニューのリンクが増えています。
少しくどい気がするので、これを消します。
- WordPressの管理画面を開く
- 「外観」をクリック
- 「メニュー」をクリック
- 「新しいメニューを作成しましょう」をクリック
- メニュー名に「ヘッダー」を入力
- メニュー位置「グローバルナビ」にチェックを入れる
- 他のチェックを外す
- 「メニューを保存」ボタンをクリック
できた！
まとめ
サイドバーをやめて、波のデザインを追加したことで、ゆったりとしたデザインにできました。
SWELLは書きやすく、デザインのカスタマイズもしやすいです。
最後まで読んでいただき、ありがとうございました。
みなさまの暮らしがより良くなりますように。
アイキャッチに使用したSWELLアイコンは、開発元の許可をいただき、ダウンロードしたテーマから引用させていただきました。
あわせて読みたい
【カンタン！3STEP】CocoonからSWELLへの移行手順【乗り換え】
WordPressテーマを、CocoonからSWELLに移行しました。 移行手順は、大きく分けて「1. 検討 → 2. 購入 → 3. 切り替え」の3STEPです。 この記事では、乗り換えのポイ…
あわせて読みたい
SWELLのインストール後に必要な最初の設定（アナリティクス・サーチコンソール）
SWELLを検討している方に向けて、導入後に最初に行うべき設定をまとめました。 先日、WordPressテーマをCocoonからSWELLに移行しました。 移行プラグインを導入する…
あわせて読みたい
【SWELL】見出しの文字色をカスタマイズする
SWELL標準では、見出しやカテゴリが白文字です。淡い背景色だと読みづらいため、CSSで文字色をカスタマイズしてみました。 SWELLを使い始めたら、まずはサイトのメイ…
