SWELLカスタマイズ｜サイト型トップページの作り方【おしゃれ・かわいい】

こんにちは、SWELLというWordPressテーマを３年以上愛用している、くうかです。

この記事では、SWELLでサイト型トップページにするカスタマイズ方法を解説しています。

サイト型トップページにすることで、

• 運営者が読んでほしい記事をアピールできる
• ユーザーが読みたい記事を探しやすくなる
• サイトの個性を出せる

というメリットがあるので、記事が増えてきたタイミングでサイト型にすることを検討しても良いかもしれません。

当ブログのようなサイト型トップページの作り方を、まるっとわかりやすく説明していくので、ぜひ最後まで読んでみてください。

当ブログは、SWELL公式サイトに利用ブログとして掲載されています。

＼ 公式サイトを見てみる ／

サイト型トップページとは？

ブログのトップページには、「ブログ型」と「サイト型」があります。

• ブログ型：ブログ作成時のデフォルトの状態で、記事が新しい順に並んでいる
• サイト型：記事がコンテンツごとに整理され、ユーザーに見やすく配置されている

実際に現在のサイト型トップページを見たい方はこちらから →トップページへ

サイト型にすることで、読者側と運営者側が得られるメリットを並べてみると…

SWELLではサイト型を作るのに適した高機能なブロックが揃っていて、私もSWELLに移行してすぐにサイト型トップページを作ることができました。

SWELLを知らないという方は、レビューを書いているのでよろしければご覧ください。

SWELLを使ったサイト型トップページのカスタマイズ【３つのステップ】

ヘッダーやフッターのカスタマイズはあとで説明していくので、まずはサイト型トップページの基本の作り方を解説していきます。

SWELLでは、固定ページで好きなようにブロックを組み合わせることで、自由なデザインのトップページを作れるようになります。

固定ページを３つ作成していきます。（もしくは２つ）

STEP1. 【事前準備】固定ページで①新着記事ページ②人気記事ページを作成

①【新着記事ページ】は、タイトルとパーマリンク（URL）のみを設定した空白のページを作ります。

ワードプレスのメニューから「固定ページ」→「新規追加」します。

1. タイトル（自分がわかりやすいもの）→「新着記事」としました。
2. URLスラッグ（URLとなるので英語推奨）→「new-post」としました。
3. 公開する

ページの中身は空白ですが、最後のWordPressでの設定をおこなうことで、以下のような新着一覧ページとなります。

②【人気記事ページ】は、設置したい場合のみでOKで省略可能です。

投稿リストブロックを配置して、読んでほしい記事をピックアップして表示させるページ。

ワードプレスのメニューから「固定ページ」→「新規追加」します。

1. タイトル（自分がわかりやすいもの）→「人気の記事」としました。
2. URLスラッグ（URLとなるので英語推奨）→「popular」としました。
3. 投稿リストブロックを追加する
   1. 投稿数：６、レイアウト：カード型、抜粋文：お好みで
   2. Pickupタブの投稿IDに６記事文のIDを記載
4. 公開する

当ブログでは、本当の人気記事の表示ではなく、ピックアップしたい記事を表示しています。

本当の人気記事順に並べたい場合は、投稿IDを指定せず、表示順序を「人気順」にしてください。

STEP2. 【メイン】固定ページで③ホームページを作り込む

このステップがサイト型の１番のメインとなります。

実際の見た目となるメインの③【ホームページ】全体像はこんな感じ！

それでは、ようやくトップページのメインとなる③【ホームページ】を作っていきます。
※ホームページもしくはフロントページとも呼ばれます。

ワードプレスのメニューから「固定ページ」→「新規追加」します。

1. タイトル（自分がわかりやすいもの）→「Home」としました。
2. URLスラッグ（URLとなるので英語推奨）→「home」としました。
3. 下書き保存または公開する。（公開は完成後でもOK）

そして、トップページに入れたい以下の内容を作り込んでいきます。

①新着記事エリアの作り方

見た目はこのように作りました。

