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

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

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

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

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

かめコンパス

こんにちは、かめコンパスです!

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

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

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

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

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

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

目次

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

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

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

かめコンパス

当ブログも今はサイト型トップページを採用しているよ

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

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

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

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

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

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

できます。

かめコンパス

カスタマイズ性の高さがサイト型の特徴だよ

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

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

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

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

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

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

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

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

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

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

「固定ページ」、「新規固定ページを追加」がある場所

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

かめコンパス

間違えて投稿ページで作らないでね

手順②タイトルをつける

タイトルを入力する場所

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

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

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

2カラムブロックが固定ページに挿入されている様子

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

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

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

「+」がある場所

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

「2カラム」がある場所

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

手順④見出しを作る

2カラムブロックに見出しを作った様子

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

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

「+」がある場所

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

「見出し」がある場所

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

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

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

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

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

2カラムブロックに新着記事を作った様子

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

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

「+」がある場所

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

「新着記事」がある場所

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

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

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

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

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

2カラムブロックに人気記事を作った様子

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

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

「+」がある場所

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

「人気記事」がある場所

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

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

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

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

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

人気記事にランキング番号を表示する方法

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

2カラムブロックにもっと見るボタンを作った様子

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

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

「+」がある場所

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

「ボタン」がある場所

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

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

ボタン名を変更した様子

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

  1. ボタンブロックを選択
  2. 設定をクリック
  3. ブロック内の「URL」にカテゴリー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シェアの順にクリックする

「Cocoon設定」、「SNSシェア」がある場所

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

「フロントページ(インデックスページ)」がある場所

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

「フロントページ(インデックスページ)」がある場所

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

「変更をまとめて保存」がある場所

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

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

「SNSフォロー」がある場所

タイトルを非表示にする

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

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

.entry-title{
  display: none;
}
「カスタムCSS」がある場所

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

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

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

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

.date-tags{
  display: none;
}

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

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

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

  • スキン
  • ヘッダー
  • フッター
  • サイドバー
  • カテゴリー
  • ボックスメニュー
  • おすすめカード
  • アピールエリア

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

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

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

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

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

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

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

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

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

かめコンパス

読んでほしい記事をまとめて表示できるね

カスタマイズが豊富

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

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

などを挿入できます。

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

かめコンパス

いろいろアレンジしてみよう

デザイン性が高い

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

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

かめコンパス

サイト全体の色はなるべく統一しようね

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

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

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

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

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

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

かめコンパス

「サイト型トップページの作り方を調べるのも時間が必要だね

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

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

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

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

かめコンパス

私も完璧主義なので気をつけなきゃ…

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

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

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

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

記事数が多くなってきた

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

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

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

かめコンパス

過去の記事も新着記事と同じくらい見てもらえるね

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

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

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

かめコンパス

私もランキングは作っているよ

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

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

かめコンパス

興味がある記事を探せず、サイトを離脱されるのはもったいないよね

デザインで差別化したい

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

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

かめコンパス

Cocoon利用者でもおしゃれなサイトはいっぱいあるね

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

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

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

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

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次