【SWELL】おしゃれなトップページへ!カスタマイズ方法ご紹介!

SWELLカスタマイズ

みなさん、こんにちは!

今回はWordPressの人気テーマである【SWELL】のトップページのカスタマイズ方法について書きたいと思います!

使いやすいと言えど、初めは戸惑う部分も多かったため、参考にしていただけたら幸いです。

このサイトも【SWELL】を使っているため、このサイトをベースに紹介していこうと思います!

こんな人にオススメ
  • サイト型トップページを作りたい人
  • おしゃれなトップページにしたい人
  • SWELLのカスタマイズ方法がわからない人
目次

トップページの構成

① メインビジュアル

② カテゴリー

③ 新着記事

④ カテゴリー別記事

⑤ プロフィール

⑥ フッター

このサイトのトップページ構成はこのようになっています!

メインビジュアルの中にヘッダーもあるのですが、併せて説明しようと思います!

以下では主要部分のみを説明していきますので細かい部分はいじりながら試してみてください!

カスタマイズ方法

準備

まず、トップページのもととなる固定ページを作成します!

STEP
『固定ページ』→『新規追加』から『Home』と『新着記事』をつくる
実際のトップページとなる部分

タイトルに『Home』『新着記事』と書いて、パーマリンクを決めたらどちらも『公開』しましょう!

STEP
『外観』→『カスタマイズ』→『WordPress設定』→『ホームページ設定』

『ホームページ設定』のホームページを先ほど作った『Home』に、投稿ページを『新着記事』に設定します。

① メインビジュアル

メインビジュアル

あらかじめ、ロゴとメインビジュアルの画像を用意しましょう!(私はCanva Proで作成しています!)

画像サイズ

ロゴ → 1600×360px

メインビジュアル → 1200×750px

STEP
『カスタマイズ』→『ヘッダー』

■カラー設定

 ヘッダー背景色:969285

 ヘッダー文字色:fff9ef

■ヘッダーロゴの設定

 全てのサイズ:48px

■トップページでの特別設定

 ヘッダーの背景:透明にする(白)

 ※透明にする場合は背景透過のロゴがいいと思います!Canva Proで可能です

 

STEP
『カスタマイズ』→『トップページ』→『メインビジュアル』

■メインビジュアルの高さ

 PC:750px

 SP:100vh

■フィルター処理:ブラシ

■オーバーレイカラー:000

 不透明度:0.4

② カテゴリー

新着記事

ここからは先ほど作成した固定ページの『Home』を編集していきます!

STEP
『ブロック追加』→『フルワイド』

■コンテンツの横幅:記事

■上下のPadding量(PC・SP):20

■背景色:f7f7f7

■ブロック下の余白量:0

STEP
『ブロック追加』→『カラム』→『33:33:33』を追加

私はカテゴリーを4つ設定しているため、カラム数を4にします!

STEP
『カラムの+ボタン』より『バナーリンク』を選択

ここでの画像もCanva Proで作成しており、サイズは500×500pxです!

画像処理

■影を付ける:オン

■画像の丸み:100

■オーバーレイの不透明度:0

③ 新着記事

先ほどのカテゴリーの続きに作製していきます!

STEP
『ブロック追加』→『フルワイド』

■コンテンツの横幅:記事

■上下のPadding量(PC・SP):20

■背景色:f7f7f7

■下部の境界線:波

 高さレベル:4

■ブロック下の余白量:0

タイトルに「New&Popular」と書いて、『ブロック下の余白量』を0にします!

改行後『マイクロコピーとアイコン付きのボタン』を選択して、マイクロ文字の部分だけ文字を変えて利用します!

STEP
『ブロック追加』→『カラム』→『50:50』を追加
STEP
左側:『ブロック追加』→『投稿リスト』を追加

■ レイアウト:リスト型

■ 投稿数:1

■ 新着順

■ 抜粋文の文字数

 PC:120文字

 SP:80文字

STEP
右側:『ブロック追加』→『タブ』→『投稿リスト』を追加

■ レイアウト:リスト型

■ それぞれ新着順・人気順を選択

■ 抜粋の文字数:0

新着記事の場合、記事が被ってしまうので注意が必要です!次に対策を示しますね!

私のトップページの編集画面なのですが、左の新着記事と右の新着記事が被ってしまいます。編集画面では4つ表示されているのですが、実際に表示されているのは一番新しい記事を抜いた3記事となっています!

■ 表示する記事数:4

■『高度な設定』→『追加CSSクラス』に【li-first-none】を追加

■『外観』→『カスタマイズ』→『追加CSS』に下を入力

.li-first-none > ul >li:first-child {
display: none;
}

④ カテゴリー別記事

ここではカテゴリー別に記事を紹介しています!

カテゴリーごとにアイキャッチの雰囲気も統一させています笑

STEP
『ブロック追加』→『フルワイド』

■コンテンツの横幅:記事

■上下のPadding量(PC・SP):40

■背景色:f1efe9

■ブロック下の余白量:0

STEP
『ブロック追加』→『タブ』→『投稿リスト』を追加

■ タブのスタイル:下線

■ タブサイズ設定(PC・SP):端まで並べる(均等幅で)

■ 投稿のレイアウト:リスト型

■ 表示順:ランダム

■ 抜粋文の文字数

 PC:120文字

 SP:0文字

⑤ プロフィール

STEP
『ブロック追加』→『フルワイド』

■コンテンツの横幅:記事

■上下のPadding量(PC・SP):20

■背景色:f7f7f7

■上部の境界線:波

 高さレベル:4

■ブロック下の余白量:0

STEP
『ブロック追加』→『カラム』→『50:50』を追加

左側にこのブログのコンセプト、右側に似顔絵を挿入しています!

似顔絵はココナラで描いていただきました!

STEP
もう1個『ブロック追加』→『カラム』→『50:50』を追加

右側の詳しいプロフィールは『SWELLボタン』を追加!

他に気を付けること

メインビジュアル下の空白を消したい

SWELLはピックアップバナーの機能がもともと搭載されているため、ピックアップバナーを設置していないとここに余白ができてしまいます。

確認する場所が2つあるので、下のやり方を試してみてください!

STEP
『外観』→『カスタマイズ』→『その他』

コンテンツ上の余白量を『なし』にします!

STEP
『外観』→『メニュー』

『メニュー設定』で『ピックアップバナー』にチェックが入っている場合でも余白ができてしまうらしいのでメニューを1つずつ確認してチェックを外してください!

フルワイドの境界線がズレる

このブログでは境界線を『波』にしているのですが、上下とも『波』にしてしまうとお互いが干渉してしまいます。

『ブロック下の余白量』で調整してもSP画面では余白ができてしまうことがあるので、上下どちらかに設定した方がいいです!

その場合は下のタイトルが近くなったりするので、そこは『ブロック下の余白量』で調整してみてください!

最後に

いかがだったでしょうか?

SWELLはすごくブロックエディタが揃っているので、簡単にサイト型のトップページを作ることができます!

でも、最初は作り方がわからない人も多いと思うので参考にしてみてください!

納得のいくトップページが作れた頃にはSWELLにも慣れていると思います!

最後までお読みいただきありがとうございました!

tomo
『昨日より、少し背伸びを。』

2つ目のブログになります!
工業高校から国立大学へ入学した現在大学4年生です。

みなさまの生活が今より少し豊かになるような情報発信をこころがけています。
よかったらシェアお願いします!
  • URLをコピーしました!
  • URLをコピーしました!
目次