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

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

SWELLトップページカスタマイズ
URLをコピーする
URLをコピーしました!

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

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

くうか

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

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

くうか

ワードプレスのこと、まだそれほど詳しくないけどできるかな?

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

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

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

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

  1. ヘッダー
  2. ホーム(新着・あいさつ・おすすめ・カテゴリ別記事等)
  3. フッター

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

Contents

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

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

PCでの表示

ヘッダー部分
PC

モバイルでの表示

トップページ(モバイル)
モバイル

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

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

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

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

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

くうか

でも叶うってことに気付いて、一気にやる気アップ♪しかもおしゃれになります!!(SWELLはデフォルトでおしゃれだけどね^^)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

くうか

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

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

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

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

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

設定項目(当ブログの例)
  • バナーレイアウト:固定幅4列(PC)・固定幅2列(SP)
  • バナーデザイン:タイトル⇒表示しない、内側に白線をつけない、バナー画像を少し暗くしない

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

くうか

記事内で各記事へ内部リンクしているので、色んな記事を見てもらえると嬉しいなという期待もこめて…♪

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

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

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

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

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

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

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

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

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

\ おすすめのテーマ /

テーマSWELL

シンプルでスタイリッシュなデザインと高機能が備わったテーマ
快適すぎてびっくりしちゃうかも!?

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

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

くうか

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

まずは固定ページで、

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

を、作成します。

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

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

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

ホームページ1~4
ホームページ5~7
  1. 新着/人気記事
  2. あいさつ文
  3. おすすめ記事
  4. カテゴリー別ランダム記事
  5. SWELL紹介
  6. サブブログへのリンク
  7. キーワード検索エリア

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

①新着/人気記事エリア

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

新着人気記事エリア

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

STEP
【フルワイド】ブロックを追加する
フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:PC・SPともに40
  • 背景色:ピンクベージュ
  • 上下の境界線の形状:ジグザグ、高さ:3
STEP
【カラム】ブロックを配置する

【カラム】(50/50)を追加する。

STEP
各カラムに【投稿リスト】【タブ】ブロックを挿入する

左カラムは【投稿リスト】ブロックで1記事のみ表示

まず【段落】を追加し、「\ New arrival /」の文字を入れました。

次に【投稿リスト】ブロックを追加。

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

最新記事の1番目の記事を大きく目立たせたいので1記事のみ。
見た目を良くするため、抜粋文を入れています。

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

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

【タブ】ブロックを使い新着と人気の記事を表示させました。
両者をぱっと見でわかりやすくするため、人気順は【リスト型】に。

新着記事Pickupタブの除外ID設定の方法

除外ID設定
除外ID設定

左の最新記事と内容が被るので最新記事のIDを除外しますが、ちょっとアナログな作業となるので、お好みで設定してください。

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

コードの追加は自己責任でお願いいたします。

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

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

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

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

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

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

くうか

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

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

PC:1記事めリスト型、
以下カード型

新着記事応用(PC版)

スマホ:1記事めカード型1列、
以下カード型2列

新着記事応用(SP版)
くうか

PCのみ表示/SPのみ表示、のデバイスコントロール+グループ化を利用しました。
新着記事は1記事めを目立たせると目を引きますね!

②あいさつ文

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

サイトあいさつ文

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

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:40
  • オーバーレイの透明度:50
  • 画像:リビングの写真を設定、背景効果:Fixed BackgroundをON

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

くうか

ブログパーツにしたので、サイトマップのページにも再利用しています。

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

③おすすめ記事エリア

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

サイトおすすめ記事

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

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

くうか

SWELL独自のレイアウトもあるので、気になったら使ってみてくださいね♪

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

④カテゴリ別記事エリア

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

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

子カテゴリー付きのカテゴリーエリア説明
子カテゴリーあり
STEP
【フルワイド】ブロックを追加
フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:40
  • 背景色:白
  • 上部の境界線:斜線、高さレベル:0
  • 下部の境界線:ジグザグ、高さレベル:3
STEP
カテゴリーバナーの作成

【カラム】ブロックを配置し、6列に変更

あらかじめCanva等で作成しておいた画像を【バナーリンク】として配置し、各カテゴリーのURLへリンクするよう設定する。

モバイルでは通常2列までの表示しかできませんが、CSSで3列にしています。

今後SWELLの機能で3列にできるブロックが出ると予想しているので、現在はCSSの公開はしません、すみません!

STEP
見出しを追加

カテゴリー名の見出し(H3)を追加し、説明を注釈で入れました。

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

