特に多いご質問
ブログデザインが急に崩れてしまった
デザインを変更したのに反映されない
新着記事

2011年04月05日

ブログの文字色・背景色を変更したい

スタイルシートで設定する際の色(カラー)についてご説明します。

記事内の特定のテキストの文字色変更は、
記事入力欄下のカラーパレットボタンで指定していただくことができますが、
記事のデフォルト(初期値)文字色設定や、ブログの背景色、
サイドバータイトルに画像を使っていない場合の背景色などを設定する際は、
スタイルシートで指定していただく必要があります。

テンプレート(SimpleWhite3)での色指定についてご説明します。

以下の赤字で表示されている箇所の数値を変更する事で
色の変更が可能となっております。

【参考】WEB色見本
http://www.colordic.org/

■ブログ全体の背景色
body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-color:#FFF;
}

■リンクテキスト色
a {
color:#6D6E71;
}
a:hover{
color:#000;
}

■配置「メイン」の背景色
#container{
margin:0px auto 0px auto;
padding-right:0px;
width:780px;
padding-left:10px;
text-align:center;
color:#6D6E71;
}

■ブログタイトルの文字色
h1 a{
color:#6D6E71;
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}
h1 a:hover{
color:#6D6E71;
}

■記事タイトルの文字色
h3 a{
padding: 0px;
font-weight:bolder;
color:#6D6E71;
}
h3 a:hover{
color:#6D6E71;
}

■ブログ説明の文字色
.description {
color:#6D6E71;
margin:0px 0px 0px 0px;
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}

■投稿日時の文字色
.date{
font-size: 14px;
color:#6D6E71;
font-weight:bolder;
padding:5px 0px 5px 10px;
margin:10px 0px 0px 0px;
border-top:1px solid #6D6E71;
border-left:1px solid #6D6E71;
border-right:1px solid #6D6E71;
}

■カレンダーの年月文字色
.calendarday {
font-size:12px;
font-weight:normal;
background-repeat:no-repeat;
background-position:center;
padding:4px ;
color:#6D6E71;
}

■カレンダーの日付の文字色
.calendarday a{
color:#000;
}

この他にも色設定できる部分がありますので、是非お試しください。

※HTMLやCSSの編集についての技術的サポートは行っておりません。
お問い合わせを頂きましてもお答えできない場合がございますのでご了承下さい。

ニックネーム アセラ事務局 at 11:22| デザイン・カスタマイズ | このブログの読者になる | 更新情報をチェックする