Ver1.6 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です。

30 Comments

やま

インフィード広告のカードタイプの設定がうまくできません。
pxや画像比などの設定を知りたいです。

返信する
サルワカくん

pxも画像比も決まっていません。レスポンシブデザインなので、画面幅によってカードのサイズは変わります。

返信する
AKIRA

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

返信する
サルワカくん

Ver1.3.1〜ショートコードで新着記事を好きな数だけ出力できるようになりました。
詳しくはこちらをご覧くださいませ。

返信する
石倉清一

お世話になっております。
トップページ記事一覧のベージも1カラムのデザインにしたいのですが、カスタマイズ方法をご教示いただけないでしょうか。
サイドバーを全て外してもサイドバー分のスペースが空くので空いたところにも記事を並べたいと思っております。

返信する
サルワカくん

けっこう複雑なカスタマイズが必要になるので、また時間が出来たらカスタマイズ記事を書く事を検討させて頂きます。

返信する
kiriko

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

返信する
サルワカくん

外観⇒カスタマイズ⇒サイトの基本設定⇒Google Analytics設定にアナリティクスのコードを貼るところがあります。
よろしくお願い致します。

返信する
Taroimo Panda

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

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

返信する
サルワカくん

内部リンクを調整されるのですね。
例えば、1の場合下記のようにするとOKです(子テーマを使う場合)。
① 子テーマにpartsフォルダーを作成
② partsフォルダー内にpost-grid.phpというファイルを作成
③ 親テーマのpost-grid.phpの中身を、②で作ったpost-grid.phpにコピペ(つまり複製です)
output_catogry_link();というコードが2箇所あるので、両方ともcategory_name();に変更
⑤ 子テーマのfunctions.phpに下記コードを追記

function category_name() {
  $cat = get_the_category();
  if(!$cat) return false;
  $cat = $cat[0];
  $catName = esc_attr($cat->cat_name);
  if($catName) echo '<span class="dfont cat-name">'.$catName.'</span>';
}

よろしくおねがいします。

返信する
Taroimo Panda

ありがとうございます。
簡単に1を実装することができました。
ちなみに、④で説明されているoutput_catogry_link()は46行目の一箇所のみでした。(ver.1.3.3にて)

2の実装については、phpを少し勉強して自力で実装してみようかと思います。

返信する
TS

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

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

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

返信する
サルワカくん

お世話になっております。
カテゴリーラベルが表示されるのは、トップページのみです。
カテゴリー記事一覧ページには「どのカテゴリーの記事が載っているのか」が明白なので、
ラベルは表示しないようにしています。

返信する
TS

お世話になります。
ご回答ありがとうございます。

確かにそうですね・・・
お手数をおかけ致しました。

以上、今後ともよろしくお願い致します。

返信する

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

返信する
サルワカくん

なるほど。簡単な方法は以下のCSSをコピペすることです。これで非表示になります。

.cat-name {
 display:none!important;
}

可能であれば、以下の方法がおすすめです。
①子テーマを用意。
②子テーマにpartsという名前のフォルダーを作成
③親テーマのpartsフォルダーのpost-grid.phpを複製して、②に入れる。
④子テーマのpost-grid.php内のif(!is_archive()) output_catogry_link();//カテゴリーを出力という行を削除

返信する
ちよこ

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

返信する
サルワカくん

よくある質問の「ホーム固定した固定ページ下に新着記事一覧を表示したい」をご覧くださいませ。通常の固定ページをホーム固定した場合は、ページ下に記事一覧を表示することが可能です。

返信する
CM

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

返信する
サルワカくん

以下のCSSを追加してみるとグレイになるかと思います。

.cardtype__article .cat-name:hover {
    background: silver;
}
返信する
CM

早速の回答ありがとうございます。
やってみましたけど、変化ありませんでした。
MacOS上でChrome, Safari, Firefoxのいずれのブラウザでも変化ありませんでした。

返信する
サルワカくん

多分CSSの優先度の問題ですね。
次のCSSなら大丈夫なはずです。

.cardtype__article .cat-name:hover {
    background: silver!important;
}
返信する
CM

今度はうまくいきました!
サポートありがとうございます。

りんご

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

返信する
サルワカくん

こんにちは!
申し訳ないのですが、レイアウトで横長を選んだ場合、カテゴリーラベルは表示されなくなります。
スペースが限られているので…申し訳ないです。

返信する
TAKA

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

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

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

返信する
サルワカくん

大変申し訳ないのですが、子カテゴリーのラベルを表示することはできません。(たくさんのラベルが表示されると、見栄えが崩れる可能性が高いため…)

返信する

コメントを残す

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