SWELLでトップページ簡単カスタマイズ手順【作り方画像で解説】

SWELLサイトを見た人でこう思った方はいるのではないでしょうか?

「自分のサイトもこんな風に美しいデザインしたい」と。

そう思い検索しながら一日以内で自分のトップページをカスタマイズしてみました。

今回はトップページのカスタマイズした手順を紹介していこうと思います。

ほころび

何がすごいかと言いますとトップページを作るのにCSSとかコードを一度も使っていないことです

目次

見本全体図

トップページを図で分解すると以下のような画像になります。

赤枠部分が【外観】→【カスタマイズ】で設定した部分(労力の3割程度)。

青枠部分が固定ページで作成した部分(労力の7割程度)になります。

おおまかな流れ

STEP
トップページに表示させたいものを固定ページで作成
STEP
WordPress画面の【設定】→【表示設定】でトップページの表示を作成した固定ページに変更

固定ページを選択。ドロップダウンメニューからSTEP1で作成した固定ページ(のURLスラッグ)を選択。

(画像で例としてTopと記載されていますが、パーマリンクのURLスラッグはお好みの名称で大丈夫です)

STEP2を設定すると固定ページがホームとして表示されるようになります。

STEP
WordPress画面の【外観】→【カスタマイズ】でお好みの画像で設定

画面遷移順は【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】。

詳細手順

固定ページの作成

STEP
固定ページでトップページに表示したいコンテンツを決定

固定ページのタイトルやURLスラッグは適当に決めて問題ないです(例、home、topなど)

この画像の場合、固定ページは以下の3コンテンツで構成されています。

①バナーリンク
②おすすめ記事
③記事一覧

STEP
バナーリンク設定
ブロックエディタで利用した機能の順番

【フルワイド】機能(で横幅を広げる)
詳細設定:コンテンツサイズはサイト幅。上下のpaddingはお好みで。
【カラム】機能
フルワイドの中でカラムを挿入。1~3カラムまで選択可能。
【バナーリンク】機能でカラムの中に挿入
詳細設定:画像は自分で用意。文字を入れたり、飛ばしたいURLを入力。

STEP
おすすめ記事設定
ブロックエディタで利用した機能の順番

【フルワイド】機能
フルワイド挿入時に(文字を入れる)見出しが出てくるのでそのときに入れたいタイトル(おすすめ記事など)を入力。
詳細設定:コンテンツサイズはサイト幅。上下のpaddingはお好みで。
【投稿リスト】機能
フルワイドの中で投稿記事を挿入。
詳細設定:表示させたい記事を決定・何記事表示させるか・何カラム(列)等。

STEP
記事一覧設定
ブロックエディタで利用した機能の順番

【フルワイド】機能
詳細設定:コンテンツサイズは記事。上下のpaddingはお好みで。
【タブ】機能
フルワイドの中でタブを挿入。画像の例だと新着記事と人気記事の2タブのみを作成。
【投稿リスト】機能
タブの中に投稿記事を埋め込む。

ここまで大雑把に作りこみができたら固定ページを公開します。

固定ページができれば7割完成したようなものです!

作成した固定ページをトップページに表示するよう設定

STEP
WordPress画面の【設定】→【表示設定】を選択
STEP
作成した固定ページを選択

ホームページのドロップダウンメニューで固定ページのスラッグを選択

STEP
画面下にある【変更を保存】ボタンを選択

この設定によってトップページに固定ページで作成したのものが表示されるようになります。

メインビジュアルの設定

STEP
WordPress画面の【外観】→【カスタマイズ】を選択
STEP
カスタマイズ画面になったら【トップページ】→【メインビジュアル】を選択
STEP
ラジオボタンで画像を選択
STEP
スクロールして【■各スライドの設定】でビジュアル詳細設定

トップページに入れたいスライド画像(PC用・スマホ用)を選択。

その下に項目:メインテキストとサブテキスト、リンク先URL、ボタンテキストを任意で入力。

追記:READ MOREの作り方

記事一覧を作成する際に、詳細設定で次のページ(READ MORE)を設置するかどうかを決めることができます。

設置する場合、固定ページ①(トップページ用)とは別に、もう一つ固定ページ②(記事一覧用)を作成する必要があります。

STEP
記事一覧専用の固定ページ②を作成

仮としてタイトル「new post(記事一覧だとわかればなんでも可)」、スラッグ「new-post」で作成。

中身は特に記載不要。

STEP
WordPress画面の【設定】→【表示設定】で投稿ページを作成した固定ページ②に変更
STEP
トップページの記事一覧に戻って、READ MOREのURLを固定ページ②URLを入力

これで、READ MOREをクリックすると記事一覧専用のページに画面遷移し、1ページ以降に渡れるようになります。

最後に

初めてトップページをカスタマイズしてみましたが、図として分解・構造を把握できれば、あとはブロックエディタでポチポチとマウスクリックするだけで簡単にできました。

※簡単=検索していくつか参考にすれば自力で可能&一日以内で作成可能という意味。

シンプルに美しいのが魅力のSWELL。是非試してみてください。

よかったらシェアしてね!
目次
閉じる