ブログで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の設定にある「おすすめカード」ですが、これを設定するだけで、おしゃれにサイト型に近づくことができます。 しかし、デフォルト設定ではトップページのヘッダー部にあるため、下記のページのようにメニューとかぶっている感[…]