こんにちは、ゆるミニマリスト主婦のくうかです。
当ブログが利用しているワードプレステーマは「SWELL」です。

ブロックエディタが非常に使いやすく作られていて、ブログを書くことがラクで楽しいテーマなんです!
せっかくワードプレスで良いテーマを使っているのだから、素敵なトップページを作ってみたいですよね。

ワードプレスを始めてまだ1か月だけど、できるかな?
CSSなどプログラミングの知識がなくても、SWELLならブロックの組み合わせ次第でおしゃれなページを作ることができます…!(SWELLを知らない方は、こちらの記事でレビューを書いているので良かったらご覧ください。)
- 色んな記事に飛べるサイト型のトップページにしたい
- CSSはわからないけど、おしゃれなトップページにしたい
- SWELLの機能を知りたい
SWELLの高機能なブロックを駆使して、初心者でも作れたトップページ。
- ヘッダー
- ホーム(新着・あいさつ・おすすめ・カテゴリ別記事)
- サイドバー
について詳しく説明していきます…!
SWELLカスタマイズ!憧れのサイト型トップページにしたい
ブログを運営していて、ずっとサイト型というトップページに憧れを抱いていました。
ブログはデフォルトだと記事が新しい順に並んでいます。
それをゲーム攻略サイトのような、ユーザーが知りたい情報を的確に見つけて、読みにいけるようなイメージがサイト型。(※私のイメージです)
当ブログも記事数が増えてきて古い記事がどんどん埋もれていってるので、おすすめしたい記事やカテゴリー別の記事を表示できたら良いのでは…と構想は膨らむ。
SWELLを入れた当初は、そういうことが叶うとは気づいていませんでした。

でも叶うってことに気付いて、一気にやる気アップ♪しかもおしゃれになります!!
1. ヘッダーのカスタマイズ
SWELLではヘッダーだけでも色んなパターンに作ることが可能です。
グローバルナビゲーションの位置や、お知らせバーの色・配置などを変えると、同じテーマでもガラッと雰囲気を変えることができます。
ヘッダーロゴ画像のサイズ
ヘッダーは画像にすると、個性が出て一気にイメチェンに♪
いつもお世話になっているツールCanvaで作成。画像サイズは【1600×360】。

- 画像サイズ(PC):55px
- 画像サイズ(PC追従ヘッダー):48px
- 画像サイズ(SP):70px
- ヘッダーレイアウト(PC):ヘッダーナビロゴ横右寄せ
- ヘッダーレイアウト(SP):ロゴ中央メニュー左
- ヘッダー境界線:影
Canvaは無料で使える便利なツール。アイキャッチもCanvaで作成しています!
ヘッダー下はピックアップバナーにしました
ヘッダー部分には、記事がランダムでスライドするかっこいい【スライダー】を設置することもできますし、記事やカテゴリをピックアップ表示できる【ピックアップバナー】を設置することもできます。
当ブログでは、見せたい部分をギュギュっと凝縮できる【ピックアップバナー】を表示させることにしました。

