【初心者向け】Cocoonのインデックスをカスタマイズする方法

Cocoon

 

「Cocoonのインデックスって何?」

「インデックスをカスタマイズしてサイトをおしゃれにしたい!」

 

こんな悩みを解決します。

 

この記事を書く僕は、ブロガー兼WEBライターとして稼ぐ大学生。

Twitter(kan_blogger)も運営中。

 

Cocoonのインデックスをカスタマイズして、サイトを見やすく・おしゃれにしたいですよね?

 

そこで今回は、Cocoonのインデックスをカスタマイズする方法と、それぞれの機能がどのように表示されるのか比較・解説します。

 

記事の内容
  • Cocoonのインデックスとは
  • インデックスをカスタマイズする方法
  • インデックスの表示形式を徹底比較

 

この記事を読み終わると、インデックスのカスタマイズが誰でも出来るようになり、おしゃれなサイトに進化します。

 

Cocoonのインデックスとは【カスタマイズする方法】

画像に alt 属性が指定されていません。ファイル名: undraw_Landing_page_re_6xev-1024x634.png

 

インデックスとは

一般的な意味としては、見出しのこと。

 

ここでは、WordpressのテーマにCocoonを使用している場合のトップページの記事一覧の表示方法と捉えてOKです。

今回は、その記事一覧の表示形式を変更する手順を紹介します。

 

Cocoonのインデックスをカスタマイズする方法

まずは「Cocoon設定」→「インデックス」へ移動します。

画像に alt 属性が指定されていません。ファイル名: 44e90879db587be9c1057add675360cb-1024x576.png

 

次は、「インデックス」の必要最低限な項目だけ解説していきます。

 

Cocoonインデックスの表示形式を徹底比較【おすすめも紹介】

画像に alt 属性が指定されていません。ファイル名: undraw_Scrum_board_re_wk7v-1024x713.png

 

今回解説する項目はこちら

  • フロントページタイプ
  • 表示カテゴリー
  • カテゴリーの順番
  • 記事の表示数
  • 並び順
  • カードタイプ

 

解説する内容

  • サイトにどのように反映されるのか?
  • おすすめの設定は?

 

Cocoonの設定は直感的に分かるので、説明は少なめにサクッと紹介します!

 

フロントページタイプ

 

一覧(デフォルト)

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-1-1-1024x831.png

タブ一覧

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-2-1024x898.png

カテゴリーごと

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-3-1024x843.png

カテゴリーごと(2カラム)

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-4-1024x903.png

カテゴリーごと(3カラム)

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-5-1024x648.png

 

フロントページタイプのおすすめ

  • タブ一覧:安っぽくない、小さく収まる
  • カテゴリーごと(2カラム):記事を沢山見せる事が出来る

 

表示カテゴリー

 

表示カテゴリーとは

選択したカテゴリーが、表示されます。

画像に alt 属性が指定されていません。ファイル名: 17f2f2fe8a23d6624472ccf5622de141.png

 

表示させるカテゴリーの数を「偶数」にしておくと、きれいに見えますよ。

画像に alt 属性が指定されていません。ファイル名: 723981ffad7cb426c3c53ec8069dee07.png

 

カテゴリーの表示の順番を並び替える場合はこちら

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-10-1024x159.png

好きなカテゴリーIDの一番左が、上から順番に並びます。

 

カテゴリーIDの調べ方

  1. ダッシュボードの「投稿」→「カテゴリー」
  2. カテゴリー名の上にカーソル合わせると左下に出てくる「ID=〇〇」

画像に alt 属性が指定されていません。ファイル名: f623e7a5412b7ea28cd16539939bee6e-1024x569.png

 

カテゴリーを何個か入れるなら、カンマ「,」も忘れずに!

 

カテゴリーごとに記事の表示数を変更する場合

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-9-1024x328.png

基本的に「4(デフォルト)」がおすすめです。

 

当サイトでは現時点(2020/09/12)で「新着記事:4個」「カテゴリー:5個」です。

 

好みで良いのね!!

 

並び順

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-12-1024x243.png

基本的に「投稿日」がおすすめです。

 

「更新日」だと順番がバラバラになるため、読者が何度か来た時に迷子になるからです。

 

カードタイプ

 

エントリーカード(デフォルト)

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-13.png

大きなカード(先頭のみ)

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-14-993x1024.png

大きなカード

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-15-936x1024.png

縦型カード2列

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-16-1013x1024.png

縦型カード3列

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-17.png

タイルカード2列

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-18-963x1024.png

タイルカード3列

画像に alt 属性が指定されていません。ファイル名: 2020-09-13-19.png

 

カードタイプのおすすめ

  • エントリーカード(デフォルト):スッキリして見やすい
  • タイルカード2列:そこそこ強調される
  • 大きなカード(先頭のみ):絶対に流したい渾身の記事がある時

 

今回紹介したおすすめは、あくまで主観です!最終的にはサイトに合った設定にしましょう!

 

まとめ:Cocoonのインデックスをカスタマイズして、見やすいサイトにしよう!

画像に alt 属性が指定されていません。ファイル名: screenshot-3.jpg

今回は、Cocoonのインデックスをカスタマイズする方法について紹介しました。

 

まとめると

「Cocoon設定」→「インデックス」からカスタマイズする

【フロントページタイプのおすすめ】

  • タブ一覧
  • カテゴリーごと(2カラム)

【カードタイプのおすすめ】

  • エントリーカード(デフォルト)
  • タイルカード2列
  • 大きなカード(先頭のみ)

 

Cocoonのインデックスは初心者でも、おしゃれで見やすいサイトを作ることができます。

 

サクッと、それっぽい雰囲気のあるサイトにしてみましょう!

 

人気記事

【未成年でもOK】アフィリエイト(ASP)6選【失敗しない選び方】

Cocoon
スポンサーリンク
シェアする
カンをフォローする
KanBlog

コメント

タイトルとURLをコピーしました