Ver1.7.8 Released !

トップページ記事一覧のカテゴリーラベルの色を変える方法

「トップページの記事一覧のサムネイル画像上に表示されるカテゴリーラベルの色を、カテゴリー別に変えたい」とのご要望があったので、その方法を解説します。

ラベルの場所

実はこんなときのためにテーマ側であらかじめ仕込みは行ってあります。CSSだけで指定できるので、ぜひお試しください。

記事一覧のカテゴリーラベル色を変える方法

それでは早速、手順を解説していきます。

手順1:色を変えたいカテゴリー名の上で右クリック

カテゴリー名を右クリック

まずは、トップページ記事一覧のカテゴリーラベルの真上で右クリックします。

手順2:検証をクリック

検証をクリック

表示されるメニューの中から「検証」を選びます。ブラウザによっては「要素の検査」や「調査」という名前になっている場合もあります。

手順3:表示されるHTMLの中から「catid◯◯」を見つける

catidを調べる

これでクリックした部分(もしくはその周辺)のHTMLが表示されます。その中に<a class="dfont cat-name catid◯◯">という表示があると思います。このcatid◯◯がそのカテゴリーのラベル用のクラス名です。このクラス名に対して、CSSで色を変える指定をします。

手順4:CSSで色指定

style.css
#main .catid◯◯ {
    background: 色コード;
}

上記のCSSを子テーマのstyle.cssなどに貼り付けます。◯◯には、さきほど調べたカテゴリーラベルのクラス名(半角数字)を入れます。色コードは、HTMLカラーコードなどで調べることができます。例えば、background: #f89174;というように入力すれば良いですね。

注意
カスタマイズ実施後は、ブラウザのキャッシュを削除しましょう(でないとお使いのブラウザに反映されません)。

カラーコードは「検証モード」の中で調べたり、テストすることもできます。詳しくはこちらの記事をどうぞ。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

他のカテゴリーのラベル色を変える場合にも、同様の手順を行えばOKです。

27 COMMENTS

パドー 2019/02/24

お世話になっております。
サイドバーにおけるカテゴリーの親カテゴリーの先頭にFont Awesomeのアイコンを表示させるにはどうしたらよいでしょうか、お教えください。

回答を見る
TAKA 2018/06/22

SANGO購入させていただきました。質問なのですが、親カテゴリーページ内のサムネに子カテゴリーラベルを表示できますでしょうか?

例えば、スポーツカテゴリー内で、「野球」「サッカー」などの子カテゴリーのラベルを表示させたい、という感じです。

ご教示いただけますと幸いです。

回答を見る
りんご 2018/05/12

こんにちは!SANGO素晴らしすぎです!開発して頂いてありがとうございます!
質問です!
トップページにカテゴリーラベルが表示されません・・・
最初は表示されていた気がするのですが・・・汗
あと、人気記事の左上のかわいい数字も表示されません。
消してしまったのでしょうか??
お手数おかけしますが御教示お願いします。

回答を見る
CM 2018/03/05

カテゴリーラベルの色は変更できたのですが、マウスオーバーした時にデフォルト設定のようにラベルの色が灰色に反転しません。お手数ですが灰色に反転させる設定を教えて頂きたく。

回答を見る
ちよこ 2018/02/28

トップページにスライドギャラリーを挿入したいために、
トップページを固定ページにしました。
しかし、固定ページにすると新着記事が表示されないので、
ショートコードで挿入しましたが、カードタイプでの表示がされません…。
新着記事をカードタイプで表示させるショートコードはありますか?
もしくはその方法があればご教示いただきたいです。
よろしくお願いいたします。

回答を見る
2018/02/10

カテゴリーラベルそのものを非表示にする方法をご教示いただけないでしょうか。

回答を見る
TS 2018/02/07

お世話になります。
記事一覧のカテゴリーラベルがそもそも表示されません。

現状、
①メニューに「テスト」カテゴリを追加
②記事を「テスト」カテゴリとして投稿
③②の記事が、「テスト」メニューの一覧に表示されるが、カテゴリーラベルが表示されない。

以上、よろしくお願い致します。

回答を見る
Taroimo Panda 2018/02/04

以下、1、2を実装す方法はありますでしょうか?

1.トップページ記事一覧のカテゴリーラベルから該当カテゴリーへのリンクを削除
2.トップページ記事一覧のカテゴリーラベルにnofollowを付与

回答を見る
kiriko 2017/12/20

こんにちは!
どこで質問していいかわからないので
こちらでお聞きします。
アクセス解析ですが、どこにコードを貼ればいいかわかりません。
テーマの編集でしょうか?
どこかに書いてあったらすみません、見つけられませんでした。
よろしくお願いします。

回答を見る
AKIRA 2017/11/28

記事一覧をTOPページ以外に表示させるにはどうすれば良いでしょうか?
SANGOのテンプレートをHP風に使用しているので、現在のトップページは固定ページになります。

回答を見る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です