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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

当ブログでは、見せたい部分をギュギュっと凝縮できる【ピックアップバナー】を表示させることにしました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

①新着記事エリア

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

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

応用すると、他にこのような表示方法もできます。（私の別サイトより）

②あいさつ文

あいさつ文を入れました。（2020/01/11追記）

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

③おすすめ記事エリア

おすすめ記事を数記事表示させています。

ビフォー

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

現在は「メディアと文章」ブロックを使ったレイアウトに変更中です。

アフター

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

④カテゴリ別記事エリア

カテゴリ別に４記事ずつカード型表示をしています。

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

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

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

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

また、タブブロックを使って省スペースでカテゴリー別の記事を表示する方法もあります。

タブブロック内に投稿リストを入れるとこのような表示が可能です。

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

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

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

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

この記事を参考にしたと紹介してくださっているサイト様です。

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

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

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

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

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