これより以降は、「サイト型トップページ」に「新着記事」を表示させない方法の説明です。
Cocoonは設定だけで、サイト型のトップページが簡単に作れます。
なので、読者に読んで欲しい記事を「カテゴリー」単位にまとめて、トップページに配置するなんてこともできます。
大きなところではトップページの機能に不満はないですが、ただ1点だけ、改善してほしいことがあるんですよね。
それは、「新着記事」が必ず表示される仕様であること。
典型的なブログだったら、「新着記事」は必須表示でもいいかなと思いますが、サイト型のトップページだと、「新着記事」を表示してほしくない場合もあると思うんですよね。
「新着記事」が他のカテゴリーの後ろの方に表示できるのであればまだいいんですが、必ず先頭に表示される仕様なのがちょっと悩ましいところです。
そこで、今回は暫定対策として、CSSを使って「新着記事」が非表示となる方法を紹介します。
CSSで「新着記事」を非表示にできるフロントページタイプ
さっそく、「新着記事」を非表示にできるCSSの追加方法を紹介したいところですが、その前に制限事項について説明します。
このCSSは、Cocoonのトップページの設定（「Cocoon設定」→「インデックス」）のフロントページタイプが「カテゴリごと」のみ機能するということです。
※「一覧（デフォルト）」は、そもそもサイト型トップページの表示形式ではないので、ここでは関係ない指定となります。
子テーマのstyle.cssに「新着記事」を非表示にするCSSを追加する
では、「新着記事」を非表示にするCSSを追加してみましょう！
ここでは、「子テーマ」のstyle.cssに追加することを前提としています。
「子テーマ」って何？って人は、Cocoonの以下の公式サイトを確認して、「子テーマ」の有効化を行ってください。
Cocoonも日々テーマのバージョンアップを行っており、バージョンアップすると「親テーマ」が置き換わります。
その関係で、「親テーマ」に追加したCSSがクリアされるので、バージョンアップしても追加したCSSがそのまま残る「子テーマ」を有効にするのがおすすめです。
ではCSSの追加方法です。
（01） WordPress管理画面の左メニュー「外観」（①）→「テーマファイルエディター」（②）とクリック。
（02） 以下の「注意！」画面が出た場合、「理解しました」をクリック。
（03） 「編集するテーマを選択」のところを「Cocoon Child」に切り替えて（①）、「選択」（②）をクリックし、最後に「スタイルシート（style.css）」（③）をクリックします。
（04） 「スタイルシート（style.css）」の編集画面になるので、一番下に以下のCSSをコピー＆ペーストで貼り付けて、「ファイルを更新」をクリック。
/* 「新着記事」を非表示にするCSS */
div#list-wrap .list-new-entries {
display: none;
}
これで、「新着記事」を非表示にするCSSが「子テーマ」のスタイルシートに追加されたので、トップページで「新着記事」が非表示なったことを確認します。
下の画像の、右側がCSSを追加した後で、「新着記事」が非表示になっていることがわかります。
今回紹介した「新着記事」を非表示にするCSSは「タブ一覧」では使えませんが、「タブ一覧」はカテゴリーの数が最大３つまでの制限があるため、そんなに利用されないと思っています。
なので、CSSの制限による影響はそんなにないでしょう。
もし、サイト型トップページを作った時に、「新着記事」を隠したい場合は、今回紹介した方法をぜひ試してください！