【カラム】(70/30)ブロックを追加する。

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

左カラム

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

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

右カラム

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

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

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

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

子カテゴリーなしのカテゴリーエリア説明
子カテゴリーなし
  1. 【カラム】ブロック追加→50/50
  2. 見出し(H3)を追加し、カテゴリー名と説明の注釈を入れる
  3. 左右それぞれのカラムに【投稿リスト】ブロックを入れる
    • 投稿数:3
    • レイアウト:リスト型
    • 表示順序:ランダム
    • 抜粋文:0
    • Pickupタブ:該当カテゴリー
くうか

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

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

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

くうか

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

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

タブブロック(投稿リスト)

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

⑤SWELL紹介エリア

SWELL紹介エリア

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

ここは簡単。

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

くうか

背景画像を設定したので、ちょっと雰囲気を変えられますね!

⑥外部リンクエリア

外部リンクエリア

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

ここも同じく簡単。

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

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

くうか

カラムを2列以上にするとモバイルではスクロール表示になります!

⑦キーワード検索エリア

キーワード検索エリア

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

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

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

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

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

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

ホームページ設定
ページの割り当て

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

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

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

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

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

フッター

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

STEP
フッター1を作成

【外観】→【ウィジェット】→【フッター(PC)1】に、[SWELL]プロフィールを追加する。

STEP
フッター2を作成

【ブログパーツ】にて、ブログ村などのリンクへ飛ぶ【SWELLボタン】を作成する。

【外観】→【ウィジェット】→【フッター(PC)2】に、テキスト追加→上記で作ったブログパーツIDを記述する。

STEP
フッター3を作成

【外観】→【ウィジェット】→【フッター(PC)3】に、カスタムHTMLを追加し、ブログ村のパーツhtmlを記述する。

くうか

フッターは個々で必要なパーツは違うと思うので、お好きに作ってくださいね♪

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

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

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

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

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

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

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

くうか

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

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

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

くうか

ありがとうございます!

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

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

フォロー待ってます

くうかんしんぷるライフ - にほんブログ村

楽天ROOMに愛用品を登録しています

楽天ROOM

ライフスタイルまとめメディアへ

SWELLトップページカスタマイズ

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

ピックアップ記事

カテゴリー別の人気記事

コメント

コメント一覧 (8件)

    • 久野さん
      コメントありがとうございます!!
      そういって頂けてとても嬉しいです。
      サイトもこのカスタマイズを使っていただいて嬉しくなっちゃいました(^^♪

  • くうか様

    お世話になっております。
    英語やポイ活などについて情報発信しておりますぴろやんと申します。
    いつも有益な情報発信ありがとうございます。
    くうか様のサイトがとってもわかりやすかったので、貴サイトを参考にSWELLでサイト構築いたしました。
    当方のブログでもくうか様のサイトを参考にさせていただいた旨は、記載させていただいております。
    https://piroyan101.com/swell/

    引き続き、よろしくお願いいたします。

    • piroyan101さん
      コメントありがとうございます^^
      わかりやすいと言っていただけてとっても嬉しいです。
      サイトの紹介もしていただいて、ありがとうございました!!

  • お久しぶりです、くうかさん

    先日はSWELLのセール情報ありがとうございました
    おかげさまで無事にSWELL購入できました。
    くうかさんのブログから購入したいと言っておきながら
    購入せず申し訳ありませんでした。

    被リンクしていただいてありがとうございました。
    気づくのが遅れて申し訳ありません。
    僕のブログでもリンクさせて頂き、リンク先でくうかさんのブログを
    紹介させて頂きました。

    これからもお邪魔させて頂きます。
    今回は誠にありがとうございました。

    • ノブさん
      いえいえ。お安く買えた方が絶対良いですし!
      気にしないでくださいね。

      拝見させていただきました。
      ご紹介ありがとうございました!^^

  • くうかさん!

    こんばんは!Twitterでお世話になっているためです。

    勝手で恐縮ですが、カスタマイズを参考にいたしました。なので、ブログに記載し、リンクを貼らせていただきました。

    https://tamesanlog.com/swell-customization/
    (SWELLサイト型カスタマイズ⑥:カテゴリーコンテンツでリンクを貼っています)

    • ためさん
      参考にしてくださってありがとうございます!
      ためさんのカスタマイズはとっても丁寧な説明で色々と参考になりますね^^
      紹介してくださりありがとうございました。

コメントする

CAPTCHA


Contents
閉じる