WordPressテーマTCDのカスタマイズを研究するサイト

リンクカラーをカテゴリーカラーと異なる色にする

Q.カテゴリー色がリンク文字色に反映されないようにしたい。

Opinionはカテゴリー色がリンク文字色に反映される仕様となっています。

カスタムCSSに以下のように書き込んでも上手く行きません。

.post_content a { color:#●●●●●●; !important}

記事内のリンクカラーをカテゴリーカラーと変える(統一する)方法をおしえてください。

A.カスタムCSSで設定を追加してください。

Opinionテーマでは、category_style.php内の指定によって、自動的にカテゴリーカラーが適用されるようになっています。

これは、bodyタグに自動的に付与されるカテゴリーIDクラスを用いたOpinionテーマ独自の仕様となっているため、カスタムCSSで制御する場合には“カテゴリーIDクラス”を含む子孫セレクタでの指定が必要になります。

少しわかりにくいと思いますので、デモサイトの下記のページを例に方法をご紹介します。
サンプル記事

1つのカテゴリーのリンクカラーを変更する場合

この記事はカテゴリー「暮らし」に属する記事です。記事内のリンクカラーを変更してみましょう。

ページのソースを表示してみると、bodyタグに下記のようにカテゴリーIDクラスが付与されているのが確認できます。
smp1
黄色マーカー部分の「category-1」がカテゴリー「暮らし」の“カテゴリーIDクラス”です。
カスタムCSSに追加する内容は下記のようになります。

編集する箇所:テーマオプション→カスタムCSS
追加する内容例:

/* リンク文字色を変更する */
.category-1 .post a { color:#438bc5 ; !important}

※リンクカラーを#438bc5 にする場合の例

これで、カテゴリー「暮らし」に属する記事のリンクカラーが#438bc5に変更されます。

また、複数カテゴリーや全記事でリンクカラーを統一したい場合には、対象とするカテゴリーの分だけセレクタを追加する必要があります。

カテゴリーの数が多い場合は、下記の方法であらかじめカテゴリーIDのみを確認後、先頭に「category-」加える方法がおすすめです。

カテゴリーIDの確認方法
カテゴリーIDを確認するにはまずダッシュボード左メニュー→【カテゴリ】を開きます。
smp2
①カテゴリー名にマウスカーソルを合わせ、②ブラウザウィンドウ左下のステータスバーに表示されるカテゴリーURL内の “category&tag_ID=” に続く数字をご確認ください。
上の画像の場合、カテゴリーIDは“12”、 カテゴリーIDクラスは「category-12」になります。

複数のカテゴリーのリンクカラーを変更する場合

カテゴリー「暮らし」(カテゴリーID:1)とカテゴリー「カルチャー」(カテゴリーID:12)に属する記事のリンクカラーを変更する場合は下記のようになります。

編集する箇所:テーマオプション→カスタムCSS
追加する内容例:

/* リンク文字色を変更する(複数カテゴリー対象) */
.category-1 .post a, .category-12 .post a
{ color:#●●●●●● ; !important}

※対象とするカテゴリーの数分セレクタを記述してください。

全記事でリンクカラーを統一する場合

カテゴリー数分、セレクタを指定する必要があります。
例えば、カテゴリーの数は3つで、カテゴリーIDがそれぞれ1,2,3の場合だと下記のようになります。

編集する箇所:テーマオプション→カスタムCSS
追加する内容例:

/* リンク文字色を変更する(全記事で統一する) */
.category-1 .post a, .category-2 .post a, .category-3 .post a
{ color:#●●●●●● ; !important}

※すべてのカテゴリー分セレクタを記述してください。
※最後のセレクタの後ろに「,」は不要です。(見落としがちな箇所ですので上手く反映されない際にはご確認ください。)

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。