Twenty Seventeenでリンクの文字と下線の色を変更する

Twenty Seventeenでリンクの文字と下線の色を変更してみました。

Twenty Seventeenではリンクには下線が入りますが、実際には、この「下線」はアンダーライン（underline）ではなく、box-shadowです。

リンクは本来、青色の文字に青色のアンダーラインと決まっています。ちゃんとリンクをリンクと認識してもらわないと、リンクをクリックしてもらえる確率が下がりますので、結構、重要です。

Twenty Seventeenでは、リンクは黒い文字に黒いアンダーラインになります。そこで、今回、リンクの文字の色と下線の色を青色にすることにしました。

変更対象は、記事内のリンクだけです。サイドバーまでリンクを青色に変更すると、逆にみっともないし、普通、サイドバーはリンクばかりなので、青くする意味があまりありません。

念のためですが、コードを追加する場所は、理想的には子テーマのstyle.cssか「外観＞カスタマイズ」の「追加CSS」です。親テーマに追加する時は、メモを取っておき、テーマを更新する度に、また追加し直す必要があります。

まず、文字の色を青色にします。それには、次のコードを追加します。

.entry-content a {
	color:#0000ff;
}

アンダーラインを青色にするには、次のコードを追加します。

.entry-content a {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
}

別々に書いても問題はありませんが、一つにまとめるとすっきりします。

.entry-content a {
	color:#0000ff;
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
}

コードの意味

コードの意味について詳細に書いておきます。

Twenty Seventeenで記事の中身をマークするのに使われているクラス名です。クラス名の前にはピリオド（点）が必要です。

リンクを表すHTMLタグです。

文字色を指定するCSSのプロパティーです。

ボックスに影をつけるCSSのプロパティーです。

ChromeとSafariのベンダープレフィックスです。CSS3で草案段階にあって、各ブラウザーが先行して機能を装備した場合に、ベンダープレフィックスをつけることで動作します。ベンダープレフィックスなしのコードも併記することが推奨されています。

私は確認していないので知りませんが、box-shadowは、Safari 4では、ベンダープレフィックスがないと、動作しないらしいです。

box-shadowの影を内側に落とします。

色を指定するRGBに透明度のAlphaが加わったものです。最後の数値は0から1の間で変化し、透明度を表します。「0」が透明で、「1」が透明度がない状態です。