【コピペで解決】トップページのカテゴリーラベルを非表示にする方法

Cocoon
ニック
ニック

ブログサイトのトップページ。カテゴリー表示がアイキャッチ画像にかかってしまって見づらいな。カテゴリー表示を消せたらすっきりするのにな。

本記事では、以下のような悩みを解決します。

  • トップページのカテゴリー表示が、アイキャッチ画像にかかってしまう
  • カテゴリー表示を非表示にしたい

この記事を書いた人

スポンサーリンク

【Cocoon】トップページのカテゴリーラベルを非表示にする方法

【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を追加する
  • CSSの追加は「外観」→「カスタマイズ」から行う
エヌさん
エヌさん

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

ニック
ニック

うん!とても簡単だったので、これを機に他のCSSも追加して、Cocoonのデザインをカスタマイズしてみようと思う!

最後までお読みいただきまして、どうもありがとうございました。

人気記事

>>1000万円貯めました【手取り20万円】節約とお金を増やす方法を公開

>>失敗しない投資のはじめ方|これだけは回避しよう5選

>>【ブログ開始1か月】PV数・収益を公開|アドセンスは?ASPは?

コメント

タイトルとURLをコピーしました