参考になるブログデザインと作り方の解説記事をテーマごとにまとめました!
![参考になるブログデザインと作り方の解説記事をテーマごとにまとめました!](https://webnote-plus.com/wp-content/uploads/2021/06/75506c0fc2b0eed59bbc42be51cd3ff6.png)
ブログのデザインを整えることは、WordPressでブログ運営をしていく中の楽しみの1つです。
また、各記事が整理されて分かりやすく表示されているトップページを作ることで、読者の滞在時間や回遊率の向上につながるかもしれません。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
良く、「サイト型」と呼ばれている形ですね…!
そこで今回は、素敵なブログの運営者さんたちが書いている、「トップページの作り方」に関する記事をWordPressのテーマ毎に分けてご紹介します。
トップページをカスタマイズしたいと考えている方は、ぜひ参考にしてください。
テーマごとにトップページカスタマイズの記事をまとめました!
テーマ毎に分けて紹介しますが、現状はSWELLとCocoonの2テーマのみの紹介です。
今後、他のテーマも含めて、内容を充実させていこうと思います。
もし、以下のような記事を書いていて、掲載にご協力頂ける方がいましたら、当サイト運営者のTwitter(@__satoshin)までご連絡ください。
お問い合わせフォームにご連絡いただいても構いませんが、返信が遅くなる可能性があります。
デスクトップ画面の中でスクロールしてもらうと、各サイトのトップページの全体が見られるようになっています。
気になるデザインのブログを見つけたら、ブログカードをクリックして、解説記事に飛んでみてください。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
どの記事もとても丁寧に作り方を解説されていますよ…!
Cocoonのブログデザインと作り方
![WordPressテーマ『Cocoon』](https://webnote-plus.com/wp-content/uploads/2021/01/2021-01-20_00h31_40.jpg)
![WordPressテーマ『Cocoon』](https://webnote-plus.com/wp-content/uploads/2021/01/2021-01-20_00h31_40.jpg)
まずは、Cocoonを使っているブログから見ていきましょう。
Cocoonはブロガーさんの中でとても有名な無料テーマです。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
無料テーマとは思えないほど高機能なテーマですね…!
それでは見ていきましょう。
キラペット.com
- ブログ名:キラペット.com
- 運営者:キラさん|@kirachan_i
- ブログジャンル:ペット、サイトカスタマイズ、ブログ運営
トップページのデザインはこちら↓↓
![キラペット.com](https://webnote-plus.com/wp-content/uploads/2021/06/kirapetto.com_.png)
![キラペット.com](https://webnote-plus.com/wp-content/uploads/2021/06/kirapetto.com_.png)
とにかく1度トップページを見てみて欲しいです。
固定背景にしている花の画像がとても素敵でインパクトがあります。
何度もアクセスしたくなるトップページです。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
固定背景をうまくキャプチャできませんでした。。。ごめんなさい…!
トップページ内の「更新情報」の表示エリアがとても良いなと感じました。以下の記事で作り方を紹介されています。
また、その下のカラムで分けられた「ピックアップ」エリアの作り方は以下の記事で詳しく解説されています。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
記事を横並びに表示する方法がとても参考になりました…!
ズボラでもすてき空間は作れる
- ブログ名:ズボラでもすてき空間は作れる
- 運営者:まちゃりささん|@macharisa_blog
- ブログジャンル:WordPress、Cocoon関連、ライフスタイル
トップページのデザインはこちら↓↓
![macharisa](https://webnote-plus.com/wp-content/uploads/2021/06/macharisa.com_.png)
![macharisa](https://webnote-plus.com/wp-content/uploads/2021/06/macharisa.com_.png)
まず、ファーストビューでまちゃりささんがお出迎えしてくれるのが温かみがあって好きです。
サイトの簡単な説明も書かれているので、初めての人でもサイトの内容が分かるのは良い工夫だなと感じました。
それからカテゴリーのエリアの所は見出しに画像を使っていて、印象に残りやすいです。
キラッと光るボタンやナビカードの設定方法など、とても参考になりました。
このトップページの作り方を知りたい方は以下のリンクからどうぞ。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/05/【Cocoon】簡単!サイト型トップページの作り方(図解付き).png?fit=1200%2C630&ssl=1)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/05/【Cocoon】簡単!サイト型トップページの作り方(図解付き).png?fit=1200%2C630&ssl=1)
また、Cocoonについての情報を詳しくまとめられているので、Cocoonユーザーさんは特に必見なブログです。
![](https://macharisa.com/wp-content/uploads/2021/04/Cocoon.png)
![](https://macharisa.com/wp-content/uploads/2021/04/Cocoon.png)
SWELLのブログデザインと作り方
![WordPressテーマ『SWELL』](https://webnote-plus.com/wp-content/uploads/2021/01/2021-01-20_00h31_20.jpg)
![WordPressテーマ『SWELL』](https://webnote-plus.com/wp-content/uploads/2021/01/2021-01-20_00h31_20.jpg)
ここからはSWELLを使ったブログを紹介していきます。SWELLは有料ですが、とても人気のテーマです。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
当サイトもSWELLを使用しています…!
SWELLはHTML、CSSなどコーディングのスキルがなくても素敵なサイトを作ることができるのも魅力の1つです。
当サイトで、SWELLを使ったサイトのギャラリーも作っています。
>>WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!
![](https://webnote-plus.com/swell-gallery/wp-content/uploads/2024/04/swell-design-gallery.png)
![](https://webnote-plus.com/swell-gallery/wp-content/uploads/2024/04/swell-design-gallery.png)
WebNote+
- ブログ名:WebNote+
- 運営者:さとしん|@__satoshin
- ブログジャンル:WordPress、ブロックエディター、SWELL関連
トップページのデザインはこちら↓↓
※今のトップページは構成が変わっています!
![WebNote+](https://webnote-plus.com/wp-content/uploads/2021/06/webnote-plus.com_.png)
![WebNote+](https://webnote-plus.com/wp-content/uploads/2021/06/webnote-plus.com_.png)
当サイトです。白をベースにできる限りシンプルにまとめてみました。
上部のおすすめ記事の表示エリアは、SWELLの投稿リストブロックをカスタマイズしてボックス風のデザインにしてみました。
また、カラムブロックを使って、カテゴリー毎に記事を分けて表示しています。
影の付け方やカラム間の余白などを微調整していたり、シンプルながら実は細かいこだわりが隠れています。
このトップページの作り方を知りたい方は以下のリンクからどうぞ。
![](https://webnote-plus.com/wp-content/uploads/2021/01/swell-customize.png)
![](https://webnote-plus.com/wp-content/uploads/2021/01/swell-customize.png)
SWELLの設定や使い方で迷ったときの情報も記事にまとめています。カスタマイズ中にお困りのことがあれば目を通してみてください。
>>WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ!
くうかんしんぷるライフ
- ブログ名:くうかんしんぷるライフ
- 運営者:くうかさん|@kuukahan
- ブログジャンル:ライフスタイル、ブログ運営、SWELL関連
トップページのデザインはこちら↓↓
![くうかん](https://webnote-plus.com/wp-content/uploads/2021/06/d62c711c47f54ce3e2ac294c06162e49.png)
![くうかん](https://webnote-plus.com/wp-content/uploads/2021/06/d62c711c47f54ce3e2ac294c06162e49.png)
最近SWELLのサイトでよく見かける、最新の1記事だけ大きなカード型、残りをリスト型で表示する形式。
このデザインと言えばくうかさんというイメージです。
それから「メディアとテキスト」ブロックの使い方がとても参考になります。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
SWELLのトップページカスタマイズ系の記事では1番知名度が高いのでは??
このトップページの作り方を知りたい方は以下のリンクからどうぞ。
![](https://hitamukidesign.blog/wp-content/uploads/swelltop-ec.jpg)
![](https://hitamukidesign.blog/wp-content/uploads/swelltop-ec.jpg)
トップページ以外にも、くうかさんオリジナルのサイトマップも素敵なので見てみてください。
![](https://hitamukidesign.blog/wp-content/uploads/swellmap-ec.jpg)
![](https://hitamukidesign.blog/wp-content/uploads/swellmap-ec.jpg)
KamekoLog
- ブログ名:KamkekoLog
- 運営者:kamekoさん|@kameko_log7
- ブログジャンル:ブログ運営、美容、ライフスタイル
トップページのデザインはこちら↓↓
![KamekoLog](https://webnote-plus.com/wp-content/uploads/2021/01/KamekoLog.png)
![KamekoLog](https://webnote-plus.com/wp-content/uploads/2021/01/KamekoLog.png)
やはりページ上部の記事スライダーは魅力的です。
それから、セクションごとの見出しにはインライン画像を使用していてオシャレです。
![](https://kamekolog.com/wp-content/uploads/2023/06/IMG_0587.jpeg)
![](https://kamekolog.com/wp-content/uploads/2023/06/IMG_0587.jpeg)
また、各セクション下部の「もっと見る」ボタンもデフォルトのボタンではなく、SWELLボタンを使われています。
ブログ全体の雰囲気と合っていてとても素敵です。
これらの設定方法は以下の記事で解説されていますので、ぜひ見てみてください。
![](https://kamekolog.com/wp-content/uploads/2023/06/IMG_0588.jpeg)
![](https://kamekolog.com/wp-content/uploads/2023/06/IMG_0588.jpeg)
アカリノオト
トップページのデザインはこちら↓↓
![アカリノオト](https://webnote-plus.com/wp-content/uploads/2021/01/64cf8bd1c0c67009807af88862fe2e49.png)
![アカリノオト](https://webnote-plus.com/wp-content/uploads/2021/01/64cf8bd1c0c67009807af88862fe2e49.png)
まず、ファーストビューで画面いっぱいに表示される画像がステキで一気に引き込まれます。
そして、カテゴリーごとにタグ検索できるエリアを作られていて、読者としてはすごく嬉しい配慮だなと感じました。
このトップページの作り方を知りたい方は以下のリンクからどうぞ。
![](https://akipoblog.com/blog/wp-content/uploads/2021/03/swell-de-sitegata-top.png)
![](https://akipoblog.com/blog/wp-content/uploads/2021/03/swell-de-sitegata-top.png)
それから、トップページではないですが、各カテゴリーページもカスタマイズされているのでとても参考になるはずです。
ぜひ見てみてください。
つきみにまる
- ブログ名:つきみにまる
- 運営者:つきみさん|@tsukiminimal
- ブログジャンル:ブログ運営、ライフスタイル
トップページのデザインはこちら↓↓
![つきみにまる](https://webnote-plus.com/wp-content/uploads/2021/06/eaf855c5ceec133b0630a619fece3060.png)
![つきみにまる](https://webnote-plus.com/wp-content/uploads/2021/06/eaf855c5ceec133b0630a619fece3060.png)
とにかくオシャレなブログです。
流体シェイプでまとめたバナーやアイキャッチがブログの雰囲気をさらにオシャレにしていて、さすがだなと思いながら拝見していました。
ページ上部にあるカテゴリーバナーは、SWELLのピックアップバナーではなく、カラムブロックを作って作られています。その理由も記事内で解説されています。
このトップページの作り方を知りたい方は以下のリンクからどうぞ。
![](https://tsukiminimal.com/wp-content/uploads/2021/05/swell-site-top-1.jpg)
![](https://tsukiminimal.com/wp-content/uploads/2021/05/swell-site-top-1.jpg)
さらにこの記事では、トップページの作り方だけではなく、デザインが決まるまでの過程も紹介されています。
おしゃれなデザインが完成するまでの流れを知ることができるので、SWELLユーザーさん以外にも読んでほしい記事です。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
僕がまとめているサイト集も取り上げてくれているので要チェックです…!笑
英語多聴ブログ
Shokoさんのカスタマイズ記事は別ブログの洋書多聴ブログを例に解説されています。
トップページのデザインはこちら↓↓
![洋書多聴ブログ](https://webnote-plus.com/wp-content/uploads/2021/06/ovis-post.com_audiobooks.png)
![洋書多聴ブログ](https://webnote-plus.com/wp-content/uploads/2021/06/ovis-post.com_audiobooks.png)
記事執筆時点と現在のデザインが大きく変わっているようなので、記事内容ベースで紹介します。
SWELLでは、PCとスマホでそれぞれ表示内容を切り替えることができます。
>>【便利!】スマホだけ非表示や改行も簡単!SWELLのブロックツールバーの使い方
この機能をうまく活用して、カラムブロックをPCでは3列、スマホでは2列で表示するように設定されています。
この方法はとても便利ですし、多くの方の参考になると思います。
このトップページの作り方を知りたい方は以下のリンクからどうぞ。
![](https://ovis-post.com/wp-content/uploads/2020/12/swell-jin.jpg)
![](https://ovis-post.com/wp-content/uploads/2020/12/swell-jin.jpg)
にこはぐ
- ブログ名:にこはぐ
- 運営者:しおりんさん|@shio_nicohug
- ブログジャンル:美容、くらし、お得情報
トップページのデザインはこちら↓↓
![にこはぐ](https://webnote-plus.com/wp-content/uploads/2021/06/nicohug.com_.png)
![にこはぐ](https://webnote-plus.com/wp-content/uploads/2021/06/nicohug.com_.png)
とってもかわいい雰囲気のブログで、すごく好きなデザインです。
ファーストビューの画像で美容系のブログだと分かるので、初めて見に来た読者さんの印象にも残りますよね。
以外と、ブログジャンルとブログ内で使っている画像の関連性が低いブログも多いので、しおりんさんのブログを参考に見直してみると良いかもしれません。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
アイキャッチもとてもオシャレです…!
それから、SWELLのフルワイドブロックで境界線の形状を波にしているのですが、緩めの波になっていて優しい雰囲気があるなと感じました。
しおりんさんの解説記事の中でこまかい設定値まで記載してくれているので、ぜひ参考にしてみてください。
このトップページの作り方を解説している記事は以下のリンクからどうぞ。
デザインを楽しみつつ素敵なブログを作っていきましょう!
今回はWordPressテーマごとに、ブログデザインとそのデザインの作り方について書かれた記事をご紹介しました。
詳しく解説してくれている方がいるので、有料、無料テーマ問わず、素敵なブログを作ることができるはずです。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
ただし、全く同じデザインにするのはやめましょうね…!
解説記事を参考に、自分なりにアレンジしたり、オリジナリティを出していけると良いと思います。
自由にブログを作ることができるのもWordPressの醍醐味の1つです。
ブログのデザインも含めて、楽しく運営していきましょう。
最後まで読んていただきありがとうございました。
![](https://webnote-plus.com/wp-content/uploads/2021/01/swell-review-1.png)
![](https://webnote-plus.com/wp-content/uploads/2021/01/swell-review-1.png)
![](https://webnote-plus.com/wp-content/uploads/2022/09/swell-beginner.png)
![](https://webnote-plus.com/wp-content/uploads/2022/09/swell-beginner.png)
![](https://webnote-plus.com/wp-content/uploads/2021/11/swell-cocoon-comparison.png)
![](https://webnote-plus.com/wp-content/uploads/2021/11/swell-cocoon-comparison.png)
ブログの始め方関連記事