最新の１・２番めの記事のみカード型のアイキャッチ付きで目立たせ、３番目以降の記事はテキスト表示にしています。

以下、作成の手順です。

１〜２番目の記事を非表示、だけでなくカッコ内の「（-n+2）」の２の部分を他の数字に変えると、その数字の数だけ記事を非表示にすることができます！

例：３記事非表示にする場合は、-n+3にする

他にもこのような表示方法もできます。（当ブログの旧バージョンより）

これら旧バージョンのレイアウトは、以下の記事で詳しく解説しています。

②コンセプトエリアの作り方

サイトのコンセプトを表示するエリアです。

【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】にインライン画像を設定。

【リッチカラム】ブロックを追加し、列数を決めます。

PC・タブレットは２列、SPは１列にして、あらかじめ作成しておいたサイトの画像を左カラムに追加。

右カラムにはサイトのコンセプトを入力していきます。

③ピックアップエリアの作り方

特に紹介したい記事を、「メディアとテキスト」ブロックを使って表示させています。

【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】にインライン画像を設定。

そして【メディアとテキスト】ブロックを追加。

メディアとテキストブロックは、画像と文字の組み合わせで通常のブロックにはないレイアウトが楽しめます。

今回は「ブロークングリッド」という、SWELL独自のレイアウトを使ってみました。

テキスト側には様々なブロックを入れることができますが、今回は

• 【段落】
• 【SWELLボタン】

のブロックを入れて、関連する記事にリンクさせています。

テキスト側の背景色や装飾は、段落などのブロックをすべて選択した状態で【グループ化】するとできます。

余談ですが、背景色を「グレー」に設定すると、CSSを使わずに透過されますよ。

とても簡単なブロックですが、以下の記事で使い方を解説しています。

④人気記事エリアの作り方

ブログの人気記事を紹介しているエリアです。

【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】 にインライン画像を設定。

そして【投稿リスト】ブロックを追加。

⑤カテゴリーエリアの作り方

【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】 にインライン画像を設定。

また【タブ】ブロックを使って、省スペースでカテゴリー別の記事を表示する方法もあります。

タブブロック内に、カテゴリーごとの投稿リストを入れるとこのような表示が可能です。

⑥ギャラリーエリアの作り方

写真を多く使っているブログなので、写真をメインにしたエリアがあってもいいかなと思い作りました。

【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】にインライン画像を設定。

1. 【リッチカラム】を追加し、好みの列数にする
   1. 当ブログは「横スクロールで表示する」にチェック
   2. 横幅はPCタブレットは220px、スマホは180px
   3. カラム間の余白は左右0.3rem
2. 各列に【バナーリンク】を追加し、画像とリンク先を設定する

⑦サイト紹介エリアの作り方

【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】にインライン画像を設定。

【見出し】設定後、【リッチカラム】ブロックで２列のカラムを作成し、それぞれ以下の通りに設置。

左カラム

1. 【バナーリンク】でプロフィール画像
2. 【リスト】で軽く自己紹介
3. 【SWELLボタン】で詳しいプロフィールページへリンク

右カラム

SWELLの紹介パーツエリアとし、バナー・テキスト・SWELLボタンを配置。

⑧検索エリアの作り方

キーワードで検索できるエリアとなっています。

【フルワイド】ブロック（フルワイドセクション）を追加し、【見出し】にインライン画像を設定。

1. 【検索】ブロック：箱の中に任意のテキストを入力することができる
2. 【タグクラウド】ブロック：タグ一覧の表示設定ができる

フルワイドのトップページにすると、サイドバーがなくなってしまうので、それを補うために表示させています。

タクソノミーに【タグ】が選択されていればOK。

【カテゴリー】なども選択肢に表示されるので注意。

STEP3. 【最後の仕事】ホームページ設定（作成した固定ページをトップページに表示）

固定ページで新着記事やメインページが完成したら、最後に以下の設定を行います。

【ホームページ設定】で、【ホームページ】【投稿ページ】部分に先ほど作成した固定ページ２つをそれぞれ割り当てる。

【ホームページの表示】を【◎固定ページ】にチェック。

