MENU

    【SWELL】トップページに波のカスタマイズをする

     

    SWELLといえば、波のブロック!

     わたしが、SWELLに移行した理由のひとつは、「トップページに波を置きたかった」からです。

     今回は、カンタンなトップページのカスタマイズ手順を共有します。

    この記事でわかること
    • トップページを波を置く方法
    • トップページを固定ページに切り替える方法
    • 新着記事一覧ページを作成する方法
    • トップページからサイドバーを消す方法
    目次

    完成図

    変更後
     

    この波を作っていきます。

     ちなみに、変更前のトップページはこのようなデザインでした。

    変更前
     

    文字が多かったかな。

    トップページのカスタマイズ手順

     トップページに波を置きたいときは、外観からのカスタマイズでは実現できません。
     「固定ページを作成」し、そのページをトップページに設定します。

     手順はカンタンです。

     複数の工程があるので、まず全体の流れを共有します。

    全体の流れ
    1. 新しい固定ページ(トップページ)を作る
    2. トップページのデザインを作り、波を置く!
    3. 新しい固定ページ(新着記事一覧)を作る
    4. ホームページの表示設定を切り替える
    5. サイドバーを非表示にする
    6. ウィジェットを整える
    7. メニューを整える

     次に、具体的な操作手順です。

    新しい固定ページ(トップページ)を作る

    1. WordPressの管理画面を開く
    2. メニューの「固定ページ」をクリック
    3. 「新規追加」をクリック

    トップページのデザインを作り、波を置く!

    1. 「ブロックの追加」ボタンをクリック
    2. 「フルワイド」を検索し、クリック
    3. フルワイドブロックを選択し、ブロックの設定タブで背景色を設定する
    4. 上部の境界線の形状で「波」、上部の境界線の高さレベルで「4」を設定する
    5. 下部の境界線の形状で「波」、下部の境界線の高さレベルで「4」を設定する
     

    憧れの波ができた!

    1. フルワイドブロックの中の、「ブロックを追加」ボタンをクリック
    2. 「投稿リスト」を検索し、クリック
    3. 投稿リストを選択し、ブロックの設定タブを開く
    4. MOREリンクの表示テキストに「もっと見る」を入力
    5. MOREリンクのURLに「new-posts」を入力
    1. URLスラッグに「home」と入力
    2. タイトルに「ホーム」と入力
    3. 「公開」ボタンをクリック

    新しい固定ページ(新着記事一覧)を作る

    1. WordPressの管理画面を開く
    2. メニューの「固定ページ」をクリック
    3. 「新規追加」をクリック
    4. タイトルに「新着記事一覧」と入力
    5. URLスラッグに「new-posts」と入力
    6. 「公開」ボタンをクリック

     新着記事のURLスラッグと、
     トップページのMOREリンクURLは、
    必ず同じ値にしてください

     

    新着記事一覧のデザインは、何もしなくてもOK!

    ホームページの表示設定を切り替える

    1. WordPressの管理画面を開く
    2. 「設定」をクリック
    3. 「表示設定」をクリック
    4. ホームページの表示で「固定ページ」を選択
    5. ホームページで「ホーム」を選択
    6. 投稿ページで「新着記事一覧」を選択
    7. 「変更を保存」をクリック
     

    ここまで来ると、完成に近いです!

    もう少し微調整をします。

    サイドバーを非表示にする

    1. WordPressの管理画面を開く
    2. 「外観」をクリック
    3. 「カスタマイズ」をクリック
    4. 「サイドバー」をクリック
    5. 「トップページにサイドバーを表示する」のチェックを外す
    6. 「固定ページにサイドバーを表示する」のチェックを外す
     

    サイドバーを使うと、フルワイドブロックが画面の途中で切れてしまいます。

    相性が良くないので、サイドバーは諦めましょう。

    ウィジェットを整える

    1. WordPressの管理画面を開く
    2. 「外観」をクリック
    3. 「ウィジェット」をクリック
    4. 「トップページ上部」「トップページ下部」に好きなウィジェットを
     

    Classynodeでは、カテゴリやタグクラウドをトップページ下部に配置しました。

    お好みの設定をしてください。

    メニューを整える

     

    固定ページを追加したために、メニューのリンクが増えています。
    少しくどい気がするので、これを消します。

    1. WordPressの管理画面を開く
    2. 「外観」をクリック
    3. 「メニュー」をクリック
    4. 「新しいメニューを作成しましょう」をクリック
    5. メニュー名に「ヘッダー」を入力
    6. メニュー位置「グローバルナビ」にチェックを入れる
    7. 他のチェックを外す
    8. 「メニューを保存」ボタンをクリック
     

    できた!

    まとめ

     サイドバーをやめて、波のデザインを追加したことで、ゆったりとしたデザインにできました。

     SWELLは書きやすく、デザインのカスタマイズもしやすいです。

     最後まで読んでいただき、ありがとうございました。

     みなさまの暮らしがより良くなりますように。

    アイキャッチに使用したSWELLアイコンは、開発元の許可をいただき、ダウンロードしたテーマから引用させていただきました。

    お役に立てたら幸いです
    目次
    閉じる