「デザイン変えたらリンクの色が変わった」そんな悩みをコピペで解決しましょう

「デザイン変えたらリンクの色が変わった」

「リンクの色が変で目立たない」

 

 最近ブログデザインを変えると、なぜかリンクの色がうす緑に。

全然目立たないので試行錯誤しながら変えました。

 

f:id:mjek-0829-0207:20190120181902j:plain

 

今回はリンクの色を変えるCSSを共有します!

是非参考にしてください^^

リンクといえば青

僕がリンクの色が薄緑だったのに違和感を持ったのは、

リンク=青という認識があるからです。

大手メディアは基本的にはリンクを青にしているから

常識となっているんですね。

 

大手メディアのリンクの色

大手メディア 色コード
Google #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に貼り付けます。

f:id:mjek-0829-0207:20190114122331p:plain

f:id:mjek-0829-0207:20190114122756p:plainf:id:mjek-0829-0207:20190114123110p:plain

 

ちなみに、このリンクの色を変えると、

目次の記事内へ飛ぶリンクの色も変わります!

 

ぜひ試してみてください^^

 

関連記事

mjek-0829-0207.hatenablog.com

mjek-0829-0207.hatenablog.com

参考になりましたら、ぜひ「はてなブックマーク」のクリックをおねがいします!