Ver1.3.1をリリースしました(11/22)

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

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

ラベルの場所

実はこんなときのためにテーマ側であらかじめ仕込みは行ってあります。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の検証機能(デベロッパーツール)の使い方<br />
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方<br />

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

7 Comments

やま

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

返信する
サルワカくん

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

返信する
AKIRA

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

返信する
サルワカくん

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

返信する
石倉清一

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

返信する
サルワカくん

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

返信する

コメントを残す

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