新しい記事を投稿したら、前に書いた「良い記事」がトップページから消えちゃった💦
デフォルトではトップページはカテゴリーに関係なく新着順に表示するので、「有益な記事」の後に細かい記事などを投稿すると有益な記事がトップページから消えてしまいます。
本当に「良い記事」ならばトップページから消えても「検索」で見に来てもらえるかもしれませんが、せっかくなら良い記事は目につくように配置しておきたいですね。
ということでトップページの表示の設定をします。
トップページのカスタマイズはいろいろな方法があり、「コード」まで操作するつもりならかなりの自由度で自分好みにすることができますが、ここではCocoon設定で操作できる範囲での変更を行います。
使用スキンは「COLORS（BLUE）」です。
表示例
まずこの設定でどのような表示になるのか比べてみます。
実際に設定する時に部分的にプレビューが出ますが、全体の感じをつかんでもらえればと思います。
①デフォルト（初期状態）
横型１列でこのような表示になっています。
②タブ一覧
「タブ一覧」を選択すると、赤枠内のようなボタンが表示され、視聴者さんが見たいタブ（カテゴリー）をクリックして表示させることができます。
③カテゴリごと
新着の下にカテゴリの記事の一覧が表示されます。
④カテゴリごと（2カラム）
カテゴリが１カラムだと表示が縦に長くなってしまいますので2カラムを選択しました。
3カラムも選択できますが表示が細かくなりますのでここでは割愛します。
⑤新着記事を横型2列の表示にする
新着記事の表示に間延び感があったので、縦型2列の表示にするとこうなります。
参考に縦型と横型を並べてみたところ使う面積は変わりませんでした。
他に「タイルカード」の選択ができるのですが、サムネイルのサイズなどによって並びが不均一になってしまうので、個人的に好みではないので試していません。
設定の手順
表示の方法はいくつかありますが設定は全て手順の中の選択ですので、手順を一通り図解します。
①Cocoon設定＞インデックスを選択
②フロントページタイプ設定
ここでカテゴリーごとの表示の仕方を選択します。
タブ一覧・・・前項の②
カテゴリごと・・・前項の③
カテゴリごと（2カラム）・・・前項の④
表示させるカテゴリーをここで選択します。
ここではメインカテゴリを選択していますが、サブカテゴリに注目して欲しい場合はサブだけを選べば一覧表示される記事をさらに絞り込むことができます。
③並び順を選択
記事一覧を表示する並び順は
- 投稿日（降順）・・・新しい順
- 更新日（降順）
- ランダム
から選ぶことができますが、ここの選択は新着記事にもカテゴリ一覧にも全てに適用されます。
ランダムにするとせっかくの新着記事が埋まってしまうこともあるので気を付けてください。
④カードタイプ
新着記事のカードのタイプを設定します。
丸印の右のマークを触るとプレビューが出ますので見てみてください。
ただし「大きなカード」は本当にかなり大きいです。
ここでは前項で述べたように「縦型カード2列」を選択しています。
⑤カードの枠線の表示設定を行います。
⑥自動生成抜粋文字列
ブログカードの文章（本文からの抜粋を表示している：下図赤枠）の文字数を設定します。
ここではデフォルトの120文字で表示しています。
120文字は当然超えますので「抜粋分」の最後は「尻切れ」になります。
その時の表示を設定します。
半分くらいにしても感覚的には表示エリアが小さくなったようには思えなかったので、コンパクトに表示したいなら思い切って０文字にするくらいのつもりの方が良いかもしれません。
「表示しない」場合はここで0文字を選択しても文字は出なくなりますが、次項⑦でスニペットの表示という設定で非表示の選択もできます。
⑦枠内の表示の設定
スニペット（抜粋文）の表示と、日付の設定を行います。
スニペットはＰＣ版とスマホ版でそれぞれ設定ができますので、表示の大きさやバランスなどを考慮して設定すると良いと思います。
最後に除外カテゴリーの選択がありますが、ここで除外すると一覧に表示されないだけでなく一切表示しなくなるようですので気を付けてください。
ここまで設定が終わったら「まとめて保存」をして終了です。
まとめ
カテゴリーのカードが並んでいて、クリックしたらカテゴリーごとの一覧が出る、みたいな設定ができたらなと思って始めましたが、新着はやはり見てもらいたいのでとりあえずCocoonの設定で良いかと思います。
新着表示では埋まってしまう記事があるかも知れませんが、トップページでカテゴリーの表示に残るというだけでも安心します。
