Cocoonサイト型トップページの作り方｜おしゃれなデザイン設計でモチベUP！

「トップページをおしゃれにしたい…」

「トップページで記事の並び順を変えられる？」

「固定ページでトップページを作る方法を教えて？」

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

トップページは2つの型がある

この記事を読めば、あなたも簡単に

• おしゃれなサイト型トップページを作成できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、自分好みのデザインと記事の配置順でユーザーに読んでほしい記事のPV数が増加する個性的なサイトを作成できました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

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

本記事はWordPressテーマ「SWELL」で作成しているので、デザインが抜群にオシャレです！

Cocoonサイト型トップページの作り方7ステップ

CocoonではCSSやHTMLといったコード記述や難しい知識なしで、誰でもかんたんにオシャレなサイトを作成できます。

本見出しでは必要最低限に絞って、サイト型トップページの作り方を以下7つのステップに分けました。

完成イメージ略図

それぞれのステップを順番に解説していきます。

本記事ではサイト型トップページの作成に必要な最低限の項目を理解できた後に、その他おすすめな設定も記事の後半に用意しています。詳しくは「Cocoonサイト型トップページの作成でおすすめな設定9つ」で紹介していますので、気に入った設定のみ選んで作成してください。

ステップ①：アピールエリアに画像を設定する

アピールエリアとは…トップページを開いたときに最初に表示されるエリアのこと

まず始めにアピールエリアに設定する画像を作っていきます。

画像は誰でも無料で利用できるデザインツール「Canva」がおすすめです。

当ブログではCanvaの使い方に関する記事をいくつかご用意しており、詳細を知りたい方は以下のページも参考にしてください。

画像を作成し終えたら、アピールエリアに設定していきましょう。

アピールエリアでは画像上にテキストやボタンリンクの設置もでき、詳しくは下の記事を参考にしてください。

ステップ②：固定ページを作成する

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

つづいて、固定ページの本文にコンテンツを自由に配置していきます。

ステップ③：見出しを作る

Cocoonの見出しにテキストや画像を入れていきましょう。

ここでは見出しに画像を挿入する方法を紹介します。

画像は先ほども紹介したCanvaで作成してください。Canvaで画像を作成する方法はこちら>>

見出し画像のサイズは小さすぎると画像が粗くなるので、横幅1000px以上がおすすめですよ。

それでは、見出しに画像を挿入していきましょう。

今回は見出しに画像を挿入しましたが、見出し自体をデザイン装飾することもできます。

見出しのデザインを変更する方法は、下の記事を参考にしてください。

ステップ④：3カラムブロックに新着・人気・更新記事一覧を作る

作成した見出しの下に記事一覧を配置していきます。

記事編集ページ左上の+⇒3カラムの順にクリックしましょう。

ここからは3つあるそれぞれのカラムに新着・人気・更新記事一覧を作ります。

左側のカラムに新着記事一覧を作る

3カラムブロックの左側のカラムに新着記事一覧を作っていきます。

中央のカラムに人気記事一覧を作る

3カラムブロックの中央のカラムに人気記事一覧を作っていきます。

右側のカラムに更新記事一覧を作る

3カラムブロックの右側のカラムに更新記事一覧を作っていきます。

ステップ⑤：カテゴリーページへ移動するボタンを設置する

記事一覧の下にカテゴリーページへ移動するボタンを設置していきます。

ボタンの設定方法を詳しく知りたい場合は、下の記事を参考にしてください。

これでサイト型トップページの作成は完了です。

次にサイドバーを非表示にしていきましょう。

ステップ⑥：サイドバーを非表示にする

Cocoonでサイドバーを非表示にする方法は3つありますが、そのうちの1つを本記事では紹介します。

サイドバーを非表示にする方法は、記事編集ページの右上にある設定⇒固定ページの順にクリックします。

ページタイプで「1カラム(フルワイド)」を選択するとサイドバーが非表示になります。

最後にトップページをブログ型からサイト型へ変更する設定を行いましょう。

ステップ⑦：ホームページ設定を行う

Cocoonのトップページをブログ型からサイト型への変更は、WordPress管理画面から行います。

以上ここまでがサイト型トップページの作成に必要最低限な7つのステップです。

ここからはサイト型トップページで非表示にしたい項目や追加したい機能を解説していきます。

Cocoonサイト型トップページの作成でおすすめな設定9つ

Cocoonのサイト型トップページの作成でおすすめな設定を9つ紹介します。

設定項目	特徴	重要度
タイトルの非表示		必須
読む時間と目次の非表示		必須
公開日・更新日の非表示		必須
SNSボタンの非表示		必須
鉛筆マーク+投稿者名の非表示		必須
クレジット表記の中央揃え		任意
カルーセル	トップページに記事カードをスライド形式で表示できる	任意
おすすめカード	トップページに画像バナー形式のリンクを表示できる	任意
通知メッセージ	ページ上部に重要なお知らせを分かりやすく伝えられる	任意

※上のリンクをクリックすると見たい場所へジャンプします。

各設定の完成イメージ略図

