視認性を高めて読みやすいブログを意識しよう～フォントカラー編～
はじめに
先日サイドブログにて「文字が薄くて読みにくい。だから明るい色にしたらどうですか？」とのアドバイスを頂きました。うーん、確かに。と改めて自分のブログを見てみると「分かりずら！！」って感じました。自分で運営しているにも関わらず、自分のブログを客観的に見れていなかったのです。人間でもよくありますよね、自分の事が一番よく分からないって（笑）
サイドブログってどんな背景？
ちなみにサイドブログは、雰囲気を出す為にバックグラウンドカラーを暗い色に設定してあります。その為、文字が白っぽい感じじゃないと全く読めないのです。こちらがサイドブログです。
いかがでしたか？？
背景はこんな感じです↓
う〜ん、暗いですね・・・ものすごく。でもねお洒落な雰囲気を作りたかったので、この木目が気に入ってるし変えたくなかったんですよ（笑）
初期の段階ではこんな感じです（公式テーマそのままスタイル）
Before
あれ？あれれ？全然文字が見えないじゃないの〜！！って、言われて気が付きました(^_^;)・・・という事で記事のフォントの色と、自動リンクになってしまう文字達の色を見直してみました。
↓
フォントの色を変えてみるとこんな感じになりました。
After
いかがでしょうか？目に見えて、見やすくなったと思いませんか？でもこれだと自動リンクの文字が暗いですね。
↓
では、リンクの色も変えてみましょう。
こんな感じです。リンクの色は、少し目立つようにと、「イエロー」系にしています。
ちなみにタイトルの色も変えてみました。
タイトルはこんな具合です。
Before
↓
After
ちょっとは明るくなりましたかね？（笑）
カスタマイズの仕方は、以下にまとめました。
カラー辞典で好きな色を選ぼう
まずは設定してみたいカラーをこちらから選びます。カラーコードは基本「英数字６文字」です。頭には必ず「#」を、後ろには「;」を付けます。それを踏まえて、記述していきます。
色彩の見本はこちらから
ちなみに今回使ったのはこの3色です。
①記事（コンテンツ）の色 → #f8f8ff;
②自動リンクの色 → #fffacd;
③タイトルの色 → #d2b48c
色が決まったらデザインCSSに記述しよう
今回は先ほど紹介したサイドブログで、実際に変えてみた色を使ってやってみます。
①記事全体のフォントカラー（その記事のコメントも）
body {
color: #f8f8ff;
}
②リンクのフォントカラー（自動で点線が付く部分）
a.keyword {
color: #fffacd;
}
③記事タイトルのフォントカラー
h1.entry-title a {
color: #d2b48c;
}
この３項目のコードをデザインCSSにコピペします。
貼付けました。エラーになってる部分は、まだ検証出来ていませんが私が使っているテーマだと見た目には問題無かったです。ただテーマによっては、出来ない場合があるので注意が必要です。（必ず自分のコードのバックアップは、保存しておきましょう）
ブログのコードを知りたい時はChromeが便利
Google Chrome ブラウザを使いましょう。先日、敷島久之さん(id:SikisimaHisayuki)にカスタマイズの事を教えてもらった時にこっそり伺いました！いつもありがとうございますm(__)m感謝です。
Chrome情報はこちらから
要素の検証は非常に便利です！みなさんも使ってみましょう♪やはり"Google先生"はすごいっす（笑）
おまけにシェアボタンもリメイクしてみた！
先日いつもお世話になっている「ゆきひーさん」に教えてもらったので、やってみました。参考にさせてもらったのはこちらの記事です。
こんな感じになりました。
背景の木目にこのシェアボタンは、合いますね〜♪ちょっとお洒落になりました。教えて頂き、ありがとうございます。あ、シェア数が表示されるように改善されたようなのでそちらも追々直して行こうと思います(^_^)/こうして見ると、やっぱり数字は付いていた方が、分かりやすいかと思いましたm(__)m
それではまた・・・♪
