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

LOVE & PEACE!!!

ハッピーをお届けするライフマガジン

視認性を高めて読みやすいブログを意識しよう~フォントカラー編~

カスタマイズ

 

 

 はじめに

先日サイドブログにて「文字が薄くて読みにくい。だから明るい色にしたらどうですか?」とのアドバイスを頂きました。うーん、確かに。と改めて自分のブログを見てみると「分かりずら!!」って感じました。自分で運営しているにも関わらず、自分のブログを客観的に見れていなかったのです。人間でもよくありますよね、自分の事が一番よく分からないって(笑)

 

 

 

 サイドブログってどんな背景?

ちなみにサイドブログは、雰囲気を出す為にバックグラウンドカラーを暗い色に設定してあります。その為、文字が白っぽい感じじゃないと全く読めないのです。こちらがサイドブログです。

 

musicmagazine.hateblo.jp

いかがでしたか?? 

 

背景はこんな感じです↓

f:id:love-musicflavor0928:20150630232009p:plain

 

う〜ん、暗いですね・・・ものすごく。でもねお洒落な雰囲気を作りたかったので、この木目が気に入ってるし変えたくなかったんですよ(笑) 

 

 

初期の段階ではこんな感じです(公式テーマそのままスタイル)

Before

f:id:love-musicflavor0928:20150630235242p:plain

あれ?あれれ?全然文字が見えないじゃないの〜!!って、言われて気が付きました(^_^;)・・・という事で記事のフォントの色と、自動リンクになってしまう文字達の色を見直してみました。

 

 

フォントの色を変えてみるとこんな感じになりました。

After

f:id:love-musicflavor0928:20150630235508p:plain

 

 

 

いかがでしょうか?目に見えて、見やすくなったと思いませんか?でもこれだと自動リンクの文字が暗いですね。

 

 

では、リンクの色も変えてみましょう。

f:id:love-musicflavor0928:20150630235743p:plain

こんな感じです。リンクの色は、少し目立つようにと、「イエロー」系にしています。

ちなみにタイトルの色も変えてみました。

 

タイトルはこんな具合です。 

Before

f:id:love-musicflavor0928:20150701005740p:plain

 

 

After

f:id:love-musicflavor0928:20150701005752p:plain

 ちょっとは明るくなりましたかね?(笑)

 

 カスタマイズの仕方は、以下にまとめました。

 

 カラー辞典で好きな色を選ぼう

 まずは設定してみたいカラーをこちらから選びます。カラーコードは基本「英数字6文字」です。頭には必ず「#」を、後ろには「;」を付けます。それを踏まえて、記述していきます。

 

色彩の見本はこちらから

www.colordic.org

 

ちなみに今回使ったのはこの3色です。

①記事(コンテンツ)の色  → #f8f8ff; 

f:id:love-musicflavor0928:20150701002524p:plain

 

自動リンクの色 → #fffacd;  

f:id:love-musicflavor0928:20150701002536p:plain

③タイトルの色 → #d2b48c

f:id:love-musicflavor0928:20150701010040p:plain

 

 

 色が決まったらデザインCSSに記述しよう

今回は先ほど紹介したサイドブログで、実際に変えてみた色を使ってやってみます。

①記事全体のフォントカラー(その記事のコメントも)

body {
color: #f8f8ff;
}

 

②リンクのフォントカラー(自動で点線が付く部分)

a.keyword {
color: #fffacd;
}

 

③記事タイトルのフォントカラー

h1.entry-title a {
color: #d2b48c;
}

 

この3項目のコードをデザインCSSにコピペします。

f:id:love-musicflavor0928:20150701235806p:plain

貼付けました。エラーになってる部分は、まだ検証出来ていませんが私が使っているテーマだと見た目には問題無かったです。ただテーマによっては、出来ない場合があるので注意が必要です。(必ず自分のコードのバックアップは、保存しておきましょう)

 

ブログのコードを知りたい時はChromeが便利

Google Chrome ブラウザを使いましょう。先日、敷島久之さん(id:SikisimaHisayuki)にカスタマイズの事を教えてもらった時にこっそり伺いました!いつもありがとうございますm(__)m感謝です。

wepli-dot2.hatenablog.com

 

Chrome情報はこちらから

www.google.co.jp

iwaimotors.com

要素の検証は非常に便利です!みなさんも使ってみましょう♪やはり"Google先生"はすごいっす(笑) 

 

 おまけにシェアボタンもリメイクしてみた!

 先日いつもお世話になっている「ゆきひーさん」に教えてもらったので、やってみました。参考にさせてもらったのはこちらの記事です。

www.yukihy.com

 

こんな感じになりました。

f:id:love-musicflavor0928:20150701010544p:plain

 

背景の木目にこのシェアボタンは、合いますね〜♪ちょっとお洒落になりました。教えて頂き、ありがとうございます。あ、シェア数が表示されるように改善されたようなのでそちらも追々直して行こうと思います(^_^)/こうして見ると、やっぱり数字は付いていた方が、分かりやすいかと思いましたm(__)m

 

それではまた・・・♪