TwentySeventeenでリンクの下線を非表示にする

　ここのサイトのテーマTwenty Seventeenで、投稿本文内やウィジェットのリンクに下線が出ているのを非表示にしました。文字を囲ったボタンや、目次のような箇条書きが全部リンクになっているパーツを配置していると、下線がずっと出ているとちょっと残念な気になるので変更しました。

　下線を消すだけだとリンクだとわからなくなるので、記事本文部分だけはリンクが青文字で、クリック後は紫色になるようにしました。マウスオーバー時に下線が出るのはそのままにしています。テーマカラーの配色を基本の「ライト」にしている前提での内容です。

このページの目次

親テーマのstyle.cssでは

　親テーマのstyle.cssの1168行目から、Hover effectsの項目でbox-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1); で黒い下線を出しているようです。

.entry-content a, .entry-summary a, .widget a, .site-footer .widget-area a, .posts-navigation a, .widget_authors a strong

これらのリンク部分が黒いラインです。

さらに下記の、

.entry-title a, .entry-meta a, .page-links a, .page-links a .page-number, .entry-footer a, .entry-footer .cat-links a, .entry-footer .tags-links a, .edit-link a, .post-navigation a, .logged-in-as a, .comment-navigation a, .comment-metadata a, .comment-metadata a.comment-edit-link, .comment-reply-link, a .nav-title, .pagination a, .comments-pagination a, .site-info a, .widget .widget-title a, .widget ul li a, .site-footer .widget-area ul li a, .site-footer .widget-area ul li a

こちらのリンク部分には、box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);で白いラインが指定されています。白なので実際には下線は出していないのと同じです。

子テーマのstyle.cssに設定

　twentyseventeenの子テーマに追記しました。親テーマの指定を上書きするようにすればいいので、box-shadow: none;でも良いと思いますが、ラインを透明にするべくrgba(15, 15, 15, 0);の最後を0にすることで透明ラインにしました。

　リンク文字を青くするのは、コンテンツ部分だけにしました。ウィジェット部分も青くするとサイドバーのほとんどが青くなるので外しています。(2017/06/04修正：コメントにリンクを入れた場合も青文字になるように変更しました。）

ということで、子テーマに追記したのがコチラです。

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
        -webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0);
        box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0);
}

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

.entry-content a:visited,
.entry-summary a:visited,
.comment-content a:visited {
        color:#934C7B;
}

テーマ配色「ライト」限定です

　注意点ですが、テーマのカスタマイザーで、テーマカラーの配色が基本の「ライト」でないとこの変更は有効になりません。もう一つのプリセットカラーの「ダーク」や、「カスタム」でカラーを選んだ場合は、このstyle.cssの指定が上書きされて、カスタマイザーで指定したカラーの下線に上書きされます。！important を付ければ反映されますが、そうするとマウスオーバー時の下線も出なくなります。「ライト」以外の場合はさらなる追記が必要そうですが、面倒そうなのでこのサイトでは「ライト」を選んでいます。

追記

（2017/04/22追記）フッター部分の背景色を設定したので、ここのサイトのフッターにウィジェットで出しているメニューの白下線を透明にする追記をしました。

.site-footer .widget-area ul li a {
        -webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0);
        box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0);
}