- バナーレイアウト:固定幅4列(PC)・固定幅2列(SP)
- バナーデザイン:タイトル⇒表示しない、内側に白線をつけない、バナー画像を少し暗くしない
ピックアップバナーにはカテゴリーをあてるのも良いですが、テーマごとにバラバラになっている記事をまとめた”まとめ記事”をリンクさせるのがおすすめです。
記事内で各記事へ内部リンクしているので、色んな記事を見てもらえると嬉しいなという期待もこめて…(^^♪
当ブログでは、ピックアップバナーに以下の4つを表示させています。
4の無印良品はカテゴリではないですが需要がありそうなので、無印良品のタグを付けた記事の一覧ページにしました。
ピックアップバナー:任意の画像の設定の仕方


ピックアップバナーの画像は、雰囲気を揃えるといい感じになりますね!
なおトップページ以外の記事ページ等にもピックアップバナーを表示させたい場合は、
2. メインとなるホームページは固定ページで作成
ここからはヘッダー下のメインとなる部分です。

固定ページで作ることによって、自分の好きなデザインが自由に楽しめるようになります♪
固定ページで、
- ホームページ:実際の見た目となるページ(フロントページ)
- 新着記事ページ:タイトルを付けただけの空白ページ
を、作成します。
【ホームページ】は、実際の見た目として作っていきますが詳しくは後述します。
【新着記事ページ】は、タイトルとスラッグ(URL)のみを設定した空白のページを作ります。
(空白ですがこのあとの設定で新着一覧ページとなる)

この2か所を割り当てることで自分好みのレイアウトのトップページを作っていくことができます。
参考にさせていただきました!

参考サイト様は、SWELLのフルワイドブロックを使った素敵なページですね!思わず目を奪われてしまいました~。
フルワイドブロックを使いたい方はとっても参考になります!
全体像はこんな感じです!

- 新着記事
- あいさつ文
- おすすめ記事
- カテゴリー別ランダム記事
以下、それぞれの構成ごとに説明していきます。
①新着記事エリア
新着記事はこのような見た目です。

【デザイン】→【カラム】から、カラム(30/70)を追加する。
左カラム【投稿リスト】ブロック
- 投稿数:1
- レイアウト:カード型
- 表示順序:新着
- 抜粋文:40
このカード型1記事のみ、抜粋文を入れています。(見た目も良いので)
右カラム【投稿リスト】ブロック
- 投稿数:3
- レイアウト:テキスト型
- 表示順序:新着
- 抜粋文:0
- MOREリンク:new-post(空白の新着記事ページのURLスラッグを入れる)
- 除外する投稿ID:最新記事の投稿ID
Pickupタブの除外ID設定

※2020/10/14 追記
アナログ作業は面倒だよね…という方には、CSSコードで自動化する方法を記載しておきます。

「li-first-none」と入力する。

.li-first-none > ul >li:first-child {
display: none;
}
これで自動的に1番最新の記事が表示されなくなります。
その分表示される記事数が1つ減るので、記事数を調整してください。
Special Thanks!!しおさださん(@bloger_siosada)
自動化について教えていただきました。ありがとうございました!

新着記事の最新だけアイキャッチ付きで目立たせたかった!
お風呂で思いついたレイアウトなんだけど、いい感じで気に入ってます♪
応用すると、他にこのような表示方法もできます。(私の別サイトより)
PC:1記事めリスト型、
以下カード型

スマホ:1記事めカード型1列、
以下カード型2列


PCのみ表示/SPのみ表示、のデバイスコントロールを利用しました。
新着記事は1記事めを目立たせると目を引きますね!
②あいさつ文
あいさつ文を入れました。(2020/01/11追記)

ブログパーツにて、
【カラム】ブロックで2列のカラム(30/70)を作成し、プロフィール画像とあいさつ文で構成します。

ブログパーツにしたので、サイトマップのページにも再利用しています。
③おすすめ記事エリア
おすすめ記事を数記事表示させています。
ビフォー

【投稿リスト】ブロックを使い、読んでほしい記事をID指定しています。
表示は【リスト型(左右交互)】にしています。

左右交互ってどんなだろう?とやってみたら、カッコ良かったので採用!
おしゃれ~!
現在は「メディアと文章」ブロックを使ったレイアウトに変更中です。
アフター


おしゃれに目立たせたい部分に活躍するブロックですね!
とっても簡単なブロックですが、こちらの記事で使い方を解説しています。
④カテゴリ別記事エリア
カテゴリ別に4記事ずつカード型表示をしています。
子カテゴリーが充実しているカテゴリーは、子カテゴリーもリスト表示させて記事を探しやすく

【デザイン】→【カラム】から、カラム(70/30)を追加する。
左カラム
【段落】を挿入し、タイトルを付け装飾する+説明を入れて注釈表示に。
【投稿リスト】を挿入する。
- 投稿数:4
- レイアウト:カード型
- 表示順序:ランダム
- 抜粋文:0
- カラム数:2列
- Pickupタブ:該当カテゴリー
右カラム
【段落】を挿入しタイトルを付け、装飾する。
【リスト】ブロックで子カテゴリー名のリストを作り、各カテゴリーページへリンクする。
【SWELLボタン】を挿入し、該当カテゴリーページをリンクする。
子カテゴリーを表示しないカテゴリー

- 【カラム】ブロック→50/50
- 左右それぞれのカラムに【段落】を挿入し、タイトルを付け装飾する+説明を入れて注釈表示に
- 左右それぞれのカラムに【投稿リスト】ブロックを入れる
- 投稿数:4
- レイアウト:リスト型
- 表示順序:ランダム
- 抜粋文:0
- Pickupタブ:該当カテゴリー

念願の、カテゴリ別記事エリアが設置できた!
ブロックの組み合わせと設定だけでできて超簡単!
ブロック下の余白調整も、それぞれのエリアや画像ごとに行いました。

余白調整は大事!
見た目がきれいになるよ♪

タブブロック内に投稿リストを入れるとこのような表示が可能です。
3. サイドバーにおすすめの記事を掲載

サイドバーがある強みを生かして、サイドバーにも読んで欲しい記事を配置しています。
- 【バナーリンク】と【リスト】で構成されたブログパーツを新規作成
- そのブログパーツを外観⇒ウィジェット⇒共通サイドバーに、【テキスト】を挿入しブログパーツIDで呼び出す
もっとブログパーツを知りたい方は⇒ブログパーツの利用例を読んでみてくださいね。
この記事を参考にしてくれたサイト様
この記事を参考にしたと紹介してくださっているサイト様です。

とっても嬉しいです。ありがとうございます!
まとめ:SWELLでトップページをおしゃれにカスタマイズ
SWELLで作るトップページのカスタマイズで行ったこと。
- ヘッダーのカスタマイズ
- ホームページのカスタマイズ
- サイドバーのカスタマイズ
ブロックの組み合わせと設定だけで、ここまでできるテーマSWELL。
ワードプレス初心者の私でもできて、このテーマを選んでよかった!と思いました。
検索からの流入がほとんどだとトップページはあまり見られない可能性も高いですが、トップページはブログの顔!と私は考えているので、ユーザーの気持ちになって、見やすさはこれからも追及し続けていきたい。(あと自己満足。笑)

ありがたき幸せ…
さらにSWELLと仲良くなって、使いこなせるようになりたい!
コメント
コメント一覧 (6件)
とても丁寧に説明されており、とても参考になりました。
ありがとうございます!
久野さん
コメントありがとうございます!!
そういって頂けてとても嬉しいです。
サイトもこのカスタマイズを使っていただいて嬉しくなっちゃいました(^^♪
くうか様
お世話になっております。
英語やポイ活などについて情報発信しておりますぴろやんと申します。
いつも有益な情報発信ありがとうございます。
くうか様のサイトがとってもわかりやすかったので、貴サイトを参考にSWELLでサイト構築いたしました。
当方のブログでもくうか様のサイトを参考にさせていただいた旨は、記載させていただいております。
https://piroyan101.com/swell/
引き続き、よろしくお願いいたします。
piroyan101さん
コメントありがとうございます^^
わかりやすいと言っていただけてとっても嬉しいです。
サイトの紹介もしていただいて、ありがとうございました!!
お久しぶりです、くうかさん
先日はSWELLのセール情報ありがとうございました
おかげさまで無事にSWELL購入できました。
くうかさんのブログから購入したいと言っておきながら
購入せず申し訳ありませんでした。
被リンクしていただいてありがとうございました。
気づくのが遅れて申し訳ありません。
僕のブログでもリンクさせて頂き、リンク先でくうかさんのブログを
紹介させて頂きました。
これからもお邪魔させて頂きます。
今回は誠にありがとうございました。
ノブさん
いえいえ。お安く買えた方が絶対良いですし!
気にしないでくださいね。
拝見させていただきました。
ご紹介ありがとうございました!^^