ブログでCocoonを使っている方、簡単な設定でトップページをオシャレにカスタマイズする方法があるのですが、ご存じですか?
この記事は、こんな方におすすめです。
・トップページをオシャレにしてみたい
・ブログ更新のネタが尽きた
・特に理由ないけど暇だ
ちなみに、今回紹介する方法は、cssの使用を最小限にした方法となるため、調整がし易いのもメリットです。
完成したトップページ
この記事で紹介する方法を行うと、このようなトップページを作ることができます。

このトップページのポイントです。
・新着記事とおすすめ記事を持ってきている
・2列に表示することで、洗練されたイメージを作り出している
・カテゴリ別記事をリストアップ
カスタマイズ手順
ここからは、トップページを作っていくための具体的な手順について記載していきます。
さぁ、気合いれていきましょう!
固定ページ機能でトップページとなるページを作る
まず、ダッシュボードの固定ページをクリックし、
「新規追加」をクリックします。

最初の設定
①タイトル入力
固定ページの名前となるタイトルを入力します。
※このタイトルは何でもいいです。
②ページ設定
画面右の「読む時間を表示しない」及び「目次を表示しない」を選択する

これでトップページとなる固定ページの作成は完了です。
本文を作っていく(ここが大事)
次に、いよいよこの記事の核となるステップに入っていきます。
2列表示の出し方
オシャレトップページポイントの2列表示にする方法です。
コンテンツブロックに「カラム」と入力し、「2カラム」を選択することで、2列表示が可能となります。
(3カラムを選択すると、3列表示にすることもできます)

このように、青とベージュの2列にわかれるので、ここに入力していきます。

新着記事・おすすめ記事を作成
私のトップページでは、「新着記事」と「おすすめ記事」を2列で表示させています。
①見出しを作成
「新着記事」、「おすすめ記事」と見出しを作ります。

②ショートコードを入力
ショートコードを入力することで、「新着記事」や「おすすめ記事」の一覧を表示することができるようになります。
「新着記事」用ショートコード

※new_list count=”5″とすることで、5個のリストを表示できます。
(3個表示させたいときは、3にする)
※type=”large_thumb_on”とすることで、大きいサイズのサムネイルとなります。
「おすすめ記事」用ショートコード

カテゴリ別の記事の作成
カテゴリ別の記事も、上記の「新着記事・おすすめ記事を作成」方法と同じ手順で作成していきます。
ただ、ショートコードに一手間必要となります。
①見出しを作成
2列カラムで2列表示をさせ、このようにそれぞれのカテゴリの見出しを付けていきます。

②ショートコードを入力
カテゴリ毎にショートコードを入力していきます。
「カテゴリ別記事」用ショートコード

ここで注目するのは、「cats=”1″」という部分です。
この1という数字が、カテゴリのIDとなっていますので、それぞれに対応したカテゴリIDに変更する必要があります。
<カテゴリIDの調べ方>
ダッシュボードの「投稿」から、「カテゴリー」を選択

確認したいカテゴリー名をクリックし、上のURL欄を見ると、このようにcategory&tag_IDをいう記述があります。

ここに書かれている数字(ここでは1)がカテゴリIDとなります。
ここまでできたら、右上の「公開」を選択しましょう!
【仕上げ】トップページに反映
いよいよ、がんばって作った固定ページをトップページに反映させます。
「設定」から「表示設定」を選択します。

「ホームページの表示」の選択を、「固定ページ」にします。
そして、「ホームページ」の選択欄から、先ほど作った固定ページを選択します。

最後に、「変更を保存」を押せば完成です。
まとめ
今回は、トップページをオシャレにカスタマイズする方法を紹介しました。
無料テーマであるCocoonですが、今回紹介したような方法を駆使していくことで、有料テーマにも負けないようなページへとカスタマイズしていくことが可能です。
他にも様々なテクニックがあるので、私も勉強していくとともに、有用情報を展開しいけたらと思います。
Cocoonの設定にある「おすすめカード」ですが、これを設定するだけで、おしゃれにサイト型に近づくことができます。 しかし、デフォルト設定ではトップページのヘッダー部にあるため、下記のページのようにメニューとかぶっている感[…]