WordPressテーマSANGOの質問

リンクと下線の色設定

アバター
あき

サルワカさん、はじめまして。素敵なテーマありがとうございます。

記事中のリンク部分において、文字色はデフォルトのままに、下線のみ好みの色に設定することは可能でしょうか? 可能であればマウスホバー時に文字色も下線と同じ色に変えたいと考えています。

お忙しいところ大変恐縮ですが、ご回答いただけると幸いです。

色の設定をする
色の設定をしよう
コメントへの回答
サルワカくん
サルワカくん
2019/03/25

可能です。CSSのtext-decorationというプロパティでは下線色と文字色に別の色を使うことはできないため、こちらを無効にしたうえでborderプロパティを使うことになります。
以下は追加するCSSです。子テーマのstyle.cssや外観⇒カスタマイズ⇒追加CSSに貼り付けた後、キャッシュを削除します。

.entry-content p a {
  text-decoration: none;
  border-bottom: solid 1px #下線の色コード;
  color: #文字の色コード;
}
.entry-content p a:hover {
  color: #ホバー時の文字色のコード;
}

よろしくお願いします。

アバター
あき
2019/03/26

サルワカさん、お返事ありがとうございます! 希望通りの効果が出せました。

言葉足らずだったのですが、マウスホバー時にはオリジナルの設定のまま下線は消えるようにしたかったため、いただいたCSSの最終行に

border-bottom: none;

と追加してみたところ、そのように変えることができました。

ただこの場合、マウスホバーを外したときに下線が1秒くらいかけてゆっくりと戻ってくるようなアクションが出てしまいます(パッパッと切り替わるのではなく)。これはもうしょうがないものなのでしょうか? もしそうでしたら諦めようと思うのですが。

再三のご質問申し訳ありません。お時間あるときにご返信いただけたら幸いです。

サルワカくん
サルワカくん
2019/03/26

なるほどですね。トランジションを無効化すれば、ホバー時にすぐに切り替わるようになります。

さきほどの.entry-content p a {~}の中にtransition: none;という行を追加すればOKです。

よろしくお願いします。

アバター
あき
2019/03/26

完璧にうまくいきました! ご対応いただきありがとうございます。

今後もHTMLやCSSの勉強を進めつつ、SANGOの名に恥じぬウェブサイトが作れるよう頑張りたいと思います。アップデートも楽しみにしています。どうもありがとうございました。