はてなブログでリンク文字色や下線をカスタマイズする方法【進化版】

こんにちはこんばんは！りさこです！

ある記事のコメント欄で秋沢もかさんがこんなリクエストをしてくれました！

f:id:matsuda_risako:20160105232218p:plain

リクエストを頂いたので、今回はリンクにカーソルがのったときのカスタマイズを紹介したいと思います！

ちなみに秋沢もかさんのブログはこちら！リクエストありがとうございます！

リンクのカスタマイズは以前にも記事にしたのですが、このときは文字色しか変わってないので今回はもう少し凝ったデザインにしたいと思います！

リクエストがあったので、まずグローバルメニューのリンクのカスタマイズ方法を紹介します！

デザイン→カスタマイズ→デザインCSSに

#global ul li a:hover{
    color: #ff8d8d;
    border-bottom: solid 3px #ff8d8d;
}

これをコピペするだけ！ちょーカンタン！

colorのあとの#ff8d8dは、マウスがのったときの文字色を表しています。ここを好きな色に変えちゃってくださいっ！私はタイトルや見出しの色と同じにしていまっす！

border-bottomのあとのsolidは、下線が実線だよってことを表してます。だからこの部分をdottedに変えると下線が点線になります。他にも色々な種類の線があるので、色々試してみたい方は「CSS border-style」で調べてみてください！

solidのあとの3pxは、下線の太さを表しています。数値を小さくすれば下線が細く、数値が大きくなれば下線が太くなります！

3pxのあと#ff8d8dは、下線の色を表しています。ここも好きな色に変えちゃってください！

グローバルメニューの設置方法はこちらの記事を参考にしてください！

次に、グローバルメニュー以外の場所のリンクをカスタマイズする方法を紹介します！

グローバルメニューと同じように、デザイン→カスタマイズ→デザインCSSに

△△△ a:hover{
    color: #ff8d8d;
    border-bottom: solid 3px #ff8d8d;
}

これをコピペして、△の部分にカスタマイズしたい場所を入れるだけ！ちょーちょーカンタン！

リンクの場所はたくさんあってひとつひとつ紹介するのは大変なので、△に何入れるか分からない方はコメントで変えたい場所を教えてください！対応します！

最後に、リンクになっているところ全部一気にカスタマイズする方法を紹介します！

今までと同じように、デザイン→カスタマイズ→デザインCSSに

a:hover,
#footer a:hover,
#global ul li a:hover
 {
    color:#ff8d8d;
    border-bottom: solid 3px #ff8d8d;
}

これをコピペするだけ！ちょーちょーちょーカンタン！

しかし、私の力不足でこれだけではカスタマイズできない部分があります…分かり次第随時更新したいと思います…m(_ _)m

もっと凝ったバージョンも紹介しようと思ってたんですけど、疲れちゃったのでまた別の記事で書きます！笑

他にもこんなかんじのカスタマイズしたい！というリクエストがあれば気軽にコメントください！がんばって記事にします！！！！！

おわり

りさこぶろぐ