賢威6.1～全体の文字色を変更したい
賢威6.1マネー版の場合、デフォルトでは、背景色が濃いので、
文字色がすべて白になっています。
私のメインブログでは、背景をすべて白で設定したので、
もう、文字色が白だとが何がなんだか･･･
そこで、文字色を黒く変更してみました。
変更するのはここ。
「外観」⇒「テーマ編集」⇒「design.css」とすすみ、
以下の記述を探します。
2、サイト全体の共通設定
——————————————————-*/
body{ color: #fff; } ⇒ ここを#000に変更
/*●リンク文字*/
a{ text-decoration: underline; }
a:link,
a:visited{ color: #0000ff; }
a:hover,
a:active{ color: #bea455; }
これで、サイト全体の文字色が黒になります。
ただし、ヘッダー画像の中に入っているサイトのキャッチコピーの文字色だけは、
色が独立して指定されているので別途色を変えてあげる必要があります。
･･･ただ、ですな。。。
記事タイトルとかサイドバーなどの、
黒い背景部分の文字色まで全部変わっちゃうのです！
そこで、
いや、君は白文字のままでいいから！！
という部分を、個別にCSSで指定してあげればOK。
まずは、各記事の記事タイトル部分（h2タグ）から。
「外観」⇒「テーマ編集」⇒「design.css」と進みます。
そこから、こんな記述を探して、
赤文字の部分を書き加えましょう。
メインコンテンツ（本文）
——————————————————–*/
#main-contents{ font-size: 1.4em; }
#main-contents .contents{
margin-bottom: 3.5em;
padding: 0 10px;
}
/*●H2タグ*/
#main-contents h2{
margin: 0 0 1.5em;
padding: 0.8em 0.8em 0.5em;
border-top: 1px solid #555;
border-right: 1px solid #000;
border-bottom: 3px solid #000;
border-left: 1px solid #101010;
background: url(./images/title/bg-conts-h2.gif) left top no-repeat #0a0a0a;
font-size: 1.286em;
color: #ffffff; ← この記述を書き加える
}
この、color: #ffffff;という記述が、
「H2タグの文字色を白くしてちょうだい」という意味なので、
もちろん、赤くしたいとか青くしたいとか黄色くしたいなら、
相応のカラーコードを加えてやればOK。
ただ、見出しタグは他にもあって、
- H3見出しタグ
- H4見出しタグ
- H5見出しタグetc･･･
などなど、それぞれに、
「君の文字色は白！あ、でもそっちの君はそのままでいいよ」
などと定義してあげないといけません。
#main-contents h3{
margin: 0 0 1.5em;
padding: 0.5em 1em;
background-color: #161616;
border: 1px solid #000;
border-left: 4px double #666;
font-size: 1.143em;
font-weight: bold;
color: #ffffff;
}
こんな感じで、必要な箇所に記述すればOKです。
ただし、デザインによってまちまちなので、
実際の見出しタグのデザインを見ながら進めましょう。
んで、サイドバーの見出しの文字色変更は、同じ「design.css」の中の、
サブコンテンツ / サイドバー
——————————————————–*/
という部分を探し、この記述の中から、
以下のような記述箇所を探します。
.sub-column .contents{
margin-bottom: 1.5em;
padding: 0.5em;
}
.sub-column hr{ clear: both; }
.sub-column h3{
padding: 0.9em 0.8em 0.8em;
padding-left: 1.5em;
background: url(./images/title/bg-side-h3.gif) 9px 9px no-repeat #0a0a0a;
border: 1px solid #0a0a0a;
border-top: 1px solid #454545;
border-bottom: 2px solid #0a0a0a;
font-weight: bold;
color: #ffffff; ← この記述を書き加える
}
これでOKです。
実際のデザインを確認しながら進めてくださいね^^
