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

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

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

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

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

という、メリットがあります。

この記事を読めば、プログラミングの知識がなくてもサイト型トップページを作ることができます。

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

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

トップページの「ブログ型」「サイト型」とは？

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

• ブログ型：記事が新しい順に並んでいる状態。（デフォルトの状態）
• サイト型：記事が整理され、見やすく表示されている状態。

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

読者側と運営者側のメリットを並べてみると…

SWELLを知らないという方は、レビューを書いているので良かったらご覧ください。

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

サイト型トップページを作る手順を説明していきます。

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

固定ページを３つ作成していきます。

STEP1. 新着記事ページを作成

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

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

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

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

②【人気記事ページ】は、設置したい場合のみで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にする

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

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

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

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

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

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

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

今回は「ブロークングリッド」という、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では、ヘッダーだけでも様々なパターンに作ることが可能です。

グローバルナビゲーションの位置や、お知らせバーの色・配置などを変えると、同じテーマでもガラッと雰囲気を変えることができます。

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

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

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

参考までに、当ブログの画像サイズは【1600×360】。

SWELL公式サイトがこのサイズだったので、同様にさせていただきました。

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

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

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

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

レイアウト・デザイン設定

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

【外観】→【メニュー】から作成することができます。

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

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

で構成しています。

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

メインビジュアルの設定

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

準備として、

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

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

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

画像の上にブログパーツでトップページメニューを載せたイメージです。

手順は、

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

となります。

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

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

詳しい設置方法はこちらの記事に書いてあります。

お知らせバーの設置方法

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

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

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

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

ピックアップバナーの設置方法（現在はなし）

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

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

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

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

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

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

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

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

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

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

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

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

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

くうか

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

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

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

くうか

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

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

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

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

サイト型トップページの作り方まとめ

SWELLを使った、サイト型トップページのカスタマイズで行ったこと。

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

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

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

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

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

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

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

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

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