「デザイン変えたらリンクの色が変わった」そんな悩みをコピペで解決しましょう
「デザイン変えたらリンクの色が変わった」
「リンクの色が変で目立たない」
最近ブログデザインを変えると、なぜかリンクの色がうす緑に。
全然目立たないので試行錯誤しながら変えました。
今回はリンクの色を変えるCSSを共有します!
是非参考にしてください^^
リンクといえば青
僕がリンクの色が薄緑だったのに違和感を持ったのは、
リンク=青という認識があるからです。
大手メディアは基本的にはリンクを青にしているから
常識となっているんですね。
大手メディアのリンクの色
大手メディア | 色コード | 色 |
---|---|---|
#1a0dab | ||
Yahoo | #1d3994 | |
ニコニコ動画 | #006699 | |
YouTube | #167ac6 | |
livedoor | #216bb1 | |
日経 | #113366 | |
Amazon | #004B91 | |
楽天 | #1d54a7 | |
はてな | #1841ce | |
WordPress | #1e8cbe |
どこも若干色合いを変えてますが、基本は青
なので、オリジナリティーをだすなら、青色の枠組みで出すのが無難です!
WEB色見本 原色大辞典 - HTMLカラーコード(外部リンク)
色はこちらを参考にしてください!
めちゃくちゃレパートリーがあります!
デザインCSS
a{/*リンクされた文字*/
color:#388e3c; /*←色指定*/
font-style:normal;
}
a:link {/*未訪問のリンク*/
color:#388e3c;
font-style:normal;
text-decoration:none;
}
a:visited {/*訪問後のリンク*/
color:81c784;
text-decoration:none;
}
a:hover {/*マウスをのせたとき*/
color:#FF9800;
font-style:italic;/*斜体にする*/
text-decoration:none;
}
a:active {/*クリック中*/
text-decoration:none;
}
これをデザインCSSに貼り付けます。
ちなみに、このリンクの色を変えると、
目次の記事内へ飛ぶリンクの色も変わります!
ぜひ試してみてください^^
関連記事
参考になりましたら、ぜひ「はてなブックマーク」のクリックをおねがいします!