はてなブログで記事内のテキストリンクの文字色を変更する方法

広告

はてなブログにはたくさんのテーマが用意されているので、ソレらを使用すればある程度は自分好みのデザインにできると思います。
しかし、「このテーマのこの部分はいいけど、ここはイマイチなんだよな」と感じることもしばしば。

 

なかなか全てにおいて自分好みのテーマにはめぐり逢えないものです。

 

当ブログでも過去記事ではてなブログのカスタマイズに触れてきていますが、今回は最も簡単でしかも割と重要な”はてなブログでテキストリンクの文字色を簡単にカスタマイズする方法をご紹介します。

スポンサーリンク

変更する前に

リンクの文字色を変更するのは非常に簡単ですが、その前に現状の確認とどの色に変えるかを決めてしまいましょう。

 

わたしが当ブログで使用しているテーマは、はてなブログのテーマストアにあるWrittenというテーマですが、デフォルトだとリンクの文字色は下の赤枠のとおり、黒っぽい色です。

 

f:id:dagasoregae:20160425171951j:plain

 

これでは、本文とリンクの違いがパッと見で判別しにくいので、分かりやすい色に変更することにします。

通常時のカラー

まずは、何もしていない状態で表示されるカラーを決めます。

 

こちらのサイトが非常に便利です。

html-color-codes.info

 

f:id:dagasoregae:20160425164310j:plain
出典:HTMLカラーコード

 

好きな色のマスをクリックすれば、その色のHTMLカラーコードを取得できます。

 

通常時のテキストリンクはオーソドックスな青系にしたいとので#819FF7に決定。

マウスオーバー時のカラー

マウスオーバーした時に色が切り替わると、よりリンクであることを認識しやすくなるので、マウスオーバー時のリンクカラーを通常時とは別な色に決めておきます。

 

同系統の色で少し明るい#81F7F3に決定。

訪問済みリンクのカラー

上の2つで、だいたいオッケーなんですがそれだけだと、一度訪問したリンクはデフォルトの黒っぽい色になってしまいます。
それではわかりにくいので、こちらも色をつけておきましょう。

 

一般的には紫などがよく使われますが、わたしは訪問で色がかわるのがあまり好きじゃないので、通常時と同じ#819FF7を使用することにしました。

 

以上で、変更前の準備は完了です。

CSSにコードを追加して、リンクカラーを変更する

それでは、いよいよCSSをいじってリンクの文字色を変更していきます。

 

「ダッシュボード」の「デザイン」→「カスタマイズ」タブ→「{}デザインCSS」を選択し、エディタにコードをコピペします。

/*記事内のリンクの色を変更*/
.entry-content a:link{
color:#819FF7;
text-decoration:underline;
}
.entry-content a:hover{
color:#81F7F3;
text-decoration:underline;
}
.entry-content a:visited{
color:#819FF7;
text-decoration:underline;
}
f:id:dagasoregae:20160425165731j:plain

 

a:linkが通常時のリンクカラー、a:hoverがマウスオーバー時のリンクカラー、a:visitedが訪問済みのリンクカラーにそれぞれ対応しています。#000000(6桁の16進数)の数字&アルファベットの部分を先ほど決定したカラーカードに置き換えれば、お好きな色に変更することができます。

 

変更が終わったら変更を保存して、ブログを確認します。

 

通常時
f:id:dagasoregae:20160425171904j:plain

 

マウスオーバー時
f:id:dagasoregae:20160425171914j:plain

 

以上でテキストリンクカラーの変更は完了です。

おわりに

1年近くブログをやってきて、デザイン面はわりと手を加えてきたと思っていましたが、基本中の基本であるリンクの文字色の変更を放置していたことにやっと気付きました。

 

これで、クリックされやすくなると思います。

 

かっこよさも大事ですが、読者の方が読みやすいのが最重要ですからね。

 

自分のブログのリンクが何色で表示されているか、まずはそこから確認してみることをオススメします。
そして、「ちょっと分かり難いかなー」とおもったら是非変更してみてください。

 

webデザイン知識を身につけておけば、ブログだけではなくwebデザイナーとして稼げるようになるので、HTMLやCSS、PHP、javascriptの知識は身につけておいて損はありません。

短期間でwebデザイナーに必要なスキルを身につけられるTechAcademyはおすすめです。

スポンサーリンク