採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

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

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}

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

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事