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);
}
コードの意味
コードの意味について詳細に書いておきます。
.entry-content
Twenty Seventeenで記事の中身をマークするのに使われているクラス名です。クラス名の前にはピリオド(点)が必要です。
a
リンクを表すHTMLタグです。
color
文字色を指定するCSSのプロパティーです。
box-shadow
ボックスに影をつけるCSSのプロパティーです。
-webkit-
ChromeとSafariのベンダープレフィックスです。CSS3で草案段階にあって、各ブラウザーが先行して機能を装備した場合に、ベンダープレフィックスをつけることで動作します。ベンダープレフィックスなしのコードも併記することが推奨されています。
私は確認していないので知りませんが、box-shadowは、Safari 4では、ベンダープレフィックスがないと、動作しないらしいです。
inset
box-shadowの影を内側に落とします。
rgba
色を指定するRGBに透明度のAlphaが加わったものです。最後の数値は0から1の間で変化し、透明度を表します。「0」が透明で、「1」が透明度がない状態です。
関連ページ:
box-shadowを極める(シンプルシンプルデザイン)
ベンダープレフィックス(HTMLクイックリファレンス)
CSSでRGBに透明度を加えて色を指定できるRGBAの書き方(にししふぁくとりー)
RGBと16進数カラーコードの相互変換ツール(PEKO STEP)