【ホームページ】を作成した固定ページにします。

1. ホームページ：③ホームページ（メインとして作成した固定ページ）
2. 投稿ページ：①新着記事（空白で作成した固定ページ）

ホームページ設定を参考にさせていただきました！

なお、フルワイドブロックを使う場合は、サイドバーを非表示にした方がよりダイナミックなトップページになります。

トップページのサイドバーを非表示にする方法は？

【外観】→【カスタマイズ】→【サイドバー】にて、トップページを非表示設定にします。

または固定ページの【ホームページ】自体のSWELL設定で、サイドバーを非表示にすることができます。

＼ 公式サイトを見てみる ／

SWELLでヘッダーをカスタマイズする方法

SWELLでのヘッダーのカスタマイズを解説していきます。

ヘッダーはサイトを開いた時に最初に目につく場所で、１番目立ちます。以下の各種設定をおこなってサイトの雰囲気を決めていきましょう。

1. ロゴ画像
2. グローバルナビ
3. メインビジュアル
4. お知らせバー
5. ピックアップバナー（当ブログでは未使用）
6. 記事スライダー（当ブログでは未使用）

ヘッダーロゴ設定：画像サイズ【1600×360】

ヘッダーは画像にすると、サイトの個性が出て一気にイメチェンに♪

いつもお世話になっているツール、Canva Proで作成しました。

参考までに、当ブログの画像サイズは【1600×360】。SWELL公式サイトがこのサイズだったので、同様にさせていただきました。

サイトの雰囲気と合わせてシンプルに作りました。

ロゴ画像設定箇所：
【外観】→【カスタマイズ】→【ヘッダー】→【ロゴ画像の設定】

Canvaはオンラインで無料で使える、便利な画像編集ツール。

画像の透過は、有料版のProにて作成しています。（無料のお試し期間もあり）

＼Proで簡単に画像の背景を消せる／

グローバルナビとレイアウト・デザイン設定

ヘッダーに表示させるメニュー（いわゆるグローバルナビゲーション）を、あらかじめ作成しておきます。

グローバルナビ作成箇所：
【外観】→【メニュー】から作成することができます。

当ブログのグローバルナビは、

• 各カテゴリー（＋サブカテゴリー）
• サイトマップ

で構成しています。

グローバルナビのメニューの作成が終わったら、カスタマイザーでの設定を。

ヘッダーのレイアウト設定箇所：
【外観】→【カスタマイズ】→【ヘッダー】→【レイアウト・デザイン設定】

メインビジュアルの設定

メインビジュアルとは、サイトのファーストビューとして設定できる、画像や動画のことです。

準備として、

• 画像or動画
• リンクを設置するか

を、考えておきましょう。

当ブログでは、動画にブログパーツを組み合わせたメインビジュアルにしています。

Canvaで作成した動画の上に、ブログパーツでトップページメニューと画像をのせたイメージです。

手順は、

1. メニューのブログパーツを作る
   1. リッチカラムブロックを使って、配置したい場所にメニューや画像が来るように調整する
   2. メニューからトップページの各エリアへアンカーリンクをする
2. メインビジュアルにする背景動画（または画像）を用意する
   1. 必要であればPCとSPで動画（画像）を分ける
3. カスタマイザーでメインビジュアルの設定をする

となります。

メインビジュアル設定箇所：
【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】

設定項目	設定内容
メインビジュアルの表示内容	動画
表示設定	Scrollボタンを表示させるにチェック
メインビジュアルの高さ設定	ウィンドウサイズにフィットさせる
動画（PC用）	用意した動画を設定（サイズ例：1600×900px）
ブログパーツID1	作成したブログパーツのIDのみ入力

詳しい設置方法は、以下の記事にまとめています。

お知らせバーの設置方法

トップページの１番上にお知らせバーを設置しました。

ヘッダーの背景を透明にしている場合は、トップページには表示されません。

お知らせバー設定箇所：
【外観】→【カスタマイズ】→【サイト全体設定】→【お知らせバー】

