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

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

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

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

SWELLの高機能なブロックのおかげで、ワードプレス初心者でも作れたサイト型トップページ。

頻繁にトップページをいじっているため、この記事の内容と多少ずれがあるかもしれませんがご了承ください。（後日修正します）

SWELLでカスタマイズするサイト型のトップページとは

まず、トップページをサイト型にカスタマイズした完成形がこちらになります。（画面を開いた時の状態）

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

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

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

記事数が増えると古い記事がどんどん埋もれていってしまいます。

そこで、おすすめしたい記事やカテゴリー別に記事を表示できたら良いのでは…と構想は膨らむ。

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

1. SWELLでヘッダーをカスタマイズする方法

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

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

SWELL公式サイトのような、「メインビジュアル」を入れるのも素敵ですよね。

ヘッダーロゴ画像を用意する：サイズ【1600×360】

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

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

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

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

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

関連記事 Canvaでおしゃれなアイキャッチを簡単に作る

お知らせバーの設置方法

トップページの１番上にお知らせバーを設置しました。

お知らせバー設定箇所：
【外観】→【カスタマイズ】→【サイト全体設定】→【お知らせバー】

このトップページカスタマイズ記事へ一発で遷移できるリンクを入れたくて、「お知らせバー」の存在を思い出しました。

ピックアップバナーの設置方法

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

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

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

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

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

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

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

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

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

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

画像URLは、ワードプレスの左メニュー内の【メディア】→【ライブラリ】で該当の画像のURLがわかります。

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

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

2. SWELLで固定ページをカスタマイズする方法

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

まずは固定ページで、

を、作成します。

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

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

• タイトル（自分がわかりやすいもの）→「新着記事」としました。
• URLスラッグ（URLとなるので英語推奨）→「new-post」としました。

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

それでは、１番の【ホームページ】を作っていきます。

まず固定ページを新規作成します。

• タイトル（自分がわかりやすいもの）→「Home」としました。
• URLスラッグ（URLとなるので英語推奨）→「home」としました。

そして、トップページに入れたい以下の内容を作り込んでいきます。

①新着／人気記事エリアの作り方

見た目はこのようになっています。

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

以下、作成の手順です。

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

ちょっとひと手間を入れると、PCとスマホで投稿リストのタイプを変えることもできるんです。

詳しくはこちらの記事で解説しています。
他にも今まで作ってきた過去デザインも掲載していますよ。

②あいさつ文の作り方

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

【フルワイド】ブロックを追加。（フルワイドセクション）

【見出し】設定後、【カラム】ブロックで２列のカラム（30/70）を作成し、それぞれにプロフィール画像とあいさつ文を追加。

③項目別ピックアップの作り方

当ブログの、ピックアップしたい３項目ごとに記事をリストアップしました。

【フルワイド】ブロック（フルワイドセクション）を追加後、【見出し】・【メディアとテキスト】ブロックを配置しています。

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

今回は「ブロークングリッド」という、SWELL独自のレイアウトを使ってみました。

テキスト側には様々なブロックを入れることができますが、今回は【リスト】ブロックを入れて、関連する記事にリンクさせています。

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

④カテゴリ別記事エリアの作り方

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

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

子カテゴリーをアコーディオン表示したカテゴリー

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

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

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

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

⑤キーワード検索エリアの作り方

キーワードで検索できるエリアとなっています。

【フルワイド】ブロック（フルワイドセクション）追加。

そして、【タグクラウド】ブロックを追加します。

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

タクソノミーに【タグ】が選択されていればOK。

【カテゴリー】なども選択肢に表示されるので注意。

直接ワード入力で検索できる【検索】ブロックもあるので、お好みで追加してみてください。

⑥SWELL紹介エリアの作り方

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

ここは簡単。

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

⑦外部リンクエリアの作り方

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

ここも同じく簡単。

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

ホームページ部分が完成したら、作成した固定ページの割り当て

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

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

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

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

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

3. SWELLでフッターをカスタマイズする方法

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

SWELLカスタマイズ｜トップページをサイト型でおしゃれにする方法まとめ

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

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

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

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

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

なお、SWELLで好きなデザインだなと思っているのがしょーきちさんのブログ♪
参考になります！

最後に：この記事を紹介してくれたサイト

この記事を紹介してくれたサイトを、ありがとうリンク集にて掲載させていただいています。