それぞれの設定を詳しく解説します。

タイトルを非表示にする

Cocoonでサイト型トップページの記事タイトルを非表示にします。

設定方法は、記事編集ページの右上にある設定⇒固定ページタブ内の「タイトルを表示しない」にチェックします。

もしタイトルが非表示にならない場合は、同ページ下部にある「カスタムCSS」に以下のコードを入力しましょう。

.entry-title{
  display: none;
}

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

Cocoonでサイト型トップページの読む時間と目次を非表示にします。

設定方法は、記事編集ページの右上にある設定⇒固定ページタブ内の「読む時間を表示しない」「目次を表示しない」にチェックします。

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

Cocoonでサイト型トップページの公開日と更新日を非表示にします。

設定方法は、記事編集ページ下部にある「カスタムCSS」に以下のコードを入力します。

.entry-title{
  display: none;
}

SNSボタンを非表示にする

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

設定方法は、WordPress管理画面のCocoon設定⇒SNSシェア/SNSフォロータブで行い、変更をまとめて保存をクリックします。

SNSシェアボタンを非表示にする場合…

SNSシェアタブ内にあるトップシェアボタン設定とボトムシェアボタン設定それぞれの表示ページで「フロントページ(インデックスページ)」のチェックを外す。

SNSシェアボタンが非表示にならない場合は、「投稿」のチェックも外してください。

SNSフォローボタンを非表示にする場合…

SNSフォロータブ内にあるフォローボタン設定の表示ページで「フロントページ(インデックスページ)」のチェックを外す。

SNSフォローボタンが非表示にならない場合は、「投稿」のチェックも外してください。

鉛筆マーク+投稿者名を非表示にする

Cocoonでサイト型トップページの鉛筆マークと投稿者名を非表示にします。

設定方法は、WordPress管理画面のCocoon設定⇒本文タブ内にある投稿関連情報で「投稿者名を表示する」のチェックを外し、変更をまとめて保存をクリックします。

クレジット表記を中央揃えにする

Cocoonでサイト型トップページのクレジット表記を中央揃えにします。

設定方法は、WordPress管理画面のCocoon設定⇒フッタータブ内にあるフッター表示タイプで「メニュー＆クレジット(中央揃え)」を選び、変更をまとめて保存をクリックします。

スライドショー(=カルーセル)を設定する

Cocoonのサイト型トップページにカルーセルを設定します。

設定方法は、WordPress管理画面のCocoon設定⇒カルーセルタブ内にあるアピールエリアの表示で「フロントページのみで表示する」を選び、変更をまとめて保存をクリックします。

同ページではスライドショーが自動的に送れたり、表示したい記事を「人気記事」「カテゴリー」「タグ」で指定したりの設定ができますよ。

ピックアップ記事(=おすすめカード)を設定する

Cocoonのサイト型トップページにおすすめカードを設定します。

設定方法は、WordPress管理画面のCocoon設定⇒おすすめカードタブ内にあるおすすめカードの表示で「フロントページのみで表示する」を選び、変更をまとめて保存をクリックします。

同ページでは画像バナー形式のリンクに記事タイトルを表示させたり、画像リンク間に余白を設けるなどの設定ができますよ。

おすすめカードの設定方法を詳しく知りたい場合は、下の記事を参考にしてください。

通知メッセージを設定する

Cocoonのサイト型トップページに通知メッセージを設定します。

設定方法は、WordPress管理画面のCocoon設定⇒通知タブ内にある通知表示で「通知エリアを表示する」にチェックし、変更をまとめて保存をクリックします。

同ページでは通知エリアに表示するメッセージにリンクを設定できたり、背景やテキストに色をつけることができますよ。

Cocoonトップページ全体のデザインとヘッダー&フッターのカスタマイズ

Cocoonでは以下の3カ所でもカスタマイズできます。

それぞれのカスタマイズ方法について詳しく知りたい方は、下の記事を参考にしてください。

当ブログ愛用「SWELL」のサイト型トップページはおしゃれ度が段違い！

WordPressテーマ「SWELL」のサイト型トップページは、オリジナル機能によりデザインが格段におしゃれです。

以下の画像は、SWELLで作成した当ブログのサイト型トップページの一部です。

Cocoonにはない、SWELLオリジナル機能であるフルワイドブロックやタブブロック、投稿リストブロックなどサイト型トップページの作成にもってこいの機能が盛りだくさん！

SWELLの魅力に気づき、当ブログでは2024年4月から「Cocoon」から「SWELL」へ乗り換えました。

Cocoon開発者のわいひらさんもCocoonからの乗り換え先としてSWELLをおすすめしていますよ。

Cocoonから他のテーマに乗り換える場合はSWELLな最も適しています。

引用：Cocoonから乗り換えるのにおすすめなテーマはこれ。注意点・変更方法など – Cocoon公式サイト

おしゃれなサイト型トップページを作りたい方は、SWELLをチェックしてみてください。

Cocoonサイト型トップページの作成でよくある質問

ここからはCocoonのサイト型トップページを作るうえでよくある質問に回答します。

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

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

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

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