2.0 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です。

38 COMMENTS

たなかまさし 2019/09/30

カテゴリートップのタイトル部分を消したい

白い枠でホームと表示されている囲みなのですが、タイトル文字の変更はできるのですが、スペースが大きいので、そのものを消して、ホーム のぱんくずだけ残したいのですが、方法はありますでしょうか。

回答を見る
ナナミライ 2019/06/26

カテゴリーラベルの位置を変えたい

お世話になっております。 カテゴリーラベルがアイキャッチの文字とかぶってしまうためデフォルトの左上から変更したいです。どのように変更するかご教示いただけますでしょうか。 (削除は別コメントでわかったのですが場所の変更は確認できず…) お手数ですがよろしくお願いします。

回答を見る
瑠璃 2019/05/21

カテゴリーラベルの色が変わらない

申し訳ないです。何度やっても色が変わらないので対処法を教えてください。 外観→テーマエディター→SANGO Child: スタイルシート (style.css)に #main .catid1 { background: #009933; } を書き込んでも色が変わりません。 catid〇の数字は別のカテゴリの数字を入れても変わりません。 #main .catid1 { background: #0…

回答を見る
上田愛 2019/03/31

カテゴリートップページのデザインを変える方法

アップデートありがとうございます!素敵なテーマの上に、頻繁にアップデートもしてくださり、本当にラッキーだと感じています。 さて、質問がありコメントさせていただきます。 全25回ほどの記事で、英語の発音記号を学習できるようにしたいと考えています。 https://saruwakakun.com/html-css/basic カテゴリーのトップページのデザインをこのページのようにするにはどうすれば良い…

回答を見る
パドー 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

Google Analyticsを導入したい

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

回答を見る
AKIRA 2017/11/28

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

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン