
これより以降は、「サイト型トップページ」に「新着記事」を表示させない方法の説明です。
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は「タブ一覧」では使えませんが、「タブ一覧」はカテゴリーの数が最大3つまでの制限があるため、そんなに利用されないと思っています。
なので、CSSの制限による影響はそんなにないでしょう。
もし、サイト型トップページを作った時に、「新着記事」を隠したい場合は、今回紹介した方法をぜひ試してください!