この記事では、Cocoonのトップページに表示される「新着記事」を非表示にする手順について、くわしく解説していきます。
テーマはCocoonを対象としています。
Cocoonのトップページはいろんなタイプを指定することができますが、知らないうちに「新着記事」のカテゴリーが表示されていることがあります。
この記事では、トップページに表示されている「新着記事」を非表示にする2つの方法を解説しているので、非表示にしたい場合は、ぜひ参考にしてください！
「新着記事」を非表示にする２つの方法
トップページの「新着記事」を非表示にする
トップページの「新着記事」を非表示にする２つの方法を、それぞれ紹介します。
フロントページタイプを一覧形式に変更する
これはトップページのフロントページタイプを誤って設定したために、以下のように意図しないで「新着記事」が表示されてしまったパターンです。
これはトップページのフロントページタイプを変更すればよいです。
管理画面メニュー「Cocoon設定」の「Cocoon設定」（①）をクリック。
「インデックス」（①）をクリックし、フロントページタイプでは「一覧（デフォルト）」（②）にチェックをつけて「変更をまとめて保存」をクリック。
以下のように、「新着記事」が非表示になります。
CSSで「新着記事」のみ非表示にする
続いては、フロントページタイプを「カテゴリーごと」にした時に、先頭に無条件に表示される「新着記事」を非表示にするパターンです。
こっちのパターンは、先頭の「新着記事」のみを非表示にするCSSを追加することで対応します。
CSSの追加には２つの方法がありますが、以下の表に書いている特徴をよく読んで、どちらかの方法で対応してください。
| CSSの追加方法 | 特徴 |
|---|---|
| カスタマイザーで追加 | Cocoonをバージョンアップすると追加CSSはクリアされる。 → バージョンアップのたびに、再追加が必要 |
| テーマファイルエディタで追加 | 子テーマにCSSを追加する。 子テーマのインストール→有効化の作業が必要。 Cocoonのバージョンアップがあっても追加CSSは残る（クリアされない） |
表にも書いていますが、「カスタマイザーで追加」は、CocoonのバージョンアップのたびにCSSの再追加が発生します。
「テーマファイルエディタで追加」は、子テーマのインストール→有効化という手間がかかる作業が発生しますが、一度子テーマを有効化すれば、Cocoonのバージョンアップの影響を受けずに追加したCSSはずっと残ってクリアされません。
もちろん、既に子テーマを使っている場合は有効化の作業は必要ありません。
今後、ブログを運営していくと、スキンの適用や、デザインの変更（CSS追加）などを行うことも考えられるため、「テーマファイルエディタで追加」（子テーマ有効化）をおすすめします。
カスタマイザーでCSSを追加
カスタマイザーでCSSを追加する方法です。
管理画面メニュー「外観」の「カスタマイズ」（①）をクリック。
「追加CSS」をクリック。
「追加CSS」をクリック。
上にある「公開」をクリック。
テーマファイルディタでCSSを追加
テーマファイルエディタでCSSを追加する方法です。
「子テーマ」のstyle.cssにCSSを追加することが前提のため、子テーマを使っていない場合は、子テーマのインストール／有効をしてください。
以下のCocoonの公式サイトが参考になります。
では、テーマファイルエディタでのCSSの追加方法です。
WordPress管理画面の左メニュー「外観」（①）→「テーマファイルエディター」（②）とクリック。
以下の「注意！」画面が出た場合、「理解しました」をクリック。
「編集するテーマを選択」のところを「Cocoon Child」に切り替えて（①）、「選択」（②）をクリックし、「スタイルシート（style.css）」（③）をクリックします。
左の編集画面の一番下に、以下のCSSをコピー＆ペーストで貼り付けて「ファイルを更新」をクリック。
/* 「新着記事」を非表示にするCSS */
div#list-wrap .list-new-entries {
display: none;
}
「新着記事」を非表示にできないページタイプ
トップページはフロントページタイプとしていくつかのタイプが選択できますが、CSSを使っても「新着記事」を非表示にできないタイプがあります。
「一覧（デフォルト）」、「タブ一覧」はCSSで非表示にできない
フロントページタイプが「タブ一覧」の場合は、「新着記事」を非表示にできません。
※「一覧（デフォルト）」は、「新着記事」などのカテゴリーが表示されないタイプのページです。
ここまで、トップページで「新着記事」を非表示にする方法を解説しましたが、「新着記事」を非表示にするパターンはいくつかあるので、どのパターンに該当するかを確認してから、ここで紹介している方法を試してみてください！