
コードは使いたくない
トップページに時間をかけたくない
簡単にかえたい
そのような方に役立つ内容の記事です。
最後までよろしくお願い致します。
この記事を読むと解決できること
- 簡単にサイト型のトップページに変更できる
- サイトが見やすくなる
- 記事が見つけやすい
- 滞在時間が増える可能性
最大の魅力は簡単に変更できることです。コードなんてわからない、だけど無料テーマで頑張りたい方に役立つ記事ないようです。無料テーマCocoonを最大限使いましょう。
スマホからの表示もチェックしながら作業することがおすすめです。スマホ準備しましょう。
ブログ型・サイト型違いは「カテゴリー表示」
サイト型、ブログ型がありますが大きな違いは「カテゴリー表示」です。選ぶ「スキン」でも変わってきますので注意してください。
サイト型に変更後スキンも変更してみてください。カテゴリー別、ブログカードの表示など少し変わる部分があります。
なぜサイト型が人気なのか?理由があります。

Cocoonトップページがブログ型の場合のデメリット
デメリット
- サイトの記事数が増えてきて、記事がうもれてしまう
- 記事を見つけにくい
- ただブログカードが並ぶだけ
- 閲覧しにくい
- サイトの見栄えが良くない
Cocoonトップページがサイト型の場合のメリット
- 記事を検索できる
- ただ並ぶブログカードよりデザイン性が高く見える
- 整理整頓されたサイトにみえる
- 読者の方の滞在時間が増える
目的の記事にたどり着かいないとすぐに離脱されてしまします。サクッと見やすいサイトに変更しましょう。


※もっと見るボタンから興味があるカテゴリーページにいけるので読者の方にも記事が見つけやすいサイトになります。
それでは変更していきましょう。
Cocoonサイト型・簡単な方法
※Cocoonは2022現在のバージョンを使用します。
- WordPress管理画面・投稿からカテゴリー。カテゴリーを確認。カテゴリー分けしていない方はこちらの画面で設定可能。Google検索のことを考えるとまずは2つか3つ程度が良いとされている。あまり細かく分けすぎない。

2.Cocoon設定から【インデックス】タグをクリック。こちらからトップページの表示方法を変更可能。

3.フロントページタイプ表示形式から選びます。カテゴリー2カラムが一番見栄えが良い表示方法。(スマホだと2カラムも1つ表示になります。)

以上の設定で保存して終了です。簡単ですね☆

カテゴリーの上・ブログおすすめカード表示方法
Cocoon設定【おすすめカード】こちらから変更可能。当サイトはフロントページのみに設定中。お好みで選択してください。このおすすめカードは目立つので「アイキャッチ」の印象を揃えることをおすすめします。
- Canvaで画像作成
- おすすめ4枚選ぶ
- 外観メニューから、投稿からドラッグして4枚選ぶ
※外観からの選択になります。注意しましょう。

設定は以上。こちらも簡単にトップページをカスタマイズできちゃいますね。※この変更も全体スキンの選択で変わるので、バランスをみて変更してください。
Cocoonトップページ・ヘッダーメニュー
サイト型、ブログカード表示を変更したので次は【ヘッダーメニュー】も表示させます。一番上におススメ記事や固定ページを表示させることが目的です。
- Cocoon設定画面
- 外観
- メニュー
- サイトトップに表示させたい場合はヘッダーメニュー、モバイル版の表示も選択可能
- 新しいメニューを作成
- 新しいメニューに表示させたい、投稿記事、固定ページを選択。メニューに追加する
- 保存をクリック
- 表示を確かめる
↓下の画像はフッター表示になります。
4つの固定ページをフッターに表示しています。
- TOP
- プライバシーポリシー
- お問い合わせ
- サイトマップ
※この4つは読者に一番伝えたい固定ページではないので一番下”フッター”表示にしています。読者の方に見てもらいたいページはできるだけ上”ヘッダー”がおすすめです。できるだけスムーズにサイトを見て貰う為に配置を考えよう。


Cocoonトップページ・アイキャッチ画像のバランス
トップページをカスタマイズすると、サイトに並ぶアイキャッチ画像が気になってきます。カラーや文字のサイズ、バランス、統一感など・・・キャラクターはこれでいいのか。ブログサイトを運用するとやることがどんどん増えて、手が回らなくなります。
ブログのアイキャッチ画像は時間のある時に少しずつリライト。アイキャッチ画像はブログ記事で一番目立つので、余裕がある時に画像を沢山作成して保存しておきましょう。
アイキャッチ画像作成はもちろん【Canva×O-DAN】です☆合わせてお読みください。
スライドショー「カルーセル」
トップページエリアにはカルーセル機能もおすすめです。ただし、「おススメカード」と併用すると少しうるさくなるので、考えて表示させましょう。
- Cocoon設定
- カルーセル
- 表示する場所を決める
- 表示枚数を決める
- 保存
トップページ以外の場所で表示させることも可能です。色々変更してみましょう。

【2022最新版】Cocoonトップページをサイト型に変更!簡単解説まとめ
- ブログサイトにはブログ型とサイト型がある
- カテゴリーは多すぎないこと
- 設定は簡単、Cocoon設定、インデックス、2カラム
- 伝えたい記事は、ヘッダーへ
- プライバシーポリシー等4つの固定ページはフッターへ
- アイキャッチ画像は大切。まとめて画像作成してリライト
- カルーセルはスライドショー

コメント