おしゃれなブログトップページデザインの構成と作り方

ブログを開始して約1か月半、WordPressの使い方にも少しずつ慣れてきました。

さて、このブログでは、タイトルにもあるようにCocoonという テーマ を使用しています。

Cocoonは無料なのにも関わらず、そのままでもかなりいろいろなカスタマイズができるということで有名ですが、CSSというのをいじってみたり、HTMLでちょっと加えてみたりするだけで、よりいろいろなカスタマイズがしていけるということがわかってきました。

※ ワードプレスでCocoonのテーマに興味がある人用に、リンクを貼っておきますね。

この記事では、わたしが実際に丸2日かけてカスタマイズしたトップページについて、どのようなことを意識して変えていったのか、1つ1つ丁寧に説明していきたいと思います。

具体的な改造の方法については、次の記事でまとめたいと思います。

こんな人に価値があります!
  • WordPressでブログを書いている
  • ブログ初心者だけど、ブログデザインにもこだわりたい
  • Cocoonを使っていない人でも、デザインの考え方は同じです。
Ad

CocoonテーマのブログトップページのBefore&After

今回の大改造で、どのくらい変わったのか気になりますよね。

そこで、まずはこの「セカイキ」ブログのBefore&Afterをお見せしたいと思います。

改造前(Before)のトップページはこんな感じでした

改善前でも、ヘッダー、メニュー、サイドバーとそれぞれ一応作りこんでいました。

 
さるまる
案外良いんじゃないの?
 
グリット
けど、多くの人がこういうデザインだからオリジナリティがないよね。

WordPress、特にCocoonは多くの人が使っていて機能性が高い一方で、どうしてもデザインが似てきてしまうのが問題ですよね。

トップ画像を改造しようと思った理由

便利で無料だし慣れてきたからCocoonのテーマは使い続けたいけど、
他の人と差別化して、もっとクールでかっこいいブログに変えたい!

改造後(After)のトップページがこちら

まずは、改造後のトップページの上の部分からお見せしていきたいと思います。

ヘッダーは以前こだわって作ったデザインを利用

 
さるまる
あれ、ヘッダーは変わってないんじゃない?
 
グリット
実はそうなんです。ヘッダーは前から気に入ったものができていたので、そのまま使うことにしました。

過去にどのようなヘッダーを使っていて、どうして現在のヘッダーにしているのか、気になる方はアドセンスの記事を読んでみてください。

セカイキ

ブログを行っている人なら誰しも、ブログを書くことで収益化してみたいと思うことがありますよね。 わたしも、ブログを通じて収…

メニューにアイコンを追加

 
さるまる
メニューもあまり変わらないかな?
あ、よく見てみたら文字の前にカラフルなアイコンがついているね!
 
 
グリット
そうです。
フラットアイコンというものを用いて、文字の前にアイコンを追加し、色を設定できるようにしてみました。

メニューのデザインについてはこの記事で詳しくご紹介しますね。

セカイキ

本記事は、オリジナルトップページ作成シリーズの第2弾です。   グリット 今回扱う「メニュー」は、セカイキのホームページ…

新たにアピールエリアをデザイン

 
さるまる
メニューよりも下はこれまでの面影が全くないくらいに変わってるね。

サイドバーもなくなってるみたい。

 
グリット
よりすっきりしたイメージとなるように、サイドバーを無くすことにしました。

その代わり、サイドバーの上のほうに配置していたプロフィールへのリンクを、アピールエリアとしてブログトップページの最初に持ってくることにしました。

-世界で生きるラボ-のイメージに合うように、大航海をしていく船を使った画像とアイコンが最初に目につくように左側に配置し、右側にこのブログのターゲット「海外好きの方」というキーワード、プロフィール、そして5つのテーマの概要を書くようにしました。

 

パソコンでもタブレットでもスマホでも、まず目に入るのはブログトップページの上の部分です。

この箇所で、

  • 想定しているブログの読者さん
  • 書いている人の概要
  • ブログのテーマ

