HOME → 3 WordPress → 03 カスタマイズ → 

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

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)

 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください