こんにちは、主婦ブロガーくうかです。
当ブログが利用しているワードプレステーマは『SWELL』です。
使用してみて、どんどんSWELLの魅力に引き込まれています。
「こんなトップページにしたいな…」という構想が、CSSの知識がなくても実現できて、とにかく感動！なのです。
SWELLカスタマイズ！憧れのサイト型トップページにしたい
ブログを運営していて、ずっとサイト型というトップページに憧れを抱いていました。
ゲームの攻略サイトのような、見たい情報を的確に見つけて、読みにいけるようなイメージ。
このブログも記事数がだいぶ増えてきて、特にカテゴリー別の記事を表示できたら見やすくていいなぁ…♪などなど妄想は膨らむ。
SWELLを入れた当初は、そういうことが叶うとは気づいていませんでした。
くうかでも叶うってことに気付いて、ひゃっほーい！と一気にやる気もアップしちゃいましたよ。しかもおしゃれになる！！
ヘッダーのカスタマイズ
ヘッダーだけでも色んなパターンにすることが可能です。
グローバルナビゲーションの位置や、お知らせバーの色・配置などを変えるとガラッと雰囲気を変えることができます。
ヘッダー画像のサイズ
ヘッダーは画像にすると、個性が出て一気にイメチェンに♪
いつもお世話になっているCanvaで作成。画像サイズは【1600×360】。
アイキャッチもCanvaで作成しています
ヘッダー下はピックアップバナーにしました
ヘッダー部分には、記事がランダムでスライドするかっこいい【スライダー】を設置することもできますし、記事やカテゴリをピックアップ表示できる【ピックアップバナー】を設置することもできます。
はじめはスライダーを表示させていましたが、見せたい部分をギュギュっと凝縮できる【ピックアップバナー】を表示させることにしました。
ピックアップバナーには、テーマごとにバラバラになっている記事をまとめた”まとめ記事”をリンクさせるのがおすすめです。
- 部屋のまとめ
- 家事のまとめ
- 家計のまとめ
- 無印良品（タグ）
【外観】＞【メニュー】で投稿ページやカテゴリーなどを追加し、【ピックアップバナー】として登録します。
４の無印良品はカテゴリではないので、無印良品のタグを付けた記事の一覧ページにしました。
ピックアップバナー：任意の画像の設定の仕方
くうかピックアップバナーの画像は、雰囲気を揃えるといい感じになる！
＼おすすめテーマ「SWELL」／
メインページは固定ページで作成
ワードプレスの仕様で、トップページに自分でカスタマイズした固定ページを設定することができます。
参考にさせていただきました！
私も同じく、ホームページ（フロントページ）と新着記事ページを作成しました。
- ホームページ：実際の見た目のページ
- 新着記事ページ：タイトルを付けただけの空白ページ（空白だけどリンクさせると新着一覧ページになる）
【外観】＞【カスタマイズ】＞【WordPress設定】＞【ホームページ設定】で
【ホームページ】【投稿ページ】に作成したページをそれぞれ割り当てます
せっかく見た目の選択肢が多いテーマなので、それぞれ見た目を変えてみましたよ…！
以下、それぞれの構成ごとに説明していきます。
新着記事エリア
新着記事はこのような見た目です。
やり方は、【カラム】ブロックを使い、２カラムに。（左小さめ・右大きめサイズ）
- 左カラムには、【投稿リスト】ブロックの新着記事を、１記事だけカード型で表示
- 右カラムには、【投稿リスト】ブロックの新着記事を、テキスト型で最新記事のみID除外し表示
くうか新着記事の最新だけアイキャッチ付きで目立たせたかった！
お風呂で思いついたレイアウトなんだけど、いい感じで気に入ってる♪
Pickupタブの除外IDを設定
くうか【最後の投稿を非表示】というオプションがあるので、【最初の投稿を非表示】もあったら嬉しいんだけどなぁ…（独り言）
おすすめ記事エリア
おすすめ記事は、４記事を表示させています。
【投稿リスト】ブロックを使い、読んでほしい記事をID指定しています。
表示を【リスト型（左右交互）】にしています。
くうか左右交互ってどんなだろう？とやってみたら、カッコ良かったので採用！
おしゃれ～！
人気カテゴリ別記事エリア
主要カテゴリ６つから、４記事ずつカード型表示をしています。
【カラム】ブロックを使い、２カラムに。
【カード型】でカテゴリ別のランダム記事を表示しています。
６カテゴリ分作りました！
くうか念願の、カテゴリ別記事エリアが設置できた！
ブロックの組み合わせと設定だけで超簡単！
くうか余白調整は大事！
見た目がきれいになるよ♪
最後に
以上のような方法でトップページを作ってみました。
CSSコードでカスタマイズは一切していません。
ブロックの組み合わせと設定だけで、なかなかいい感じになったと思うのですがどうでしょうか？
検索からの流入がほとんどだとトップページはあまり見られない可能性も高いですが、トップページはブログの顔！と私は考えているので、ユーザーの気持ちになって、見やすさはこれからも追及し続けていきたい。（あと自己満足。笑）
SWELL、買ってから気づいたテーマのすごさ！
- 機能がたくさん！毎日触るのが楽しい♪
- バージョンアップが頻繁！
- フォーラムがあり、開発者の了さんが要望を聞き入れてくれたり、不具合もすぐ直してくれる！
- そしてブロックエディタの使い心地が最高！
くうかSWELLのエディターに慣れてしまうと、他のテーマのエディターがちょっと使いづらく感じるかも？汗
そのくらい使い心地が良いのです…！
SWELL公式サイト（無料お試し版もありますよ）
この度SWELL開発者の了さんからお声がけいただき、公式サイトの利用者紹介ページに、当ブログを掲載させて頂けることになりました！
くうかありがたき幸せ…
さらにSWELLと仲良くなって、使いこなせるようになりたい！
コメント