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

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

 ここのサイトのテーマ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にすることで透明ラインにしました。

 リンク文字を青くするのは、コンテンツ部分だけにしました。ウィジェット部分も青くするとサイドバーのほとんどが青くなるので外しています。

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

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

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

追記

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

テーマTwentySeventeenの背景色をCSSでカスタマイズ

スポンサー リンク

こちらの記事もどうぞ

コメントを残す

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