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

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

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

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

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

ブロックエディタが非常に使いやすく作られていて、ブログを書くことがラクで楽しいテーマなんです!

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

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

ワードプレスを始めてまだ1か月だけど、できるかな?

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

この記事の内容
  • 色んな記事に飛べるサイト型のトップページにしたい
  • CSSはわからないけど、おしゃれなトップページにしたい
  • SWELLの機能を知りたい

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

  1. ヘッダー
  2. ホーム(新着・おすすめ・カテゴリ別記事)
  3. サイドバー

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

Contents

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

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

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

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

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

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

でも叶うってことに気付いて、一気にやる気アップ♪しかもおしゃれになります!!

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

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

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

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

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

くうかんしんぷるライフタイトル画像
タイトル画像

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

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

設定項目
  • 画像サイズ(PC):55px
  • 画像サイズ(PC追従ヘッダー):48px
  • 画像サイズ(SP):70px
  • ヘッダーレイアウト(PC):ヘッダーナビロゴ横右寄せ
  • ヘッダーレイアウト(SP):ロゴ中央メニュー左
  • ヘッダー境界線:なし

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

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

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

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

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

ピックアップバナー
赤で囲った部分がピックアップバナー

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

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

設定項目
  • バナーレイアウト:固定幅4列(PC)・固定幅2列(SP)
  • バナーデザイン:タイトル⇒下にワイド表示、内側に白線をつける、バナー画像を少し暗く

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

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

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

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

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

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

ピックアップバナー設定画面
くうかのアイコン画像くうか

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

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

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

\おすすめテーマSWELL/

テーマSWELL

シンプルでスタイリッシュなデザインと、高機能が備わった新しいテーマ
無料お試しダウンロードも用意されています

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

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

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

固定ページで作ることによって、自分の好きなデザインが自由に楽しめるようになります♪

固定ページで、

  • ホームページ:実際の見た目となるページ(フロントページ)
  • 新着記事ページ:タイトルを付けただけの空白ページ

を、作成します。

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

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

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

ホームページ設定

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

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

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

参考サイト様は、SWELLのフルワイドブロックを使った素敵なページですね!思わず目を奪われてしまいました~。
フルワイドブロックを使いたい方はとっても参考になります!

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

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

ホームページ全体の割り振り
  1. 新着記事
  2. おすすめ記事
  3. 人気カテゴリー別ランダム記事

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

①新着記事エリア

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

新着記事

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

STEP
【カラム】ブロックを配置する

【デザイン】→【カラム】から、カラム(30/70)を追加する。

STEP
【カラム】に【投稿リスト】ブロックを入れる

左カラム【投稿リスト】ブロック

設定項目
  • 投稿数:1
  • レイアウト:カード型
  • 表示順序:新着
  • 抜粋文:40

このカード型1記事のみ、抜粋文を入れています。(見た目も良いので)

右カラム【投稿リスト】ブロック

設定項目
  • 投稿数:3
  • レイアウト:テキスト型
  • 表示順序:新着
  • 抜粋文:0
  • MOREリンク:new-post(空白の新着記事ページのURLスラッグを入れる)
  • 除外する投稿ID:最新記事の投稿ID

Pickupタブの除外ID設定

除外ID設定

これは新記事を投稿すると毎回除外IDを設定し直さなければいけない、アナログ作業が発生してしまいますのでお好みで。笑

※2020/10/14 追記
アナログ作業は面倒だよね…という方には、CSSコードで自動化する方法を記載しておきます。

STEP
右カラムのテキスト型投稿リストブロックの【高度な設定】に追加CSS名を入力
高度な設定

「li-first-none」と入力する。

STEP
カスタマイザー→追加CSSに以下のコードを追加
追加CSS
.li-first-none > ul >li:first-child {
    display: none;
}

これで自動的に1番最新の記事が表示されなくなります。
その分表示される記事数が1つ減るので、記事数を調整してください。

Special Thanks!!しおさださん(@bloger_siosada

自動化について教えていただきました。ありがとうございました!

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

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

②おすすめ記事エリア

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

おすすめ記事

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

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

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

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

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

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

子カテゴリー付の表示説明
STEP
【カラム】ブロックを配置する

【デザイン】→【カラム】から、カラム(70/30)を追加する。

STEP
【カラム】に【投稿リスト】ブロックを入れる

左カラム

【段落】を挿入し、タイトルを付け装飾する+説明を入れて注釈表示に。

【投稿リスト】を挿入する。

設定項目
  • 投稿数:4
  • レイアウト:カード型
  • 表示順序:ランダム
  • 抜粋文:0
  • カラム数:2列
  • Pickupタブ:該当カテゴリー

右カラム

【段落】を挿入しタイトルを付け、装飾する。

【リスト】ブロックで子カテゴリー名のリストを作り、各カテゴリーページへリンクする。

【SWELLボタン】を挿入し、該当カテゴリーページをリンクする。

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

子カテゴリーなし解説
  1. 【カラム】ブロック→50/50
  2. 左右それぞれのカラムに【段落】を挿入し、タイトルを付け装飾する+説明を入れて注釈表示に
  3. 左右それぞれのカラムに【投稿リスト】ブロックを入れる
    • 投稿数:4
    • レイアウト:リスト型
    • 表示順序:ランダム
    • 抜粋文:0
    • Pickupタブ:該当カテゴリー
くうかのアイコン画像くうか

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

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

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

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

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

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

サイドバー

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

  1. 【バナーリンク】と【リスト】で構成されたブログパーツを新規作成
  2. そのブログパーツを外観⇒ウィジェット⇒共通サイドバーに、【テキスト】を挿入しブログパーツIDで呼び出す

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

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

おかげさまでこの記事がけっこう読まれており、参考にしてくれたとの嬉しいご報告を頂いています。

桜のピンク色がきれいでデザインが整ったsakuさんのブログ。暮らしに役立つ記事もたくさん!

可愛いアイコンと作り込まれたトップページが美しいシーアさんのブログ。投資や節約の記事など必見!

ほんわかした色合いとデザインが可愛らしいつぐみさんのブログ。投資や家計管理のライフハックも気になる!

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

とっても嬉しいです。ありがとうございます!

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

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

  1. ヘッダーのカスタマイズ
  2. ホームページのカスタマイズ
  3. サイドバーのカスタマイズ

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

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

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

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

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

シンプルライフの参考になる記事をもっと読む(ブログ村)

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

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

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

よかったらシェアしてね!

ピックアップ記事

カテゴリー別の人気記事

コメント

コメントする

CAPTCHA


Contents
閉じる