を端的に説明することで、「お、読んでみようかな」と思ってもらうことが大事です!

▼アピールエリアのデザイン方法はこちら

セカイキ

ワードプレスの無料テーマCocoonを使ったブログでのトップページデザインもついに4回目になりました。 今回は、アピール…

これまで全カテゴリ一緒だった最新記事一覧をカテゴリーごとに整理

 

アピールエリアの下には、最新記事をカテゴリーごとに表示するようにしました。

Beforeでは、すべての最新記事が並んでいるだけでしたが、実際にブログを読まれる方は同じカテゴリーの内容が気になるでしょう。

 
さるまる
アイキャッチ画像が小さくなってしまるから、
今後の記事ではこのサイズでも見やすい工夫をしていくことが大事そうだね!
 
 
グリット
その通り。
トップページを変えると、タイトルやアイキャッチ画像など、他もおなじように変えていく必要があるね。
▼最新記事をカテゴリごとに並べる方法はこちら
セカイキ

トップページで雑多な最新記事が並ぶことって読者さんにとったらわかりにくいんじゃないの?って思うんですよね。 特化ブログで…

カテゴリー新着の形式にすることで、各カテゴリーごとにどんな感じのことが書かれているのかがぱっとわかるようになってよいですね。

フッターにサイドバーにあった情報を入れ込む

 

サイドバーを無くしてしまった分、トップページでお伝えできる情報が減ってしまうのは残念ですよね。

そこで、このブログではフッター部分に見てほしい情報を追加することにしました。

フッター左側にTwitterの最新ツイート情報

わたしは、「ブログ1ヶ月目のPV数が748と伸び悩むも焦らない5つの理由」でも書きましたが、Twitterを通じてブログに関することを発信し、同時にTwitterから見に来てくださっている方がとても多くいます。

そのため、ブログを訪れた人にはぜひTwitterも見ていただきたいと考えており、フッターのなかでも目立つ1番左側に配置することにしました。

フッター真ん中に人気記事TOP3

カテゴリーごとの記事では、記事が新着順に並んでいます。

しかし、実際には古くても人気のある記事があり、ぜひそれらについても知っていただきたいですよね。

そこでこのブログでは、人気記事という形式で配置することにしました。

TOP5でもよかったのですが、まだ記事数もあまり多くないので、現在はTOP3にしています。

フッター右側には東京オリンピックまでのカウントダウン

東京オリンピックのチケットが2019年5月8日より発売開始しました。

ついに開催が目に見えてきた東京オリンピック。

海外にいてもできたら日本に帰って応援に行きたいし、もし無理でも海外から応援したい!

そんな思いから、このスペースには東京オリンピックまでのカウントダウンを配置することにしました。

また、海外在住で東京オリンピックを見に行きたいという人向けにチケット購入に関する記事も書いたので、そこへのリンクも貼っておくことにしました。

一生に一度だと思われる、東京でのオリンピック。本当に楽しみですね!

セカイキ

こんにちは。一生に一度のオリンピックがいまから楽しみなグリット(@Globallifetips1)です。 ついに日本では…

最後に:ブログの改造って難しいと思ってたけど、とても楽しい!

以上、ブログのトップページを改造しようと思ったら、丸2日かかってしまいました。

しかも、そのうち1日は深夜2時近くまで。

最初は「良くわからないことだらけで大変だな」と思ってやっていたのですが、いざ新しいブログサイトが少しずつでも出来てくると、作業が止まりませんでした。

きっとここをこうしたらもっと良くなる。この繰り返しで、気が付いたら時間が過ぎ、最終的には、自画自賛できるトップページが完成しました。

もし、わからないことがあった方や、アドバイスが欲しい方などは、TwitterからDMしていただけたら、わかる範囲でご協力させていただきます。

記事はいかがでしたか?

読んでいただいた方に関心がありそうな広告が表示されます。

<スポンサーリンク>

最新情報をチェックしよう!
Ad