ブログを開始して約1か月半、WordPressの使い方にも少しずつ慣れてきました。
さて、このブログでは、タイトルにもあるようにCocoonという テーマ を使用しています。
Cocoonは無料なのにも関わらず、そのままでもかなりいろいろなカスタマイズができるということで有名ですが、CSSというのをいじってみたり、HTMLでちょっと加えてみたりするだけで、よりいろいろなカスタマイズがしていけるということがわかってきました。
※ ワードプレスでCocoonのテーマに興味がある人用に、リンクを貼っておきますね。
この記事では、わたしが実際に丸２日かけてカスタマイズしたトップページについて、どのようなことを意識して変えていったのか、１つ１つ丁寧に説明していきたいと思います。
具体的な改造の方法については、次の記事でまとめたいと思います。
- WordPressでブログを書いている
- ブログ初心者だけど、ブログデザインにもこだわりたい
- Cocoonを使っていない人でも、デザインの考え方は同じです。
CocoonテーマのブログトップページのBefore＆After
今回の大改造で、どのくらい変わったのか気になりますよね。
そこで、まずはこの「セカイキ」ブログのBefore＆Afterをお見せしたいと思います。
改造前（Before）のトップページはこんな感じでした
改善前でも、ヘッダー、メニュー、サイドバーとそれぞれ一応作りこんでいました。
WordPress、特にCocoonは多くの人が使っていて機能性が高い一方で、どうしてもデザインが似てきてしまうのが問題ですよね。
便利で無料だし慣れてきたからCocoonのテーマは使い続けたいけど、
他の人と差別化して、もっとクールでかっこいいブログに変えたい！
改造後（After）のトップページがこちら
まずは、改造後のトップページの上の部分からお見せしていきたいと思います。
ヘッダーは以前こだわって作ったデザインを利用
過去にどのようなヘッダーを使っていて、どうして現在のヘッダーにしているのか、気になる方はアドセンスの記事を読んでみてください。
メニューにアイコンを追加
あ、よく見てみたら文字の前にカラフルなアイコンがついているね！
フラットアイコンというものを用いて、文字の前にアイコンを追加し、色を設定できるようにしてみました。
▼メニューのデザインについてはこの記事で詳しくご紹介しますね。
新たにアピールエリアをデザイン
サイドバーもなくなってるみたい。
その代わり、サイドバーの上のほうに配置していたプロフィールへのリンクを、アピールエリアとしてブログトップページの最初に持ってくることにしました。
－世界で生きるラボ－のイメージに合うように、大航海をしていく船を使った画像とアイコンが最初に目につくように左側に配置し、右側にこのブログのターゲット「海外好きの方」というキーワード、プロフィール、そして5つのテーマの概要を書くようにしました。
パソコンでもタブレットでもスマホでも、まず目に入るのはブログトップページの上の部分です。
この箇所で、
- 想定しているブログの読者さん
- 書いている人の概要
- ブログのテーマ
を端的に説明することで、「お、読んでみようかな」と思ってもらうことが大事です！
▼アピールエリアのデザイン方法はこちら
これまで全カテゴリ一緒だった最新記事一覧をカテゴリーごとに整理
アピールエリアの下には、最新記事をカテゴリーごとに表示するようにしました。
Beforeでは、すべての最新記事が並んでいるだけでしたが、実際にブログを読まれる方は同じカテゴリーの内容が気になるでしょう。
今後の記事ではこのサイズでも見やすい工夫をしていくことが大事そうだね！
トップページを変えると、タイトルやアイキャッチ画像など、他もおなじように変えていく必要があるね。
トップページで雑多な最新記事が並ぶことって読者さんにとったらわかりにくいんじゃないの？って思うんですよね。 特化ブログで…
カテゴリー新着の形式にすることで、各カテゴリーごとにどんな感じのことが書かれているのかがぱっとわかるようになってよいですね。
フッターにサイドバーにあった情報を入れ込む
サイドバーを無くしてしまった分、トップページでお伝えできる情報が減ってしまうのは残念ですよね。
そこで、このブログではフッター部分に見てほしい情報を追加することにしました。
フッター左側にTwitterの最新ツイート情報
わたしは、「ブログ１ヶ月目のPV数が748と伸び悩むも焦らない５つの理由」でも書きましたが、Twitterを通じてブログに関することを発信し、同時にTwitterから見に来てくださっている方がとても多くいます。
そのため、ブログを訪れた人にはぜひTwitterも見ていただきたいと考えており、フッターのなかでも目立つ１番左側に配置することにしました。
フッター真ん中に人気記事TOP3
カテゴリーごとの記事では、記事が新着順に並んでいます。
しかし、実際には古くても人気のある記事があり、ぜひそれらについても知っていただきたいですよね。
そこでこのブログでは、人気記事という形式で配置することにしました。
TOP５でもよかったのですが、まだ記事数もあまり多くないので、現在はTOP3にしています。
フッター右側には東京オリンピックまでのカウントダウン
東京オリンピックのチケットが２０１９年５月８日より発売開始しました。
ついに開催が目に見えてきた東京オリンピック。
海外にいてもできたら日本に帰って応援に行きたいし、もし無理でも海外から応援したい！
そんな思いから、このスペースには東京オリンピックまでのカウントダウンを配置することにしました。
また、海外在住で東京オリンピックを見に行きたいという人向けにチケット購入に関する記事も書いたので、そこへのリンクも貼っておくことにしました。
一生に一度だと思われる、東京でのオリンピック。本当に楽しみですね！
こんにちは。一生に一度のオリンピックがいまから楽しみなグリット（@Globallifetips1）です。 ついに日本では…
最後に：ブログの改造って難しいと思ってたけど、とても楽しい！
以上、ブログのトップページを改造しようと思ったら、丸２日かかってしまいました。
しかも、そのうち１日は深夜２時近くまで。
最初は「良くわからないことだらけで大変だな」と思ってやっていたのですが、いざ新しいブログサイトが少しずつでも出来てくると、作業が止まりませんでした。
きっとここをこうしたらもっと良くなる。この繰り返しで、気が付いたら時間が過ぎ、最終的には、自画自賛できるトップページが完成しました。
もし、わからないことがあった方や、アドバイスが欲しい方などは、TwitterからDMしていただけたら、わかる範囲でご協力させていただきます。