【Blog Creator紹介記事コンテスト】で優秀賞をいただきました!ボタン

【Cocoon】「新着記事」を非表示にする(トップページ編)

【Cocoon】「新着記事」を非表示にする(トップページ編)

この記事では、Cocoonのトップページに表示される「新着記事」を非表示にする手順について、くわしく解説していきます。

テーマはCocoonを対象としています。

「CTRL」+「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます!

Cocoonのトップページはいろんなタイプを指定することができますが、知らないうちに「新着記事」のカテゴリーが表示されていることがあります。

この記事では、トップページに表示されている「新着記事」を非表示にする2つの方法を解説しているので、非表示にしたい場合は、ぜひ参考にしてください!

関連記事

サイドバーにある「新着記事」、「最近の投稿」ウィジェットを非表示にする方法は、以下の記事を参考にしてください。

目次

トップページの「新着記事」を非表示にする

トップページの「新着記事」を非表示にする2つの方法を、それぞれ紹介します。

フロントページタイプを一覧形式に変更する

これはトップページのフロントページタイプを誤って設定したために、以下のように意図しないで「新着記事」が表示されてしまったパターンです。

これはトップページのフロントページタイプを変更すればよいです。

トップページに「新着記事」が表示されている

管理画面メニュー「Cocoon設定」の「Cocoon設定」(①)をクリック。

Cocoon設定画面に移動

「インデックス」(①)をクリックし、フロントページタイプでは「一覧(デフォルト)」(②)にチェックをつけて「変更をまとめて保存」をクリック。

フロントページタイプを一覧形式に変更する

以下のように、「新着記事」が非表示になります。

フロントページタイプを一覧形式に変更する

フロントページタイプでは「一覧(デフォルト)」に変更したことで、「新着記事」が表示されなくなりました。

CSSで「新着記事」のみ非表示にする

続いては、フロントページタイプを「カテゴリーごと」にした時に、先頭に無条件に表示される「新着記事」を非表示にするパターンです。

「新着記事」のみ非表示にする

こっちのパターンは、先頭の「新着記事」のみを非表示にするCSSを追加することで対応します。

CSSの追加には2つの方法がありますが、以下の表に書いている特徴をよく読んで、どちらかの方法で対応してください。

CSSの追加方法特徴
カスタマイザーで追加Cocoonをバージョンアップすると追加CSSはクリアされる。
→ バージョンアップのたびに、再追加が必要
テーマファイルエディタで追加子テーマにCSSを追加する。
子テーマのインストール→有効化の作業が必要。
Cocoonのバージョンアップがあっても追加CSSは残る(クリアされない)
CSSの追加方法と特徴

表にも書いていますが、「カスタマイザーで追加」は、CocoonのバージョンアップのたびにCSSの再追加が発生します。

「テーマファイルエディタで追加」は、子テーマのインストール→有効化という手間がかかる作業が発生しますが、一度子テーマを有効化すれば、Cocoonのバージョンアップの影響を受けずに追加したCSSはずっと残ってクリアされません。

もちろん、既に子テーマを使っている場合は有効化の作業は必要ありません。

今後、ブログを運営していくと、スキンの適用や、デザインの変更(CSS追加)などを行うことも考えられるため、「テーマファイルエディタで追加」(子テーマ有効化)をおすすめします。

カスタマイザーでCSSを追加

カスタマイザーでCSSを追加する方法です。

管理画面メニュー「外観」の「カスタマイズ」(①)をクリック。

カスタマイザーの画面に移動

「追加CSS」をクリック。

カスタマイザーでCSSを追加して「新着記事」のみ非表示にする

「追加CSS」をクリック。

カスタマイザーでCSSを追加して「新着記事」のみ非表示にする

上にある「公開」をクリック。

「新着記事」のみ非表示にする
カスタマイザーでCSSを追加して「新着記事」のみ非表示にする

これで、先頭の「新着記事」が表示されなくなります。

テーマファイルディタでCSSを追加

テーマファイルエディタでCSSを追加する方法です。

「子テーマ」のstyle.cssにCSSを追加することが前提のため、子テーマを使っていない場合は、子テーマのインストール/有効をしてください。

以下のCocoonの公式サイトが参考になります。

では、テーマファイルエディタでのCSSの追加方法です。

WordPress管理画面の左メニュー「外観」(①)→「テーマファイルエディター」(②)とクリック。

テーマファイルエディタ―に移動

以下の「注意!」画面が出た場合、「理解しました」をクリック。

テーマファイルエディタ―CSSを追加して「新着記事」のみ非表示にする

「編集するテーマを選択」のところを「Cocoon Child」に切り替えて(①)、「選択」(②)をクリックし、「スタイルシート(style.css)」(③)をクリックします。

テーマファイルエディタ―CSSを追加して「新着記事」のみ非表示にする

左の編集画面の一番下に、以下のCSSをコピー&ペーストで貼り付けて「ファイルを更新」をクリック。

/* 「新着記事」を非表示にするCSS */
div#list-wrap .list-new-entries {
  display: none;
}
テーマファイルエディタ―CSSを追加して「新着記事」のみ非表示にする
テーマファイルエディタ―CSSを追加して「新着記事」のみ非表示にする

これで、先頭の「新着記事」が表示されなくなります。

「新着記事」を非表示にできないページタイプ

トップページはフロントページタイプとしていくつかのタイプが選択できますが、CSSを使っても「新着記事」を非表示にできないタイプがあります。

「一覧(デフォルト)」、「タブ一覧」はCSSで非表示にできない

フロントページタイプが「タブ一覧」の場合は、「新着記事」を非表示にできません。

※「一覧(デフォルト)」は、「新着記事」などのカテゴリーが表示されないタイプのページです。

フロンページタイプで「新着記事」を非表示にできないタイプ

まとめ

ここまで、トップページで「新着記事」を非表示にする方法を解説しましたが、「新着記事」を非表示にするパターンはいくつかあるので、どのパターンに該当するかを確認してから、ここで紹介している方法を試してみてください!

関連記事

サイドバーにある「新着記事」、「最近の投稿」ウィジェットを非表示にする方法は、以下の記事を参考にしてください。

「CTRL」+「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次