リンクの色変更と下線だけ黒に見える場合の対処法【初心者向け】

今回はhtml超絶初心者である私が簡単にリンクの色を変えられた方法を紹介します。また記事内とウィジット内のリンクの色を変更した際に、リンクの下線だけが黒に見えてしまう現象とその対処法についてお話しします。

テーマはWordPress4.7 公式テーマTwenty Seventeenを使用。

基本的にphpを書き換えるのは初心者の私には難しかったので、テーマのカスタマイズ内にある追加CSSのみで修正する方法となります。

リンクの色を変更する

まずはリンクの色を変更します。
変更前と変更後の状態を見てみましょう。

・変更前

・変更後

青い方がリンク感がグッと上がりましたね。
追加CSSは下記の通りです。

/* 記事内のリンク */
.entry-content a {
font-weight:bold; /* リンク文字を太字 */
color: #000099; text-decoration: underline;}/* リンク部分の文字色 */

/* ウィジット内のリンク */
.widget-area .widget a {
color: #000099; text-decoration: underline;}/* リンク部分の文字色 */

この先は下線がある事を前提でお話を進めますが、下線がいらない場合は text-decoration: underline;を上記の中から削除してください。（下線ありの方がリンクとして認識しやすいようです）

リンクにカーソルをのせた時の色変更

次はhover時（カーソルをのせた時）の色の変更です。

・変更前

・変更後

.entry-content a:hover{
color: #f03;} /* カーソルを乗せた時の色 */

.widget-area .widget a:hover{
color: #f03;} /* カーソルを乗せた時の色 */

すでに下線が妙に太い事になっていますね。
変更後の下線をよく見ると下線は真っ黒ではなく、実際には色が変更されその下に影のように太い下線が追加されています。

下線に影が出る原因

結論から言うとこれは、-webkit-box-shadowなるコードが悪さをしていました。ダッシュボードから「外観」→「テーマの編集」→「スタイルシート」を確認していただくと、このような部分があります。

この-webkit-box-shadowと言う部分を表示させなければ問題となる下線の影を消す事が出来ます。（スタイルシートを書き換える必要はありません）

先ほどのCSSに-webkit-box-shadow: none;を追加します。

.widget-area .widget a:hover{
color: #f03; -webkit-box-shadow: none;} /* カーソルを乗せた時の色 */

こうする事で

下線の影を消す事が出来ました！
（左側にある>>はリンクが含まれていないので黒のままです。）

最終的に追加したCSS

/* 記事内のリンク */
.entry-content a {
font-weight:bold; /* リンク文字を太字 */
color: #000099; text-decoration: underline; -webkit-box-shadow: none;} /* リンクの色 */
.entry-content a:hover{
color: #f03; -webkit-box-shadow: none;} /* カーソルを乗せた時の色 */

/* ウィジット内のリンク */
.widget-area .widget a {
color: #000099; text-decoration: underline; -webkit-box-shadow: none;
}/* リンク部分の文字色 */
.widget-area .widget a:hover{color: #f03; -webkit-box-shadow: none;} /* カーソルを乗せた時の色 */