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

2017/02/01[公開] 2017/06/04[最終更新]

 ここのサイトのテーマ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);
}

スポンサー リンク

“TwentySeventeenでリンクの下線を非表示にする” への2件の返信

  1. 初めまして ほぼやりたいことがそのまま出ていて助かりました。リンクの下線が消えませんでしたが、この方が良いとおもい使っています。ベトナム フーコックいいですね。私はニャチャンに1週間位滞在したことがあります。これからも参考にさせて頂きます。

    1. タケダさん、コメントありがとうございます。
      下線消えませんでしたか、残念です。
      また、ぼちぼち見に来てください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です