Twenty Seventeen リンクの文字・色・下線のカスタマイズ

tacsan

6年前

WordPress Twenty Seventeen
画面デザインに関するカスタマイズ
リンクの文字・色・下線のカスタマイズ

「Twenty Seventeen」のリンク文字は黒で、そこに黒い下線が引かれてリンクの目印となっている。また、リンクにマウスを合わせると、下線がひとまわり太く表示されるように設定されており、さらに、背景色を変更してみると白の下線も引かれている。

以下に、これらのカスタマイズ要領を記す。

リンク文字色のカスタマイズ

子テーマの style.css に下記コードを追記する。これにより、記事中の文字以外にサイドバーの文字等も変更される。

リンク文字色のカスタマイズコード。

/*-----------------------------------------------------------*/
/*　リンクの文字色を変更　*/
/*-----------------------------------------------------------*/
a {
	color: #008080;/*リンク文字色*/
}
a:hover,
a:active {
	color: #990000;/*マウスオーバー時のリンク文字色*/
}

マウスオーバー（リンク文字にマウスを合わせた）時の文字色はほとんどが変わらない。マウスオーバー時の文字色の変更については後述。

リンクの下線をカスタマイズ

リンクの黒い下線をカスタマイズ。
子テーマの style.css に下記コードを追記する。

/*-----------------------------------------------------------*/
/*　リンクの黒い下線をカスタマイズ　*/
/*-----------------------------------------------------------*/
.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 0px 0 rgba(15, 15, 15, 1);/*下線の太さと色*/
	box-shadow: inset 0 0px 0 rgba(15, 15, 15, 1);/*下線の太さと色*/
}

白い下線を削除。
子テーマの style.css に下記コードを追記する。

/*-----------------------------------------------------------*/
/*　白い下線を削除　*/
/*-----------------------------------------------------------*/
.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 {
	-webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 1);
	box-shadow: inset 0 0px 0 rgba(255, 255, 255, 1);
}

マウスオーバー時のリンク文字色と下線の太さ・色のカスタマイズ

子テーマの style.css に下記コードを追記する。

/*-----------------------------------------------------------*/
/*　マウスオーバー時のリンク文字色と下線の太さ・色を変更　*/
/*-----------------------------------------------------------*/
.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #f00;/*マウスオーバー時の文字色*/
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(255, 0, 0, 1);/*マウスオーバー時の下線の太さと色*/
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(255, 0, 0, 1);/*マウスオーバー時の下線の太さと色*/
}

以上。
(2017.10.28)