[簡単！Cocoon設定]ブログ型からサイト型にトップページをカスタマイズする方法

今回はCocoonでブログ型からサイト型にトップページにカスタマイズする方法をご紹介します。

CSSの設定が不要のため、初心者でも簡単に設定することができます。

この記事は次の人におすすめです。

・Cocoonでブログ型からサイト型にトップページをカスタマイズしたい方

・Cocoonでおしゃれなレイアウトにカスタマイズしたい方

・初心者でCCSがわからないけど、Cocoonのレイアウトをおしゃれにカスタマイズしたい方

私もブログサイトをブログ型トップページからサイト型トップページにしてレイアウトが大きく変わりました。

ブログ名も変わっているのですが、サイト型にレイアウトを変更する前は「働く夫婦ブログ」という名前でブログ型で運営していました。

以下の写真がブログ型トップページの時のサイトデザインなのですが、回遊性が低かったり、過去の記事は見られなかったりしていました。

現在はサイト型で「かぞくのおと」という名前で運営しております。（画面上部のHomeから参照ください。）

サイト型トップページって何？

そもそもサイト型トップページがわからない方もいるかと思います。

トップページには、ブログ型とサイト型の２種類があります。

ここではブログ型トップページは新着記事が１列に並んでいるものを指しています。

Cocoonではデフォルトのままだとこちらのレイアウトになっています。

このままだと過去の記事が埋もれていってしまうというデメリットがあります。

サイト型トップページとは、カテゴリーごとに記事を分けるレイアウトのページを指しています。

Cocoonで少し設定を変えるだけで変更することできます。

ブログ型トップページのままでいいという方もいるかもしれませんが、サイト型トップページにすることで次のようなメリットが考えられます。

・カテゴリー分けしているのでユーザーが記事を探しやすい

・見た目が整えられておしゃれに見える

以下の写真のように「Cocoon設定」をクリックします。そうすると、Cocoonの基本的な設定ができるページに遷移します。

Cocoon設定に遷移したら、「インデックス」というタブを選択します。

「インデックス」タブをクリックした後は、表示形式の「カテゴリごと」を選択します。

２カラム、３カラムというものがありますが、これは記事を２つ並べて表示させたり、３つ並べて表示させたりすることができます。無表記のものは１つだけ表示されます。

個人的なおすすめは２カラムです。

「インデックス」タブ内をスクロールすると「カードタイプ」という項目があります。

カードタイプでブログカードのデザインを変更することができます。

個人的なおすすめは縦型カード２列です。

他の項目だと大きすぎて窮屈に感じたり、小さすぎて見づらいかなと思い、縦型カード２列がおしゃれでスタイリッシュに見えたからです。

サイト型トップページを作るための基本的なカスタマイズ設定は以上となります。

CocoonであればCSSを使わずにブログのトップページをブログ型トップページからサイト型トップページにカスタマイズ変更することができます。

初心者の方でも簡単におしゃれにレイアウトを変更することができるのでぜひお試しください。