【OOPS!】記事内に表示されるリンクの文字色を変更する方法

TCDテーマ「OOPS!」では、リンクの文字色のデフォルトカラーはオレンジです。マニュアルに書かれているとおりにテーマオプションから色を変更しても実際のリンクの文字色には反映されません。では、その色を変えたい時はどうすれば良いのでしょう?

 

  • 同じテーマを使用していても環境によっては異なる動作をする場合があります。その場合は、同じ効果を再現出来ないことがありますのでご注意下さい。

 

スポンサーリンク

マニュアル通りでは変更出来ない?

セットアップマニュアル内「5-01.テーマオプション:基本設定」→「色の設定」欄を見ると「第2カラーは記事本文内のリンク文字色も設定します」と書かれています。
 

マニュアル画面

 

最初は「第2カラー」=「サブカラー2」と考えて「サブカラー2」を変更してみました。しかし、カラーは変更になりません。

もしかすると「第2カラー」とは2番目という意味で「1番=メイン、2番=サブカラー、3番=サブカラー2」という意味だったのかも知れないと考え直し、「サブカラー」、「サブカラー2」の両方ともカラーコードの変更を試してみたのですがやっぱりリンク色は変更されません。

 

デベロッパーツールでCSSを確認する

リンクに何が指定されているのかを確認するためにデベロッパーツールを使用します。
 

該当ページのリンクが張ってある箇所を見てみると、

.p-entry__body a {
color: #ff7f00;
}

と指定されています。
 

CSSデフォルトカラー指定

これで、この記事内のリンクの色指定は、「.p entry__body a」の箇所に記述されていることが確認出来ました。
 
 

デベロッパーツールを使用すると、該当する記述がどのCSSファイルを参照しているのかを確認出来ます。
 
CSS参照

画面の「インライン:86」という部分をクリックすると参照しているCSSファイルの内容が表示されます。参照元CSSファイルの86行目に同じタグが記述されています。
 

参照元CSS

親のCSSファイルの内容を直接変更することはないと思いますが、ここから直接記述内容等を確認することが可能です。

 
 

カスタムCSSに記述する

TCDテーマオプション「基本設定」の一番下にある項目「カスタムCSS」に記述してリンクの文字色を変更します。
ここに記述した場合、サイト内記事のentry__bodyのP要素に該当する全リンクに適用されます。
 

サイト全体に反映させるのでなく記事単位で個別に指定したい場合は、各記事の編集画面内にあるカスタムCSSへ記述して下さい。

 

赤い枠のところに以下のコードを記述します。

 
• 色を変更する場合は

.p-entry__body a {
color: #00f;
}

 

• 色を変更して下線を追加する場合は

.p-entry__body a {
color: #00f;
text-decoration-line: underline;
}

 

※ここに記載したカラーコードは、Windowsのリンクデフォルトカラーのブルーです。適宜、好きなカラーに変更して下さい。
 

リンク文字色見本(#00f) 
これは「#00f(#0000ff)」の色見本です。リンクではありません。