【SWELLカスタマイズ】おしゃれなサイト型トップページにする方法

こんにちは、主婦ブロガーくうかです。

当ブログのテーマは『SWELL』です。
使ってみて、どんどんSWELLの魅力に引き込まれています。

「こんなトップページにしたいな…」という構想が、CSSコードの追加なしでも実現できて、とにかく感動！なのです。

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

ブログを運営していて、ずっとサイト型というトップページに憧れを抱いていました。
ゲームの攻略サイトのような、見たい情報を的確に見つけて、読みにいけるようなイメージ？

このブログも記事数がだいぶ増えてきて、特にカテゴリー別の記事を表示できたら見やすくていいなぁ…♪などなど妄想は膨らむ。

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

ヘッダーのカスタマイズ

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

ヘッダー画像

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

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

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

アイキャッチもCanvaで作成しています

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

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

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

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

ピックアップバナーには、テーマごとにバラバラになっている記事をまとめた”まとめ記事”をリンクさせました。

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

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

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

メインページは固定ページで作成

ワードプレスの仕様で、トップページに自分でカスタマイズした固定ページを設定することができます。

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

参考サイト様は、フルワイドブロックを使った素敵なページですね！

私も同じく、ホームページ（フロントページ）と新着記事ページを作成しました。

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

私のブログでは、見た目はフルワイドなし・サイドバーありにしてみました。
新着記事・おすすめ記事・人気カテゴリ別記事の３部構成です。

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

新着記事エリア

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

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

やり方は、【カラム】ブロックを使い、２カラムに。（左小さめ・右大きめサイズ）

Pickupタブの除外IDを設定

ただしテキスト型の投稿リストには、毎回除外IDを設定し直さなければいけない、アナログ作業が発生してしまいます。笑

おすすめ記事エリア

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

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

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

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

【カラム】ブロックを使い、２カラムに。
【カード型】でカテゴリ別の新着記事を表示しています。

６カテゴリ分作りました！

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

最後に

以上のような方法でトップページを作ってみました。

コードでカスタマイズは一切していません。
ブロックの組み合わせと設定だけで、なかなかいい感じになったと思うのですがどうでしょうか？

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

SWELL、買ってから気づいたテーマのすごさ！

SWELL公式サイト（無料お試し版もありますよ）

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