MENU
カテゴリー
アーカイブ
くうかの画像
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。

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

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

当ブログが利用しているワードプレステーマは『SWELL』です。
使用してみて、どんどんSWELLの魅力に引き込まれています。

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

Contents

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

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

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

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

くうかのアイコン画像くうか

でも叶うってことに気付いて、ひゃっほーい!と一気にやる気もアップしちゃいましたよ。しかもおしゃれになる!!

ヘッダーのカスタマイズ

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

ヘッダー画像のサイズ

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

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

canvaでヘッダー

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

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

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

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

ブログ全体像

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

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

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

  1. 部屋のまとめ
  2. 家事のまとめ
  3. 家計のまとめ
  4. 無印良品(タグ)

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

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

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

ピックアップバナー設定画面

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

くうかのアイコン画像くうか

ピックアップバナーの画像は、雰囲気を揃えるといい感じになる!

\おすすめテーマ「SWELL」/

テーマSWELL

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

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

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

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

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

  • ホームページ:実際の見た目のページ
  • 新着記事ページ:タイトルを付けただけの空白ページ(空白だけどリンクさせると新着一覧ページになる)

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

ホームページ設定

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

せっかく見た目の選択肢が多いテーマなので、それぞれ見た目を変えてみましたよ…!

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

新着記事エリア

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

新着記事

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

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

  • 左カラムには、【投稿リスト】ブロックの新着記事を、1記事だけカード型で表示
  • 右カラムには、【投稿リスト】ブロックの新着記事を、テキスト型で最新記事のみID除外し表示
くうかのアイコン画像くうか

新着記事の最新だけアイキャッチ付きで目立たせたかった!
お風呂で思いついたレイアウトなんだけど、いい感じで気に入ってる♪

Pickupタブの除外IDを設定

除外ID設定

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

くうかのアイコン画像くうか

【最後の投稿を非表示】というオプションがあるので、【最初の投稿を非表示】もあったら嬉しいんだけどなぁ…(独り言)

おすすめ記事エリア

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

おすすめ記事

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

くうかのアイコン画像くうか

左右交互ってどんなだろう?とやってみたら、カッコ良かったので採用!
おしゃれ~!

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

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

カテゴリ別記事

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

6カテゴリ分作りました!

くうかのアイコン画像くうか

念願の、カテゴリ別記事エリアが設置できた!
ブロックの組み合わせと設定だけで超簡単!

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

くうかのアイコン画像くうか

余白調整は大事!
見た目がきれいになるよ♪

最後に

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

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

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

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

  • 機能がたくさん!毎日触るのが楽しい♪
  • バージョンアップが頻繁!
  • フォーラムがあり、開発者の了さんが要望を聞き入れてくれたり、不具合もすぐ直してくれる!
  • そしてブロックエディタの使い心地が最高!
くうかのアイコン画像くうか

SWELLのエディターに慣れてしまうと、他のテーマのエディターがちょっと使いづらく感じるかも?汗
そのくらい使い心地が良いのです…!

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

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

くうかのアイコン画像くうか

ありがたき幸せ…
さらにSWELLと仲良くなって、使いこなせるようになりたい!

読んだよ!のクリック嬉しいです…♪

にほんブログ村 にほんブログ村へ

この記事が気に入ったら
フォローしてね!

カテゴリー別の人気記事

コメント

コメントする

CAPTCHA


Contents
閉じる