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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

キラペット.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WebNote+

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

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

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

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

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

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

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

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

くうかんしんぷるライフ

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

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

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

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

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

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

KamekoLog

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

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

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

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

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

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

アカリノオト

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

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

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

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

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

ぜひ見てみてください。

つきみにまる

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

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

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

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

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

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

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

英語多聴ブログ

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

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

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

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

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

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

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

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

にこはぐ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

ブログの始め方関連記事