SWELLカスタマイズ！トップページをサイト型でおしゃれに。

こんにちは、ゆるミニマリスト主婦のくうかです。

当ブログが利用しているワードプレステーマは「SWELL」です。

せっかくワードプレスで良いテーマを使っているのだから、素敵なトップページを作ってみたいですよね。

CSSなどプログラミングの知識がなくても、SWELLならブロックの組み合わせ次第でおしゃれなページを作ることができます…！（SWELLを知らない方は、こちらの記事でレビューを書いているので良かったらご覧ください。）

SWELLの高機能なブロックを駆使して、初心者でも作れたトップページ。

1. ヘッダー
2. ホーム（新着・おすすめ・カテゴリ別記事）
3. サイドバー

について詳しく説明していきます…！

SWELLカスタマイズ！憧れのサイト型トップページにしたい

ブログを運営していて、ずっとサイト型というトップページに憧れを抱いていました。

ブログはデフォルトだと記事が新しい順に並んでいます。
それをゲーム攻略サイトのような、ユーザーが知りたい情報を的確に見つけて、読みにいけるようなイメージがサイト型。

当ブログも記事数がだいぶ増え、古い記事がどんどん埋もれていってるので、おすすめしたい記事やカテゴリー別の記事を表示できたら良いのでは…などなど構想は膨らむ。

SWELLを入れた当初は、そういうことが叶うとは気づいていませんでした。

1. ヘッダーのカスタマイズ

SWELLではヘッダーだけでも色んなパターンに作ることが可能です。
グローバルナビゲーションの位置や、お知らせバーの色・配置などを変えると、同じテーマでもガラッと雰囲気を変えることができます。

ヘッダーロゴ画像のサイズ

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

いつもお世話になっているCanvaで作成。画像サイズは【1600×360】。

SWELL公式サイトがこのサイズだったので真似っこさせていただきました。

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

Canvaは無料で使える便利なツール。アイキャッチもCanvaで作成しています！

ヘッダー下はピックアップバナーにしました

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

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

はじめはスライダーを表示させていましたが、見せたい部分をギュギュっと凝縮できる【ピックアップバナー】を表示させることにしました。

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

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

ピックアップバナーにはカテゴリーをあてるのも良いですが、テーマごとにバラバラになっている記事をまとめた”まとめ記事”をリンクさせるのがおすすめです。
記事内で各記事へ内部リンクしているので、色んな記事を見てもらえると嬉しいなという期待もこめて…(^^♪

当ブログでは、ピックアップバナーに以下の４つを表示させています。

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

４の無印良品はカテゴリではないですが需要がありそうなので、無印良品のタグを付けた記事の一覧ページにしました。

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

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

なおトップページ以外の記事ページ等にもピックアップバナーを表示させたい場合は、

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

2. メインとなるホームページは固定ページで作成

ここからはヘッダー下のメインとなる部分です。

【ホームページ】は、実際の見た目として作っていきますが詳しくは後述します。

【新着記事ページ】は、タイトルとスラッグ（URL）のみを設定した空白のページを作ります。
（空白ですがこのあとの設定で新着一覧ページとなる）

【外観】⇒【カスタマイズ】⇒【WordPress設定】⇒【ホームページ設定】で、
【ホームページ】【投稿ページ】部分に作成したページをそれぞれ割り当てます

この２か所を割り当てることで自分好みのレイアウトのトップページを作っていくことができます。

参考にさせていただきました！

当ブログでは、見た目はフルワイドなし・サイドバーありにしてみました。
実際の見た目となるホームページは、【新着記事】・【おすすめ記事】・【人気カテゴリ別記事】の３部構成です。

全体像はこんな感じです！

以下、それぞれの構成ごとに説明していきます。

①新着記事エリア

新着記事はこのような見た目です。

１番最新の記事のみアイキャッチ付き、２番目以降の記事はテキスト表示にしています。

②おすすめ記事エリア

おすすめ記事は、４記事を表示させています。

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

③人気カテゴリ別記事エリア

主要カテゴリ６つから、４記事ずつカード型表示をしています。

子カテゴリーが充実しているカテゴリーは、子カテゴリーもリスト表示させて記事を探しやすく

子カテゴリーを表示しないカテゴリー

表示順序：ランダムは、ページを開くたびにいつも違う記事が表示されて偏らないので神機能です…！

ブロック下の余白調整も、それぞれのエリアや画像ごとに行いました。

3. サイドバーにおすすめの記事を掲載

サイドバーがある強みを生かして、サイドバーにも読んで欲しい記事を配置しています。

もっとブログパーツを知りたい方は⇒ブログパーツの利用例を読んでみてくださいね。

この記事を参考にしてくれたサイト様

おかげさまでこの記事がけっこう読まれており、参考にしてくれたとの嬉しいご報告を頂いています。

桜のピンク色がきれいでデザインが整ったsakuさんのブログ。暮らしに役立つ記事もたくさん！

可愛いアイコンと作り込まれたトップページが美しいシーアさんのブログ。投資や節約の記事など必見！

ほんわかした色合いとデザインが可愛らしいつぐみさんのブログ。投資や家計管理のライフハックも気になる！

まとめ：SWELLでトップページをおしゃれにカスタマイズ

SWELLで作るトップページのカスタマイズで行ったこと。

ブロックの組み合わせと設定だけで、ここまでできるテーマSWELL。
ワードプレス初心者の私でもできて、このテーマを選んでよかった！と思いました。

検索からの流入がほとんどだとトップページはあまり見られない可能性も高いですが、トップページはブログの顔！と私は考えているので、ユーザーの気持ちになって、見やすさはこれからも追及し続けていきたい。（あと自己満足。笑）

この度SWELL開発者の了さんからお声がけいただき、公式サイトの利用者紹介ページに、当ブログを掲載させて頂けることになりました！