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

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

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

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

CSSなどプログラミングの知識がなくても、SWELLならブロックの組み合わせ次第でおしゃれなデザインのページを作ることができます…！

SWELLを知らない方は、こちらの記事でレビューを書いているので良かったらご覧ください。

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

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

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

トップページをサイト型にカスタマイズした状態がこちらになります。

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

ブログはデフォルトだと記事が新しい順に並んでいます。

それをゲーム攻略サイトのような、情報が整理された状態で表示されていて、ユーザーが知りたい情報を的確に見つけて読みにいけるようなイメージがサイト型。（※私のイメージです）

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

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

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

SWELLではヘッダーだけでも色んなパターンに作ることが可能です。

グローバルナビゲーションの位置や、お知らせバーの色・配置などを変えると、同じテーマでもガラッと雰囲気を変えることができます。

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

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

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

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

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

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

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

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

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

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

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

当ブログのピックアップバナーの画像サイズは【400×150】です。

ピックアップバナーにはカテゴリーをあてるのも良いですが、テーマごとにバラバラになっている記事をまとめた”まとめ記事”をリンクさせるのがおすすめです。

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

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

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

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

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

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

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

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

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

まずは固定ページで、

を、作成します。

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

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

＼ 実際の見た目となる【ホームページ】全体像はこんな感じです！ ／

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

①新着／人気記事エリア

新着／人気記事の見た目はこのようになっています。

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

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

②あいさつ文

背景をわが家のリビングとしたあいさつ文を入れています。

【フルワイド】ブロックを追加。

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

当ブログで使っているブログパーツの例

③おすすめ記事エリア

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

【フルワイド】ブロックを追加後、【メディアと文章】ブロックを配置しています。

メディアと文章ブロックは、画像と文字の組み合わせで通常のブロックにはないレイアウトが楽しめます。

とっても簡単なブロックですが、こちらの記事で使い方を解説しています。
メディアと文章ブロックでおすすめ記事を目立たせる

④カテゴリ別記事エリア

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

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

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

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

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

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

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

⑤SWELL紹介エリア

当ブログが使用しているワードプレステーマ「SWELL」の紹介エリアとなっています。

ここは簡単。

【フルワイド】ブロック追加後、【カラム】（70/30）ブロックにあらかじめ作ってあったブログパーツを２つ（SWELL紹介・SWELL関連記事）配置しただけです！

⑥外部リンクエリア

私のサブブログを紹介しているエリアとなっています。

ここも同じく簡単。

【フルワイド】ブロック追加後、【カラム】（50/50）ブロックにバナーリンクと説明文の段落を入れました。

そしてカラムブロック自体を【グループ化】し、ブラウザ風の装飾にしています。

⑦キーワード検索エリア

最後はキーワード検索エリアとなっています。

【フルワイド】ブロック追加後、【タグクラウド】ブロックを追加します。

フルワイドのトップページにすると、サイドバーがなくなってしまうので、それを補うために表示させています。

ホームページ部分が完成したらホーム／投稿ページの割り当て

完成したら、最後にこの設定を行います。

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

この２か所を割り当てることで自由なレイアウトのトップページが出来上がり！

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

なお、フルワイドブロックを使う場合は、サイドバーを非表示にした方がダイナミックなトップページになります。

サイドバーを非表示にするには、【外観】→【カスタマイズ】→【サイドバー】にてトップページを非表示設定にしてください。
もしくは固定ページの【ホームページ】自体のSWELL設定でサイドバーを非表示にすることができます。

3. フッターのカスタマイズ

フッターまで見てくれる人は果たしているのか？わかりませんので、見られなくてもいい・でも自分にはないと困るようなコンテンツを置いています。笑

まとめ：SWELLでトップページをサイト型にカスタマイズ

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

ブロックの組み合わせと設定だけで、ここまでできるテーマSWELL。

ワードプレス初心者の私でもできて、このテーマを選んでよかった！と思いました。

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

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

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

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

現在はリンク募集停止しています。（2021.02.20）