
ブログサイトのトップページ。カテゴリー表示がアイキャッチ画像にかかってしまって見づらいな。カテゴリー表示を消せたらすっきりするのにな。
本記事では、以下のような悩みを解決します。
- トップページのカテゴリー表示が、アイキャッチ画像にかかってしまう
- カテゴリー表示を非表示にしたい
✓ この記事を書いた人
【Cocoon】トップページのカテゴリーラベルを非表示にする方法

トップページからカテゴリー表示を消す方法を試してみました。
カテゴリーを非表示にしてみるとアイキャッチ画像の文字が見えて、トップページもすっきりしました。
BEFORE

AFTER

同じような悩みを持つ方もいるのではないかと思い、手順をまとめました。
実は5分で非表示にすることができます。
カテゴリーラベルを非表示にする手順

カテゴリーラベルを非表示にする手順を解説いたします。
CSSを追加することで、カテゴリーラベルを非表示にすることができます。
CSSとは

「CSS」とは何ですか?

CSSは、Cascading Style Sheetsの頭文字を取った言葉だよ。CSSを追加することで、サイトの見栄えを簡単に変更することができるよ。
CSSを追加することで、サイトのデザインを簡単に変更することができます。実際に試してみましょう。
ワードプレスの設定
ワードプレスのダッシュボードにアクセスします。
「外観」→「カスタマイズ」をクリックします。

CSS を追加しよう
「追加 CSS」をクリックします。

以下をコピーして、追加 CSS に貼り付けます。
.cat-label {
display: none;
}
このような感じです。


追加したCSSがどういう意味なのか、教えてください。

「カテゴリーラベルを非表示に」という意味だよ。
✓ cat-label → カテゴリーラベル
✓ display: none → 非表示
貼り付けられたら「公開」をクリックします。

「公開済み」と表示されれば完了です。

カテゴリーラベルが非表示になったことを確認しよう

自サイトにアクセスして、カテゴリーラベルが非表示になったことを確認します。

カテゴリーラベルが非表示になったことを確認できました。
まとめ:トップページのカテゴリーラベルを非表示にする方法

さいごにこの記事のまとめです。

本当に簡単にカテゴリーラベルを消すことができたね!

うん!とても簡単だったので、これを機に他のCSSも追加して、Cocoonのデザインをカスタマイズしてみようと思う!
最後までお読みいただきまして、どうもありがとうございました。
✓ 人気記事
コメント