SWELLカスタマイズ｜サイト型トップページの作り方【おしゃれ】
こんにちは、SWELLを２年以上使用しているブロガーのくうかです。
この記事では、SWELL
を使ったサイト型デザインのトップページの作り方を解説しています。
- ヘッダーの設定方法
- ロゴ画像のサイズ設定
- お知らせバーの設定
- ピックアップバナーの設定
- 実際の見た目（ホームページ）のカスタマイズ方法
- 新着記事
- ピックアップ
- 人気記事
- カテゴリー
- ギャラリー
- サイト紹介
- サイト内検索
- フッターの設定方法
妹分のゆずいろSWELLはサイト型のトップページが作りやすいって聞いたけど本当？
くうか本当だよ！私もずっと憧れてたけど作れなかったサイト型が、SWELLにしたら作れたの。
SWELLの高機能なブロックのおかげで、ワードプレス初心者でも作れたサイト型トップページ。
- サイト型のトップページにしたい
- おしゃれなトップページにしたい
- SWELLの機能を知りたい
くうか詳しく、なるべくわかりやすく説明していきます…！
＼ 公式サイトを見てみる ／
サイト型のトップページとは
まず、トップページをサイト型にカスタマイズした完成形がこちらになります。（画面を開いた時の状態）
妹分のゆずいろなんだか印象的でおしゃれだね！
くうかSWELLにしたらこんな風にしたいが叶ったんだよ～！
ブログを運営していて、ずっとサイト型というトップページに憧れていました。
ブログはデフォルトだと新しい順に記事が並んでいます。
それをゲーム攻略サイトのような、情報が整理された状態で表示され、
- ユーザーが知りたい情報を見つけやすい
というイメージがサイト型。（※私のイメージです）
- 読んでほしい記事をアピールできる
- 読者が読みたい記事を探せるように促すことができる
- 見た目が良い！
妹分のゆずいろなるほど！それは読者にも自分にも良いメリットだね。
記事数が増えると古い記事がどんどん埋もれていってしまいます。
そこで、おすすめしたい記事やカテゴリー別に記事を表示できたら良いのでは…と構想は膨らむ。
くうかSWELLではわりと簡単にサイト型が作れる！しかもおしゃれになります！！（SWELLはデフォルトでおしゃれですがさらに！）
SWELLを知らないという方は、レビューを書いているので良かったらご覧ください。
くうか工程は大きく分けて３ステップ。
1. SWELLでヘッダーをカスタマイズ
SWELLでは、ヘッダーだけでも様々なパターンに作ることが可能です。
グローバルナビゲーションの位置や、お知らせバーの色・配置などを変えると、同じテーマでもガラッと雰囲気を変えることができます。
ヘッダーロゴ画像を用意する：サイズ【1600×360】
ヘッダーは画像にすると、個性が出て一気にイメチェンに♪
いつもお世話になっているツール、Canva Proで作成。
参考までに、当ブログの画像サイズは【1600×360】。
SWELL公式サイトがこのサイズだったので同様にさせていただきました。
くうか自身のサイトに合う、お好みのサイズにしてみてくださいね。
- 画像サイズ（PC)：55px
- 画像サイズ（PC追従ヘッダー）：48px
- 画像サイズ（SP)：70px
- ヘッダーレイアウト（PC)：ヘッダーナビロゴ横右寄せ
- ヘッダーレイアウト（SP）：ロゴ中央メニュー左
- ヘッダー境界線：なし
- ヘッダーの背景を透明にするか：する（文字色：黒）
Canvaは無料で使える便利なツール。
画像の透過は、有料版のProにて作成しています。（無料のお試し期間もあり）
メインビジュアルの設定
メインビジュアルとは、サイトのファーストビューとして設定できる、画像や動画のことです。
くうかサイトの個性を出せる部分であると思っています。
準備として、
- 画像or動画
- リンクを設置するか
を、考えておきましょう。
当ブログでは、画像にブログパーツを組み合わせたメインビジュアルにしています。
画像の上にブログパーツでトップページメニューを載せたイメージです。
手順は、
- メニューのブログパーツを作る
- リッチカラムブロックを使って、配置したい場所にメニューや画像が来るように調整する
- メニューからトップページの各エリアへリンクする
- メインビジュアルにする背景画像を用意する
- 必要であればPCとSPで画像を分ける
- カスタマイザーでメインビジュアルの設定をする
となります。
| 設定項目 | 設定内容 |
|---|---|
| メインビジュアルの表示内容 | 画像 |
| 表示設定 | Scrollボタンを表示させるにチェック |
| メインビジュアルの高さ設定 | ウィンドウにフィットさせる |
| スライド画像1（PC用） | PC用に用意した画像を設定（サイズ例：1600×900px） |
| スライド画像1（SP用） | SP用に用意した画像を設定（サイズ例：960×600px） |
| ブログパーツID1 | 作成したブログパーツのIDのみ入力 |
詳しい設置方法はこちらの記事に書いてあります。
くうか背景画像の調整に手間取ったけど、トップページ内の好きな所へアクセスできる仕組みは面白いかなーと。
お知らせバーの設置方法
トップページの１番上にお知らせバーを設置しました。
- お知らせバーの表示位置：ヘッダー上部に表示
- お知らせバーの文字の大きさ：普通
- 表示タイプ：テキスト位置固定（ボタンを設置）
- お知らせ内容・URLを入力
- ボタンテキスト：CLICK!
- お知らせバーの背景効果：なし
このトップページカスタマイズ記事へ、一発で遷移できるリンクを入れたくて設置しました。
くうかモバイルでも表示されます！
目立つので、１番見てほしいことを入れるといいですね。
ピックアップバナーの設置方法（現在はなし）
現在のトップページにはピックアップバナーは設置していませんが、設置時の説明だけ記載しておきます。
ヘッダー部分には、記事がランダムでスライドするかっこいい【スライダー】を設置することもできますし、記事やカテゴリをピックアップ表示できる【ピックアップバナー】を設置することもできます。
当ブログのピックアップバナーの画像サイズは【400×150】です。
- バナーレイアウト：固定幅４列（PC）・固定幅２列（SP)
- バナーデザイン：タイトル⇒表示しない、内側に白線をつけない、バナー画像を少し暗くしない
ピックアップバナーにはカテゴリーをあてるのも良いですが、テーマごとにバラバラになっている記事をまとめた”まとめ記事”をリンクさせるのもおすすめです。
くうか記事内で各記事へ内部リンクしているので、色んな記事を見てもらえると嬉しいなという期待もこめて…♪
ピックアップバナーの画像は、投稿ページなどで設定されているアイキャッチが適用されますが、【概要】に画像のURLを直接指定することにより、任意の画像にも指定できます。
ピックアップバナー：任意の画像の設定の仕方
くうかピックアップバナーの画像は、雰囲気を揃えるといい感じになりますね！
ピックアップバナーに関する質問
- トップページ以外の記事ページ等にもピックアップバナーを表示させたい場合はどうすればいいの？
-
【外観】→【カスタマイズ】→【トップページ】→【ピックアップバナー】→【その他】で、「トップページ以外の下層ページにも表示する」にチェックを入れます。
くうか記事ページにもピックアップバナーが表示されるようになります！
- タイトルロゴとピックアップバナーの間に余白が入ってしまう
-
【外観】→【カスタマイズ】→【トップページ】→【その他】で、「コンテンツ上の余白量」を標準から狭めやなしに設定します。
くうか当ブログは「なし」です。
＼ 公式サイトを見てみる ／
2. SWELLで固定ページ（ホームページ）をカスタマイズ
ここからはヘッダー下のメインとなる部分です。
固定ページで好きにコンテンツを組み合わせることで、自由なデザインを作れるようになります。
くうかまずは事前準備！
固定ページを３つ作成していきます。
- ホームページ：実際の見た目となるページ（フロントページ）
- 新着記事ページ：タイトルを付けただけの空白ページ
- 人気記事ページ：人気記事を配置したページ
１番の【ホームページ】は、実際の見た目として作っていきますが詳しくは後述します。
２番の【新着記事ページ】は、タイトルとスラッグ（URL）のみを設定した空白のページを、固定ページで新規作成します。
ページの中身は空白ですが、最終的な設定で以下のような新着一覧ページとなります。
- タイトル（自分がわかりやすいもの）→「新着記事」としました。
- URLスラッグ（URLとなるので英語推奨）→「new-post」としました。
- 公開する
３番の【人気記事ページ】は、投稿リストブロックを配置したページを、固定ページで新規作成します。
- タイトル（自分がわかりやすいもの）→「人気の記事」としました。
- URLスラッグ（URLとなるので英語推奨）→「popular」としました。
- 投稿リストブロックを追加する
- 投稿数：６、レイアウト：カード型、抜粋文：お好みで
- Pickupタブの投稿IDに６記事文のIDを記載
- 公開する
妹分のゆずいろおすすめ記事より人気記事と書かれている方が読まれる気もするね！
くうかそうなんだよね。
ではこれで事前準備完了！続いてついに実際の見た目を作っていきます。
＼ 実際の見た目となる【ホームページ】全体像はこんな感じです！ ／
それでは、ようやく１番の【ホームページ】を作っていきます。
まず固定ページを新規作成します。
- タイトル（自分がわかりやすいもの）→「Home」としました。
- URLスラッグ（URLとなるので英語推奨）→「home」としました。
そして、トップページに入れたい以下の内容を作り込んでいきます。
くうかそれぞれのエリアごとに説明していきますね。
①新着記事エリアの作り方
サイトによって新着記事の位置は様々ですが、私は１番はじめに持ってきています。
それは、リピーターの方のために新着記事がぱっと見でわかると、すぐにアクセスできるため。
見た目はこのようになっています。
最新の１・２番めの記事のみカード型のアイキャッチ付きで目立たせ、３番目以降の記事はテキスト表示にしています。
くうか最新の記事をわかりやすくしたかったんだ。
妹分のゆずいろ確かに目立つね！
以下、作成の手順です。
ブロックパターンから、見出しがあらかじめ付属している【フルワイドセクション】を選択します。
見出しに注釈がはじめから入っているのが便利なので、フルワイドセクションを使っています。
- コンテンツ横幅：記事
- 上下のpadding量：PC40・SP20
- 背景色：白
- 上下の境界線の形状：斜線、高さ：0
【見出し】はブロックパターンで付属していたものをそのまま使用しています。
見た目はセクション用。
テキスト（または画像）・注釈はお好みで設定してください。
【投稿リスト】ブロックで２記事のみ表示
【投稿リスト】ブロックを追加。
- 投稿数：2
- レイアウト：カード型
- 表示順序：新着
- 抜粋文：40
【投稿リスト】ブロックで３記事め以降をテキスト型で表示
【投稿リスト】ブロックを追加。
- 投稿数：5（CSSで2記事非表示にするため5に）
- レイアウト：テキスト型
- 表示順序：新着
- 抜粋文：０
- MOREリンク：new-post（先ほど作成した空白の新着記事ページのURLスラッグを入力）
１．Settingタブ内の【高度な設定】に追加CSS名「li-2nd-none」を入力する。
２．ページ下部にある「カスタムCSS」に以下のコードを追加
＼コピペ用CSSコード／
.li-2nd-none > ul >li:first-child {
display: none;
}
.li-2nd-none > ul >li:nth-child(2) {
display: none;
}- コードを追加する場合は自己責任の上おこなってください。
- 表示される記事数が２つ減るので、記事数をお好みで調整してください。
カスタマイザーの追加CSSではなく、固定ページ下部のカスタムCSSに記載するようにしました。（2022年3月）
このページのみでCSSを使う場合は、この方が速度的にも良いと判断。
Special thanks → しらこさん
くうかカッコ内の数値がn番目を表しています。
応用する時はそこに注目…！
CSSを使う方法を教えてくれたしおさださん、Thanks！（@bloger_siosada）
くうか新着記事の最新だけアイキャッチ付きで目立たせたかった！
お風呂で思いついたレイアウトなんだけど、いい感じで気に入ってます♪
他にもこのような表示方法もできます。（以前のトップページのバージョンより）
1記事めカード型
2記事め以降テキスト型
1記事めカード型
2記事め以降テキスト型＋人気記事リスト型
くうか新着記事は１記事めを目立たせると目を引きますね！
以前のバージョンのレイアウトは、こちらの記事で解説しています。
②ピックアップエリアの作り方
特に紹介したい記事を、「メディアとテキスト」ブロックを使って表示させています。
【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】にインライン画像を設定。
- コンテンツ横幅：サイト幅
- 上下のpadding量：PC40・SP20
- 背景色：白
- 上部の境界線：斜線、高さレベル：0
- 下部の境界線：斜線、高さレベル：0
そして【メディアとテキスト】ブロックを追加。
メディアとテキストブロックは、画像と文字の組み合わせで通常のブロックにはないレイアウトが楽しめます。
今回は「ブロークングリッド」という、SWELL独自のレイアウトを使ってみました。
- スタイル：ブロークングリッド
- モバイルでは縦に並べる：ON
- 画像サイズ：フルサイズ
テキスト側には様々なブロックを入れることができますが、今回は
- 【段落】
- 【SWELLボタン】
のブロックを入れて、関連する記事にリンクさせています。
テキスト側の背景色や装飾は、段落などのブロックをすべて選択した状態で【グループ化】するとできます。
余談ですが、背景色を「グレー」に設定すると、CSSを使わずに透過されますよ。
くうか写真を目立たせつつコンテンツを入れられるブロックで、おしゃれで気に入っています♪
とても簡単なブロックですが、こちらの記事で使い方を解説しています。
③人気記事エリアの作り方
ブログの人気記事を紹介しているエリアです。
【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】 にインライン画像を設定。
- コンテンツ横幅：サイト幅
- 上下のpadding量：PC40・SP20
- 背景色：白
- 上部の境界線の形状：斜線、高さレベル：0
- 下部の境界線の形状：斜線、高さレベル：0
そして【投稿リスト】ブロックを追加。
- 投稿数：3
- レイアウト：カード型
- 表示順序：新着
- 抜粋文：0
- MOREリンク：popular（事前準備で作成した人気記事のURLスラッグを入力）
- Pickupタブの投稿IDを直接指定：読んでほしい記事ID
妹分のゆずいろここも見てほしい記事を配置してるんだね！
くうかそう。実はこのアイデアを教えてもらって今回初めてやってみたよ！
④カテゴリーエリアの作り方
【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】 にインライン画像を設定。
- コンテンツ横幅：サイト幅
- 上下のpadding量：PC40・SP20
- 背景色：白
- 上部の境界線の形状：斜線、高さレベル：0
- 下部の境界線の形状：斜線、高さレベル：0
【リッチカラム】ブロックを追加し、好みの列数に設定する。
- カテゴリーのイメージ画像を追加する（スタイルを角丸にしている）
- 【アコーディオン】ブロックを追加する（下の画像を参照）
- 【リスト】ブロックでサブカテゴリーへリンク
- 【段落】でよく使われるキーワード（タグ等）を入れリンク
- 【投稿リスト】ブロックを追加し、該当カテゴリーに絞る（ランダム表示）
- 【SWELLボタン】ブロックを追加し、該当カテゴリーページへリンクする
また【タブ】ブロックを使って、省スペースでカテゴリー別の記事を表示する方法もあります。
タブブロック内に、カテゴリーごとの投稿リストを入れるとこのような表示が可能です。
⑤ギャラリーエリアの作り方
写真を多く使っているブログなので、写真をメインにしたエリアがあってもいいかなと思い作りました。
【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】にインライン画像を設定。
- コンテンツ横幅：サイト幅
- 上下のpadding量：PC40・SP20
- 背景色：白
- 上部の境界線：斜線、高さレベル：0
- 下部の境界線：斜線、高さレベル：0
- 【リッチカラム】を追加し、好みの列数にする
- 当ブログはPC６列・タブ３列・SP２列
- カラム間の余白は上下左右0.3rem
- 各列に【バナーリンク】を追加し、画像とリンク先を設定する
くうかイメージはインスタグラムなので、バナーリンクの画像サイズを正方形に近づけるとそれっぽくなります♪
⑥サイト紹介エリアの作り方
【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】にインライン画像を設定。
- コンテンツ横幅：記事
- 上下のpadding量：PC40・SP20
- オーバーレイの透明度：73
- 画像：任意の写真を設定、背景効果：Fixed BackgroundをON
【見出し】設定後、【リッチカラム】ブロックで２列のカラムを作成し、それぞれ以下の通りに設置。
左カラム
- 【バナーリンク】でプロフィール画像
- 【リスト】で軽く自己紹介
- 【SWELLボタン】で詳しいプロフィールページへリンク
右カラム
SWELLの紹介パーツエリアとし、バナー・テキスト・SWELLボタンを配置。
くうかこの背景画像があるエリアは上下の境界線の設定項目はありません！
⑦検索エリアの作り方
キーワードで検索できるエリアとなっています。
【フルワイド】ブロック（フルワイドセクション）を追加し、【見出し】にインライン画像を設定。
- コンテンツ横幅：記事
- 上下のpadding量：PC40・SP20
- 背景色：白
- 上部の境界線：斜線、高さレベル：0
- 下部の境界線：斜線、高さレベル：0
- 【検索】ブロック：箱の中に任意のテキストを入力することができる
- 【タグクラウド】ブロック：タグ一覧の表示設定ができる
フルワイドのトップページにすると、サイドバーがなくなってしまうので、それを補うために表示させています。
タクソノミーに【タグ】が選択されていればOK。
＼ウィジェット系ブロックの注意事項を了さんからご教授いただいた！／
ウィジェット系のブロックはWordPress自体のアップデート時（既存のウィジェット機能自体がブロックベースに変わる時）に大幅に仕様変更される危険性があるので、一応そのことは頭の片隅に置いておいた方がいいかと思います🙆♂️
— 了🌊SWELL・Arkhe 開発者 (@ddryo_loos) March 24, 2021
くうかワードプレスのアップデート時は、ちゃんと変わらず使えているかチェックした方が良いようです！
ホームページ部分が完成したら、作成した固定ページの割り当て
完成したら、最後にこの設定を行います。
- ホームページ：①ヘッダー下のメインとなる固定ページ
- 投稿ページ：②新着記事の固定ページ
くうかこの２か所を割り当てることで自由なレイアウトのトップページが出来上がり！
妹分のゆずいろ私にもできた！
参考にさせていただきました！
なお、フルワイドブロックを使う場合は、サイドバーを非表示にした方がダイナミックなトップページになります。
3. SWELLでフッターをカスタマイズ
フッターまで見てくれる人は果たしているのか？わかりませんので、見られなくてもいい・でも自分にはないと困るようなコンテンツを置いています。笑
【ブログパーツ】にて、他サイトへのバナーリンク・自己紹介文・SWELLボタン等を配置し、作成しておく。
【外観】→【ウィジェット】→【フッター（PC）１】に、 テキスト追加→上記で作ったブログパーツIDを記述する。
くうかさりげなく自分の別のブログを宣伝してます！
【ブログパーツ】にて、ブログ村などのリンクへ飛ぶ【SWELLボタン】を作成する。
【外観】→【ウィジェット】→【フッター（PC）２】に、テキスト追加→上記で作ったブログパーツIDを記述する。
【外観】→【ウィジェット】→【フッター（PC）３】に、カスタムHTMLを追加し、ブログ村のパーツhtmlを記述する。
くうかフッターは個々で必要なパーツは違うと思うので、お好きに作ってくださいね♪
おしゃれなサイト型トップページの作り方まとめ
SWELLで作るサイト型トップページのカスタマイズで行ったこと。
ブロックの組み合わせと設定だけで、ここまでできるテーマSWELL。
ワードプレスを始めてすぐの私でもできて、このテーマを選んでよかった！と思いました。
検索からの流入がほとんどだとトップページはあまり見られない可能性も高いですが、トップページはブログの顔！と私は考えています。
ユーザーの気持ちになって、見やすさはこれからも追及し続けていきたい。（あと自己満足。笑）
くうかありがたき幸せ…
さらにSWELLと仲良くなって、使いこなせるようになりたい！
色んなサイトのデザインを見たい！という方に、さとしんさんのSWELLサイト集がおすすめ。
カスタマイズの参考に、しらこさんとsuyaさんのSWELLお役立ち記事をブクマしておくと良いですよ。
最後に：この記事を紹介してくれたサイト
この記事を紹介してくれたサイトを、ありがとうリンク集にて掲載させていただいています。
くうかありがとうございます！
紹介してくださった方は教えてくださると嬉しいです。
この記事が気に入ったら
フォローしてね！
コメント
コメント一覧 （14件）
とても丁寧に説明されており、とても参考になりました。
ありがとうございます！
久野さん
コメントありがとうございます！！
そういって頂けてとても嬉しいです。
サイトもこのカスタマイズを使っていただいて嬉しくなっちゃいました(^^♪
くうか様
お世話になっております。
英語やポイ活などについて情報発信しておりますぴろやんと申します。
いつも有益な情報発信ありがとうございます。
くうか様のサイトがとってもわかりやすかったので、貴サイトを参考にSWELLでサイト構築いたしました。
当方のブログでもくうか様のサイトを参考にさせていただいた旨は、記載させていただいております。
https://piroyan101.com/swell/
引き続き、よろしくお願いいたします。
piroyan101さん
コメントありがとうございます＾＾
わかりやすいと言っていただけてとっても嬉しいです。
サイトの紹介もしていただいて、ありがとうございました！！
お久しぶりです、くうかさん
先日はSWELLのセール情報ありがとうございました
おかげさまで無事にSWELL購入できました。
くうかさんのブログから購入したいと言っておきながら
購入せず申し訳ありませんでした。
被リンクしていただいてありがとうございました。
気づくのが遅れて申し訳ありません。
僕のブログでもリンクさせて頂き、リンク先でくうかさんのブログを
紹介させて頂きました。
これからもお邪魔させて頂きます。
今回は誠にありがとうございました。
ノブさん
いえいえ。お安く買えた方が絶対良いですし！
気にしないでくださいね。
拝見させていただきました。
ご紹介ありがとうございました！＾＾
くうかさん！
こんばんは！Twitterでお世話になっているためです。
勝手で恐縮ですが、カスタマイズを参考にいたしました。なので、ブログに記載し、リンクを貼らせていただきました。
https://tamesanlog.com/swell-customization/
（SWELLサイト型カスタマイズ⑥：カテゴリーコンテンツでリンクを貼っています）
ためさん
参考にしてくださってありがとうございます！
ためさんのカスタマイズはとっても丁寧な説明で色々と参考になりますね＾＾
紹介してくださりありがとうございました。
始めまして！
ヨシマと言います。
くうかさんのカスタマイズが気に入り、購入させていただきました。
アフィンガー5からの移行で上手くできるか不安ですが、記事を参考に一つ一つやっていきます。
ヨシマさん
SWELLを気に入っていただけて嬉しいです！
カスタマイズを見てくださってさらに嬉しいです。
移行は手間ではありますが、使いやすいテーマなので頑張ってください…！
初めまして！
やちゃ坊と申します。
初めてのコメントでドキドキしています
SWELLのサイト型トップページに憧れ、
くうかさんのこの記事ならカスタマイズできる！
と参考にさせてもらいました！
みんなからも褒められ、すごく嬉しいです！感謝しています✌︎(‘ω’✌︎ )
微力ながら記事にて紹介もさせてもらいました！今後ともよろしくお願いします！
https://www.ena-laughday.com/cocoonswell/
やちゃ坊さん
はじめまして！コメントありがとうございます＾＾
素敵にカスタマイズされていますね！
記事の紹介もありがとうございます。
私の方からもお礼のリンクを後日させていただきますね～！
初めまして。さくと申します。
CSSを参考にさせていただきました。
とても素晴らしいです☆
ありがとうございます！
記事にリンク貼らせていただきました。
https://wgamelab.net/swell-top/
今後ともよろしくお願いいたします。
さくさん
はじめまして。コメントありがとうございます。
記事を参考にしていただいたようで嬉しいです！
リンクもありがとうございます。
こちらからも時間が出来た時にリンクさせていただきますね＾＾