MENU
さとしん
WordPressが好きで毎日触って勉強しています。ブロックエディターに出会ってから本当にWordPressが楽しくなりました。WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

参考になるブログデザインと作り方の解説記事をテーマごとにまとめました!

ブログのデザインを整えることは、WordPressでブログ運営をしていく中の楽しみの1つです。

また、各記事が整理されて分かりやすく表示されているトップページを作ることで、読者の滞在時間や回遊率の向上につながるかもしれません。

さとしん

良く、「サイト型」と呼ばれている形ですね…!

そこで今回は、素敵なブログの運営者さんたちが書いている、「トップページの作り方」に関する記事をWordPressのテーマ毎に分けてご紹介します。

トップページをカスタマイズしたいと考えている方は、ぜひ参考にしてください。

目次

テーマごとにトップページカスタマイズの記事をまとめました!

テーマ毎に分けて紹介しますが、現状はSWELLとCocoonの2テーマのみの紹介です。

今後、他のテーマも含めて、内容を充実させていこうと思います。

もし、以下のような記事を書いていて、掲載にご協力頂ける方がいましたら、当サイト運営者のTwitter(@__satoshin)までご連絡ください。

お問い合わせフォームにご連絡いただいても構いませんが、返信が遅くなる可能性があります。

ゆる~く募集しています…!
こんな感じの記事です
  • トップページのカスタマイズ方法
  • サイト型トップページの作り方

当サイトのコンセプト上、ブロックエディターを使用する方法で解説されている記事限定とします。

この記事の見方

デスクトップ画面の中でスクロールしてもらうと、各サイトのトップページの全体が見られるようになっています。

このスクロール機能はSWELLの標準機能にひと手間加えて作っています。「SWELLのデスクトップ風とブラウザ風の装飾が便利!設定と使い方を紹介!」でこの方法を解説しています。

気になるデザインのブログを見つけたら、ブログカードをクリックして、解説記事に飛んでみてください。

さとしん

どの記事もとても丁寧に作り方を解説されていますよ…!

Cocoonのブログデザインと作り方

WordPressテーマ『Cocoon』
Cocoon』公式サイト

まずは、Cocoonを使っているブログから見ていきましょう。

Cocoonはブロガーさんの中でとても有名な無料テーマです。

さとしん

無料テーマとは思えないほど高機能なテーマですね…!

それでは見ていきましょう。

キラペット.com

ブログ情報
  • ブログ名:キラペット.com
  • 運営者:キラさん|@kirachan_i
  • ブログジャンル:ペット、サイトカスタマイズ、ブログ運営

トップページのデザインはこちら↓↓

キラペット.com

とにかく1度トップページを見てみて欲しいです。

固定背景にしている花の画像がとても素敵でインパクトがあります。

何度もアクセスしたくなるトップページです。

さとしん

固定背景をうまくキャプチャできませんでした。。。ごめんなさい…!

トップページ内の「更新情報」の表示エリアがとても良いなと感じました。以下の記事で作り方を紹介されています。

また、その下のカラムで分けられた「ピックアップ」エリアの作り方は以下の記事で詳しく解説されています。

さとしん

記事を横並びに表示する方法がとても参考になりました…!

ズボラでもすてき空間は作れる

ブログ情報

トップページのデザインはこちら↓↓

macharisa

まず、ファーストビューでまちゃりささんがお出迎えしてくれるのが温かみがあって好きです。

サイトの簡単な説明も書かれているので、初めての人でもサイトの内容が分かるのは良い工夫だなと感じました。

それからカテゴリーのエリアの所は見出しに画像を使っていて、印象に残りやすいです。

キラッと光るボタンやナビカードの設定方法など、とても参考になりました。

このトップページの作り方を知りたい方は以下のリンクからどうぞ。

また、Cocoonについての情報を詳しくまとめられているので、Cocoonユーザーさんは特に必見なブログです。

SWELLのブログデザインと作り方

WordPressテーマ『SWELL』
SWELL』公式サイト

ここからはSWELLを使ったブログを紹介していきます。SWELLは有料ですが、とても人気のテーマです。

さとしん

当サイトもSWELLを使用しています…!

SWELLはHTML、CSSなどコーディングのスキルがなくても素敵なサイトを作ることができるのも魅力の1つです。

当サイトで、SWELLを使ったサイトのギャラリーも作っています。

>>WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

WebNote+

ブログ情報
  • ブログ名:WebNote+
  • 運営者:さとしん|@__satoshin
  • ブログジャンル:WordPress、ブロックエディター、SWELL関連

トップページのデザインはこちら↓↓
※今のトップページは構成が変わっています!

WebNote+

当サイトです。白をベースにできる限りシンプルにまとめてみました。

上部のおすすめ記事の表示エリアは、SWELLの投稿リストブロックをカスタマイズしてボックス風のデザインにしてみました。

また、カラムブロックを使って、カテゴリー毎に記事を分けて表示しています。

影の付け方やカラム間の余白などを微調整していたり、シンプルながら実は細かいこだわりが隠れています。

このトップページの作り方を知りたい方は以下のリンクからどうぞ。

SWELLの設定や使い方で迷ったときの情報も記事にまとめています。カスタマイズ中にお困りのことがあれば目を通してみてください。

>>WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ!

くうかんしんぷるライフ

ブログ情報

トップページのデザインはこちら↓↓

くうかんしんぷるライフ

最近SWELLのサイトでよく見かける、最新の1記事だけ大きなカード型、残りをリスト型で表示する形式。