このトップページカスタマイズ記事へ、一発で遷移できるリンクを入れたくて設置しました。

ピックアップバナーの設置方法（当ブログは未使用）

現在のトップページにはピックアップバナーは設置していませんが、設置時の説明だけ記載しておきます。

ヘッダー部分には、記事がランダムでスライドするかっこいい【スライダー】を設置することもできますし、記事やカテゴリをピックアップ表示できる【ピックアップバナー】を設置することもできます。

SWELLではスライダーとピックアップバナー、両方を表示させることも可能。

ピックアップバナー設定箇所：
【外観】→【カスタマイズ】→【トップページ】→【ピックアップバナー】

当ブログのピックアップバナーの画像サイズは【400×150】です。

ピックアップバナーにはカテゴリーをあてるのも良いですが、テーマごとにバラバラになっている記事をまとめた”まとめ記事”をリンクさせるのもおすすめです。

【外観】→【メニュー】で投稿ページやカテゴリーなどを追加し、【ピックアップバナー】として登録します。

ピックアップバナーの画像は、投稿ページなどで設定されているアイキャッチが適用されますが、【概要】に画像のURLを直接指定することにより、任意の画像にも指定できます。

ピックアップバナー：任意の画像の設定の仕方

画像URLは、ワードプレスの左メニュー内の【メディア】→【ライブラリ】で該当の画像のURLがわかります。

ピックアップバナーに関する質問

トップページ以外の記事ページ等にもピックアップバナーを表示させたい場合はどうすればいいの？

【外観】→【カスタマイズ】→【トップページ】→【ピックアップバナー】→【その他】で、「トップページ以外の下層ページにも表示する」にチェックを入れます。

くうか

記事ページにもピックアップバナーが表示されるようになります！

タイトルロゴとピックアップバナーの間に余白が入ってしまう

【外観】→【カスタマイズ】→【トップページ】→【その他】で、「コンテンツ上の余白量」を標準から狭めやなしに設定します。

くうか

当ブログは「なし」です。

記事スライダーの設定（当ブログは未使用）

記事スライダーも現在のトップページでは未使用となっていますが、設定内容だけ記載しておきます。

記事をスライドさせながら表示ができる記事スライダー。

設置するとメインビジュアルの下に表示されます。

とても目を引くので、見たい記事があればユーザーが回遊してくれるはず。

記事スライダー設定箇所：
【外観】→【カスタマイズ】→【トップページ】→【記事スライダー】

• カテゴリーまたはタグで絞る
• 並び順
• 表示の設定
• スライドの枚数・速度・間隔の設定

などを設定することができます。

SWELLでフッターをカスタマイズする方法

フッターまで見てくれる人は果たしているのか？わかりませんので、見られなくてもいい・でも自分にはないと困るようなコンテンツを置いています。笑

フッターは１〜３まであり、【外観】→【ウィジェット】で設定することができます。

ブログのトップページをおしゃれにするために意識していること

ブログのトップページを少しでもおしゃれだったり、可愛くしたい。

そのために私が意識していることは３つ。

SWELLを使ったサイト型トップページの作り方まとめ

SWELLを使った、おしゃれなサイト型トップページのカスタマイズでおこなったことのまとめです。

ブロックの組み合わせと設定だけで、ここまでできるテーマ「SWELL」。

ワードプレスを始めてすぐの私でもできて、このテーマを選んでよかった！と感じました。

検索からの流入がほとんどだとトップページはあまり見られないかもしれませんが、トップページはブログの顔！と私は考えています。

（余談：一応、当ブログは毎日トップページのアクセスが１番多い。）

ユーザーの気持ちになって、見やすさはこれからも追及し続けていきたい。（あと自己満足。笑）

色んなサイトのデザインを見たい！という方に、さとしんさんのSWELLサイト集がおすすめ。

カスタマイズの参考に、しらこさんとsuyaさんのSWELLお役立ち記事をブクマしておくと良いですよ。

最後に：この記事を紹介してくれたサイト

この記事を紹介してくれたサイトを、ありがとうリンク集にて掲載させていただいています。