だがそれがいい

読者です 読者をやめる 読者になる 読者になる

だがそれがいい

気になったことを気ままに書いていきます。

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

ブログ運営-カスタマイズ ブログ運営

スポンサーリンク

f:id:dagasoregae:20160425170753j:plain

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


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


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

変更する前に

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


わたしが当ブログで使用しているテーマは、はてなブログのテーマストアにある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はおすすめです。