このデザインと言えばくうかさんというイメージです。

それから「メディアとテキスト」ブロックの使い方がとても参考になります。

さとしん

SWELLのトップページカスタマイズ系の記事では1番知名度が高いのでは??

このトップページの作り方を知りたい方は以下のリンクからどうぞ。

トップページ以外にも、くうかさんオリジナルのサイトマップも素敵なので見てみてください。

KamekoLog

ブログ情報
  • ブログ名:KamkekoLog
  • 運営者:kamekoさん|@kameko_log7
  • ブログジャンル:ブログ運営、美容、ライフスタイル

トップページのデザインはこちら↓↓

KamekoLog

やはりページ上部の記事スライダーは魅力的です。

それから、セクションごとの見出しにはインライン画像を使用していてオシャレです。

また、各セクション下部の「もっと見る」ボタンもデフォルトのボタンではなく、SWELLボタンを使われています。

ブログ全体の雰囲気と合っていてとても素敵です。

これらの設定方法は以下の記事で解説されていますので、ぜひ見てみてください。

アカリノオト

ブログ情報

トップページのデザインはこちら↓↓

アカリノオト

まず、ファーストビューで画面いっぱいに表示される画像がステキで一気に引き込まれます。

そして、カテゴリーごとにタグ検索できるエリアを作られていて、読者としてはすごく嬉しい配慮だなと感じました。

このトップページの作り方を知りたい方は以下のリンクからどうぞ。

それから、トップページではないですが、各カテゴリーページもカスタマイズされているのでとても参考になるはずです。

ぜひ見てみてください。

つきみにまる

ブログ情報

トップページのデザインはこちら↓↓

つきみにまる

とにかくオシャレなブログです。

流体シェイプでまとめたバナーやアイキャッチがブログの雰囲気をさらにオシャレにしていて、さすがだなと思いながら拝見していました。

ページ上部にあるカテゴリーバナーは、SWELLのピックアップバナーではなく、カラムブロックを作って作られています。その理由も記事内で解説されています。

このトップページの作り方を知りたい方は以下のリンクからどうぞ。

さらにこの記事では、トップページの作り方だけではなく、デザインが決まるまでの過程も紹介されています。

おしゃれなデザインが完成するまでの流れを知ることができるので、SWELLユーザーさん以外にも読んでほしい記事です。

さとしん

僕がまとめているサイト集も取り上げてくれているので要チェックです…!笑

しんでぃブログ

ブログ情報
  • ブログ名:しんでぃブログ
  • 運営者:しんでぃさん|@shinshindy33
  • ブログジャンル:ブログ運営、WordPress、SWELL関連、ライフスタイル

トップページのデザインはこちら↓↓

しんでぃブログ

ページ上部にあるピックアップバナーから主要なカテゴリーへの誘導が期待できそうです。

所々、フルワイドブロックの背景に画像を使われているのもオシャレです。

それから、各カテゴリーの一覧エリアでは、セクション見出しの下に大きな画像が配置されていて、カテゴリーの内容が伝わりやすいなと感じました。

このトップページの作り方を知りたい方は以下のリンクからどうぞ。

英語多聴ブログ

ブログ情報

Shokoさんのカスタマイズ記事は別ブログの洋書多聴ブログを例に解説されています。

トップページのデザインはこちら↓↓

洋書多聴ブログ

記事執筆時点と現在のデザインが大きく変わっているようなので、記事内容ベースで紹介します。

SWELLでは、PCとスマホでそれぞれ表示内容を切り替えることができます。

>>【便利!】スマホだけ非表示や改行も簡単!SWELLのブロックツールバーの使い方

この機能をうまく活用して、カラムブロックをPCでは3列、スマホでは2列で表示するように設定されています。

この方法はとても便利ですし、多くの方の参考になると思います。

このトップページの作り方を知りたい方は以下のリンクからどうぞ。

にこはぐ

ブログ情報
  • ブログ名:にこはぐ
  • 運営者:しおりんさん|@shio_nicohug
  • ブログジャンル:美容、くらし、お得情報

トップページのデザインはこちら↓↓

にこはぐ

とってもかわいい雰囲気のブログで、すごく好きなデザインです。

ファーストビューの画像で美容系のブログだと分かるので、初めて見に来た読者さんの印象にも残りますよね。

以外と、ブログジャンルとブログ内で使っている画像の関連性が低いブログも多いので、しおりんさんのブログを参考に見直してみると良いかもしれません。

さとしん

アイキャッチもとてもオシャレです…!

それから、SWELLのフルワイドブロックで境界線の形状を波にしているのですが、緩めの波になっていて優しい雰囲気があるなと感じました。

しおりんさんの解説記事の中でこまかい設定値まで記載してくれているので、ぜひ参考にしてみてください。

このトップページの作り方を解説している記事は以下のリンクからどうぞ。

デザインを楽しみつつ素敵なブログを作っていきましょう!

今回はWordPressテーマごとに、ブログデザインとそのデザインの作り方について書かれた記事をご紹介しました。

紹介したテーマ

詳しく解説してくれている方がいるので、有料、無料テーマ問わず、素敵なブログを作ることができるはずです。

さとしん

ただし、全く同じデザインにするのはやめましょうね…!

解説記事を参考に、自分なりにアレンジしたり、オリジナリティを出していけると良いと思います。

自由にブログを作ることができるのもWordPressの醍醐味の1つです。

ブログのデザインも含めて、楽しく運営していきましょう。

最後まで読んていただきありがとうございました。

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

よかったらシェアしてね!
目次
閉じる