※ このページは、「FANBLOG」に投稿していた時のメモ。
ブログの配色
せっかくなので、このブログの配色を自分で変えてみよう・・・ そう思って色々調べて設定してみたのだが・・・ いつも身の周りの物を購入するときは「黒」ばかり選んでしまうせいか、最初にできあがった時は背景から何から真っ黒の怪しいサイトのようになってしまった。それからどういう配色が見やすいか？などを考えていると、あっという間に一日が経ってしまっていた。。。 またすぐに変えたくなるような気もするので、簡単にこの「FANBLOG」の配色の変更方法についてメモしておこうと思う。
Webセーフカラー
色の選定や設定のための色番号を調べるのには、こちらのサイト( 原色大辞典 )を参考にした。また、なるべく汎用性のある一般的な色を・・・ ということで、Webセーフカラーの中から選定することにした(最近では環境により表示が異なるということなどは余り気にしなくても良いとは思いながらも、何か理由をつけて少しでも範囲を限定しないと自分でも選びきれなかった・・・というのが正直なところ)。
そして、とりあえず選定した背景色、文字色は以下の通り。
| 【背景色】 #cccccc |
| 【文字色】 #333300 |
| 【リンクのhover色】 #6699ff |
| 【カレンダー色】 #ccccff |
| 【カレンダー日付のhover色】 #ccffff |
| 【検索】 #330099 |
なるべく色のパターンは少なくしようと思っていたので、リンクのhover時の色も最初は”検索”の色と同じ”#330099″としていた。しかしいざ反映してみると、色の明暗にあまり変化がなく、よく見ないと文字の色が変わったことが分からなかったのでhover時の色は少しだけ明るい色を選択するようにした。また、ページ全体で統一感を出そうと、コメント欄やトラックバックの箇所もカレンダーの箇所と同色に設定した。その結果・・・ デフォルト設定での明るいサイトの雰囲気から、一気に殺風景なサイトに変わってしまったが、今回はこれでヨシとすることにした。。。
cssの変更
とりあえず色は決まったので、あとはcssの該当箇所を変更。変更は、ブログ編集画面→デザイン→html→cssの編集から行う(下図参照)。
cssの編集画面を開いたら、以下の箇所の色番号を変更して保存すれば終わり。
【背景色】
(他にも、デフォルトのテンプレートでは全部で3つ変更箇所があったが、最初にcssを別のテキストファイルにコピーして、同じ色番号で置換した。)
* { margin:0; padding:0;}
body {
font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,sans-serif;
color:#333300;
font-size:14px;
line-height:1.4;
background:#cccccc; /* ←ここの色番号を変更 */
}
【リンク色】
/* リンク色 *
/* link */
a:link { color:#333300;text-decoration:none; } /*←ここの色番号を変更*/
a:active { color:#333300;text-decoration:underline; } /*←ここの色番号を変更*/
a:visited { color:#333300;text-decoration:none; } /*←ここの色番号を変更*/
a:hover { color:#6699ff;text-decoration:none; } /*←ここの色番号を変更*/
【カレンダー】
.calendarhead{
color:#333300;
text-align:center;
padding:5px 0px 5px 0px;
margin-bottom:10px;
font-weight:normal;
/* background:#eadfcb; ←念のため、元の色をコメントアウト */
background:#ccccff; /* ←ここの色番号を変更 */
}
【カレンダーのhover時の色】
.calendarhead a:hover{
/* color:#a3cdf1; ←念のため、元の色をコメントアウト */
color:#6699ff; /* ←ここの色番号を変更 */
【カレンダーの日付のhover時の色】
td.calendarday a:hover{
/* background:#e0cba2; ←念のため、元の色をコメントアウト */
background:#ccffff; /* ←ここの色番号を変更 */
}
【検索の色】
.side .input-submit{
/* background:#e0b975; ←念のため、元の色をコメントアウト */
background:#330099; /* ←ここの色番号を変更 */
border:0;
padding:4px 10px;
color:#fff;
display:inline-block;
cursor:pointer;
vertical-align:middle;
font-weight:bold;
border-radius:2px;
}
【コメント欄の色(1)】
#comments .input-submit{
/* background-color:#e0b975; ←念のため、元の色をコメントアウト */
background-color:#330099; /* ←ここの色番号を変更 */
padding:10px 20px;
color:#fff;
display:inline-block;
cursor:pointer;
vertical-align:middle;
font-size:16px;
font-weight:bold;
border:0;
border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-top:10px
}
【コメント欄の色(2)】
.comments-head{
color:#333300;
font-weight:bold;
margin:0px 0px 10px 0px;
padding: 5px 0px 5px 5px;
/* background:#eadfcb; ←念のため、元の色をコメントアウト */
background:#ccccff; /* ←ここの色番号を変更 */
}
【トラックバックの色】
#trackback {
/* background:#eadfcb; ←念のため、元の色をコメントアウト */
background:#ccccff; /* ←ここの色番号を変更 */
color:#333300;
background-position:top center;
padding:20px 20px 20px 20px;
margin:25px 0;
}
おわりに
原色大辞典 で見た時の色をいざ設定してみると、プレビューで配色を色々試したときには、文字色や背景色の違いで見え方が大分違った。また、その色が占める面積によっても見え方が変わる上に、hover時の色まで気にし始めると本当にキリがない・・・ というのが感想。
今まで自分が知らなかったことで1つ発見したことは、cssを編集する時には入力ウィンドウが小さくて何度もスクロールしていたのだが、ふと、テキストBOXの右下でsizingできることに気付いたことである。また、投稿画面でも同様にsizingできることが分かったので、今後、記事の作成や編集をするときに少し楽になったのは良かった。
スポンサーリンク