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

WordPress Twenty Seventeen
画面デザインに関するカスタマイズ
リンクの 文字・色・下線 のカスタマイズ
 
「Twenty Seventeen」のリンク文字は黒で、そこに黒い下線が引かれてリンクの目印となっている。また、リンクにマウスを合わせると、下線がひとまわり太く表示されるように設定されており、さらに、背景色を変更してみると白の下線も引かれている。
以下に、これらのカスタマイズ要領を記す。
 
スポンサー リンク
 
 
リンク文字 色 のカスタマイズ
 
子テーマの style.css に下記コードを追記する。これにより、記事中の文字以外にサイドバーの文字等も変更される。
 
リンク文字色のカスタマイズコード。
 
マウスオーバー(リンク文字にマウスを合わせた)時の文字色はほとんどが変わらない。マウスオーバー時の文字色の変更については後述。
 
 
リンクの下線 をカスタマイズ
 
リンクの黒い下線をカスタマイズ。
子テーマの style.css に下記コードを追記する。
 
白い下線を削除。
子テーマの style.css に下記コードを追記する。
 
 
マウスオーバー時の リンク文字色 と 下線の太さ・色 のカスタマイズ
 
子テーマの style.css に下記コードを追記する。
  

 

以上。
(2017.10.28)

 
             

スポンサー リンク
 

コメントを残す

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

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