【Cocoon】サイト型トップページの作り方｜おしゃれなデザインにしたい人必見！

「サイト型トップページとは？」

「固定ページでトップページを作りたい」

「トップページをカスタマイズする方法を教えて」

この記事では、そんな方に向けて、Cocoonでサイト型トップページの作り方とカスタマイズを解説します。

この記事を読めば、あなたもサイト型トップページについてはもちろん、

• 作り方とページの中身
• カスタマイズする方法
• 作成におすすめな人

が理解できるようになります。

私もブログ型から変更しようか悩んでいたのですが、本記事の方法でかんたんにサイト型を作成でき、変更してよかった！と思えています。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

Cocoonサイト型トップページとは？

サイト型トップページとは、目的や好みに合わせて記事やコンテンツを配置したり、デザインを変えたりしたトップページのことです。

Cocoonでは、ブログ型トップページがデフォルトですが、サイト型トップページへかんたんに変更できます。

サイト型とブログ型の違い

ブログ型・サイト型トップページの1番大きな違いは、記事やコンテンツの表示方法です。

他にも下記のような違いもあります。

	ブログ型	サイト型
記事の並び順	新着順	自由
その他コンテンツの配置	できない	できる
デザイン性	低い	高い

Cocoonのサイト型トップページは、

• 人気記事やおすすめ記事順で並べ替えたり
• 吹き出しや画像を挿入できたり
• 好きなようにデザインしたり

できます。

Cocoonでサイト型トップページの作り方

Cocoonでサイト型トップページの作り方は、下記の通りです。

それぞれ詳しく解説します。

固定ページでトップページを作成する

Cocoonでサイト型トップページの作り方は、下記8つの手順で行います。

手順通りに詳しく解説します。

手順①固定ページを新規追加する

Cocoonでサイト型トップページは、固定ページで作成します。

まず、WordPress管理画面を開き、

画面左側のサイドバーにある固定ページ⇒新規固定ページを追加の順にクリックしてください。

これで固定ページを作成できるページに移動します。

手順②タイトルをつける

開いたページでタイトルを入力していきます。

タイトルは分かりやすいように「トップページ」でOKです。

手順③2カラムブロックを追加する

ここからトップページの中身を作っていきます。

記事の一覧を2列で並べたいので、2カラムブロックをページに追加します。

記事投稿画面の左上にある+をクリックします。

表示されたメニューから「2カラム」を選びます。

これで2カラムブロックを挿入できます。

手順④見出しを作る

ページに挿入した2カラムブロックに見出しを作ります。

記事投稿画面の左上にある+をクリックします。

表示されたメニューから「見出し」を選びます。

これで2カラムブロックに見出しを作れます。

見出しには、カテゴリー名を入力しましょう。

カテゴリー名の例：Cocoon、Cocoon新着記事、Cocoon人気記事など

Cocoonで見出しの機能について詳しく知りたい場合は、下の記事を参考にしてください。

手順⑤カテゴリー別で新着記事を挿入する

作った見出しの下にカテゴリー別で新着記事を挿入します。

記事投稿画面の左上にある+をクリックします。

表示されたメニューから「新着記事」を選びます。

新着記事が挿入されました。

次に新着記事を以下の手順でカテゴリー分けします。

1. 新着記事ブロックを選択
2. 設定をクリック
3. ブロック内のフィルタをプルダウン
4. 「全カテゴリー表示」をスライドで非表示
5. 「表示カテゴリー選択」で表示するカテゴリーに✔

これでカテゴリー別で新着記事を作れます。

手順⑥カテゴリー別で人気記事を挿入する

2カラムブロックに挿入した新着記事の右側に人気記事を挿入します。

記事投稿画面の左上にある+をクリックします。

表示されたメニューから「人気記事」を選びます。

人気記事が挿入されました。

次に人気記事を以下の手順でカテゴリー分けします。

1. 人気記事ブロックを選択
2. 設定をクリック
3. ブロック内のフィルタをプルダウン
4. 「全カテゴリー表示」をスライドで非表示
5. 「表示カテゴリー選択」で表示するカテゴリーに✔

これでカテゴリー別で人気記事を作れます。

ランキング番号を表示したい場合もスライドで表示できます。

手順⑦もっと見るボタンを設置する

カテゴリー別で作った記事一覧の下にもっと見るボタンを設置します。

記事投稿画面の左上にある+をクリックします。

表示されたメニューから「ボタン」を選びます。

これでボタンを挿入できます。

ボタンブロックをクリックするとボタン名を変更できます。

次に以下の手順でボタンにカテゴリーURLを挿入します。

1. ボタンブロックを選択
2. 設定をクリック
3. ブロック内の「URL」にカテゴリーURLを入力

これでボタンにカテゴリーURLを挿入できます。

その他ボタンでは、大きさや色、形なども自由にカスタマイズできます。

Cocoonでボタンのカスタマイズ方法については、下の記事を参考にしてください。

手順⑧固定ページを公開する

固定ページをサイト型トップページを作成し終えたら、記事投稿画面の右上にある公開をクリックして、記事を公開しましょう。

これでサイト型トップページを固定ページで作れました。

次に、現在表示されているトップページを「ブログ型」から「サイト型」へ変更していきます。

作成したトップページの表示設定を行う

現在表示されているブログ型トップページを、先ほど作成したサイト型トップページへ変更していきます。

WordPress管理画面で、設定⇒表示設定の順にクリックする

1. 「ホームページの表示」で固定ページを選択
2. 「ホームページ」をプルダウン
3. 先ほど作った固定ページ名を選択

変更を保存をクリックする

これでサイト型トップページに表示が変わります。

Cocoonのサイト型トップページで設定したい5つの項目

Cocoonでサイト型トップページの作ったら、下記5つの項目もあわせて設定することをおすすめします。

それぞれ詳しく解説します。

トップページの表示状態を選ぶ

Cocoonでサイト型トップページの表示状態を下記7つから選べます。

• デフォルト
• 1カラム（フルワイド）
• 1カラム（広い）
• 1カラム（狭い）
• 本文のみ（フルワイド）
• 本文のみ（広い）
• 本文のみ（狭い）

設定方法は、サイト型トップページを作った固定ページ編集画面を開きます。

1. 設定をクリック
2. 固定ページをクリック
3. 「ページ設定」をプルダウン
4. 「ページタイプ」をプルダウン
5. ページの表示タイプを選ぶ

これでサイト型トップページの表示状態を変更できます。

読む時間と目次を非表示にする

Cocoonで読む時間と目次を非表示にする方法もサイト型トップページを作った固定ページ編集画面で行います。

1. 設定をクリック
2. 固定ページをクリック
3. 「ページ設定」をプルダウン
4. 「読む時間を表示しない」「目次を表示しない」に✔

これで読む時間と目次を非表示にできます。

SNSボタンを非表示にする

サイト型トップページのSNSシェア・フォローボタンを非表示にしていきます。

WordPress管理画面を開き、

Cocoon設定⇒SNSシェアの順にクリックする

トップシェアボタン設定の表示ページにある「フロントページ（インデックスページ）」の✔を外す

同画面でボトムシェアボタン設定の表示ページにある「フロントページ（インデックスページ）」の✔を外す

変更をまとめて保存をクリックする

これでSNSシェアボタンが非表示になります。

SNSフォローボタンも同様に設定すると非表示にできます。

タイトルを非表示にする

Cocoonでサイト型トップページのタイトルを非表示にする方法です。

編集画面を開き、1番下にあるカスタムCSSに、以下のコードを入力します。

.entry-title{
  display: none;
}

これでタイトルが非表示になります。

公開日・更新日を非表示にする

Cocoonでサイト型トップページの公開日・更新日を非表示にする方法です。

タイトルを非表示にした方法と同じく、編集画面の1番下にあるカスタムCSSに、以下のコードを入力します。

.date-tags{
  display: none;
}

これでタイトルが非表示になります。

Cocoonでトップページをカスタマイズ

Cocoonの固定ページでサイト型トップページを作ったら、お好みで以下8つの項目をカスタマイズできます。

それぞれのカスタマイズ方法は、下の記事で詳しく解説しています。

Cocoonでサイト型トップページを作るメリット

Cocoonでサイト型トップページを作るメリットは、下記3つあります。

それぞれ詳しく解説します。

好きなようにカテゴリー分けできる

ブログ型トップページではジャンル別でしかカテゴリー分けできませんが、

サイト型トップページでは、人気記事やおすすめ記事別などでもカテゴリー分けできます。

また、記事数が増えれば過去に書いた記事が埋もれてしまいますが、

好きなようにカテゴリー分けすることで、上の方に持ってくることもできますよ。

カスタマイズが豊富

サイト型トップページでは、記事以外に

• 画像
• 吹き出し
• 紹介文

などを挿入できます。

投稿記事を書くみたいにトップページも書けるので、カスタマイズ性はかなり高めです。

デザイン性が高い

サイト型トップページはカスタマイズの自由度が高く、画像の挿入やテキスト・見出しの色を変更できます。

作り込めば他サイトとの差別化もでき、オリジナリティあふれるブログに仕上げれます。

Cocoonでサイト型トップページを作るデメリット

Cocoonでサイト型トップページを作るデメリットは、下記2つあります。

それぞれ詳しく解説します。

作成する手間と時間がかかる

ブログ型トップページは何もしなくても新着順に記事が並びますが、

サイト型トップページでは記事の配置やデザインなど、一から自分で作らなければならず手間と時間がかかります。

ですので、ある程度作りたいイメージを固めて、作成時間を決めて取り掛かるといいかもしれません。

完璧を求めすぎて記事を書く時間が圧迫される

サイト型トップページはカスタマイズ性が高く、「ああしたい、こうしたい」というのが出てきます。

作り終えた後も「やっぱりこの部分は修正する」など完璧を求めすぎてしまい、本来書くべき記事に割く時間がなくなってしまいます。

80%出来くらいを意識して、サイト型トップページの作成に時間を奪われないようにしましょう。

サイト型トップページはこんな人におすすめ！

Cocoonでサイト型トップページを作るかどうか迷っている場合は、下記のような人におすすめです。

それぞれ詳しく解説します。

記事数が多くなってきた

記事数が多くなってくると、過去に書いた記事が埋もれてしまい、気づいてもらえなくなるというデメリットが出ます。

ただ、サイト型トップページに変更すれば、記事の表示方法を好きなようにカスタマイズできるので

記事数が多くなっても、過去の記事をアピールできます。

見てもらいたい記事に誘導したい

ブログ型トップページだと新着順に記事が並べられますが、

サイト型トップページではランキング順やおすすめ順など、見てもらいたい記事で並べてユーザーを誘導することができます。

回遊率やPV数をアップさせたい

サイト内にある記事をジャンル別やランキング順別で配置することで、ユーザーが興味のある記事を見つけやすくなり、回遊率やPV数のアップが期待できます。

デザインで差別化したい

サイト型トップページはカスタマイズ性が高いので、オリジナリティのあるおしゃれなブログにすることもできます。

CocoonはWordpressの無料テーマで利用者数も多いので、デザインで差別化するのもアリです。

まとめ：サイト型トップページでおしゃれなブログを作ろう

今回は、Cocoonでサイト型トップページの作り方とカスタマイズを紹介しました。

当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。