ブログサイトのトップページ。カテゴリー表示がアイキャッチ画像にかかってしまって見づらいな。カテゴリー表示を消せたらすっきりするのにな。
本記事では、以下のような悩みを解決します。
- トップページのカテゴリー表示が、アイキャッチ画像にかかってしまう
- カテゴリー表示を非表示にしたい
✓ この記事を書いた人
【Cocoon】トップページのカテゴリーラベルを非表示にする方法
トップページからカテゴリー表示を消す方法を試してみました。
カテゴリーを非表示にしてみるとアイキャッチ画像の文字が見えて、トップページもすっきりしました。
BEFORE
AFTER
同じような悩みを持つ方もいるのではないかと思い、手順をまとめました。
実は５分で非表示にすることができます。
カテゴリーラベルを非表示にする手順
カテゴリーラベルを非表示にする手順を解説いたします。
CSSを追加することで、カテゴリーラベルを非表示にすることができます。
CSSとは
「CSS」とは何ですか？
CSSは、Cascading Style Sheetsの頭文字を取った言葉だよ。CSSを追加することで、サイトの見栄えを簡単に変更することができるよ。
CSSを追加することで、サイトのデザインを簡単に変更することができます。実際に試してみましょう。
ワードプレスの設定
ワードプレスのダッシュボードにアクセスします。
「外観」→「カスタマイズ」をクリックします。
CSS を追加しよう
「追加 CSS」をクリックします。
以下をコピーして、追加 CSS に貼り付けます。
.cat-label {
display: none;
}このような感じです。
追加したCSSがどういう意味なのか、教えてください。
「カテゴリーラベルを非表示に」という意味だよ。
✓ cat-label → カテゴリーラベル
✓ display: none → 非表示
貼り付けられたら「公開」をクリックします。
「公開済み」と表示されれば完了です。
カテゴリーラベルが非表示になったことを確認しよう
自サイトにアクセスして、カテゴリーラベルが非表示になったことを確認します。
カテゴリーラベルが非表示になったことを確認できました。
まとめ：トップページのカテゴリーラベルを非表示にする方法
さいごにこの記事のまとめです。
本当に簡単にカテゴリーラベルを消すことができたね！
うん！とても簡単だったので、これを機に他のCSSも追加して、Cocoonのデザインをカスタマイズしてみようと思う！
最後までお読みいただきまして、どうもありがとうございました。
✓ 人気記事
コメント