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

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

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

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

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

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

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

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

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

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

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

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

当ブログの最新版サイト型トップページを見たい方はこちらへ →トップページへ

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

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

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

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

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

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

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

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

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

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

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

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

これで事前準備は完了！続いてついに実際の見た目を作っていきます。

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

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

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

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

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

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

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

1. 新着記事エリアの作り方

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

左右にコンテンツを分けています。

1. 左：最新記事を大きなカード型表示、２番目以降の記事を小さく２記事表示
2. 右：文字・キーワード（タグ）・カテゴリーから検索可能なエリア

以下、作成の手順です。

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

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

3. ミニマリストエリアの作り方

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

部屋（Room）エリアの詳細

持ち物（Goods）エリアの詳細

4. シンプルライフエリアの作り方

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

【画像】と【リンクリスト】ブロックで構成しています。

5. ブログエリアの作り方

ブログカテゴリーの主要な記事とSWELL公式サイトを、【メディアとテキスト】ブロックを使って表示させています。

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

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

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

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

画像は、以下の設定メニューから左右のどちらにでも表示することが可能です。

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

1. 【見出し】
2. 【段落】
3. 【SWELLボタン】

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

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

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

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

6. カテゴリーエリアの作り方

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

【タブ】ブロックでカテゴリー数分のタブを作り、それぞれに【投稿リスト】ブロックを入れていきます。

投稿リストは、Pickup設定にてカテゴリーを指定します。

カード型の場合は表示数を３にして、最後の投稿を非表示にするかの項目を【SP表示で非表示】にチェックを入れて、モバイルでは表示数が２になるようにします。（見た目が良いため）

7. 運営者紹介エリアの作り方

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

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

左カラム：幅４０％

【バナーリンク】でプロフィール画像を挿入。

右カラム：幅６０％

【段落】で名前と自己紹介を入力。

下カラム：幅１００％

【ボックスメニュー】でプロフィール・X（旧Twitter）・Instagramにリンク。

8. ギャラリーエリアの作り方

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

以前はインスタグラム風に写真を羅列していたけど、今回はスライダー表示に変えてみました。

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

スライダーのプラグイン「XO Slider」で表示しています。（ XO Slider公式ページ）

こちらのプラグインをインストールすると、WordPressメニューに【スライダー】という項目が出現するのでスライダーを新規作成します。

スライダー作成画面の右下にショートコードが表示されているので、コピーしておきます。

コピーしておいたショートコードを、トップページの固定ページの表示したい場所へ貼り付けます。

当ブログの場合は、２列の【リッチカラム】ブロックを配置して、左カラムにスライダー・右カラムにふきだしを入れて軽く説明をしています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像の透過は、有料版の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お役立ち記事をブクマしておくと良いですよ。

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

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