賢威6.1~全体の文字色を変更したい

賢威6.1マネー版の場合、デフォルトでは、背景色が濃いので、
文字色がすべて白になっています。

keni620

私のメインブログでは、背景をすべて白で設定したので、
もう、文字色が白だとが何がなんだか・・・

keni621

そこで、文字色を黒く変更してみました。

keni622

変更するのはここ。

「外観」⇒「テーマ編集」⇒「design.css」とすすみ、
以下の記述を探します。

/*——————————————————–
2、サイト全体の共通設定
——————————————————-*/

body{ color: #fff; } ⇒ ここを#000に変更

/*●リンク文字*/
a{ text-decoration: underline; }

a:link,
a:visited{ color: #0000ff; }
a:hover,
a:active{ color: #bea455; }

これで、サイト全体の文字色が黒になります。
ただし、ヘッダー画像の中に入っているサイトのキャッチコピーの文字色だけは、
色が独立して指定されているので別途色を変えてあげる必要があります。

・・・ただ、ですな。。。

kenis7

記事タイトルとかサイドバーなどの、
黒い背景部分の文字色まで全部変わっちゃうのです!

kenis8

そこで、
いや、君は白文字のままでいいから!!
という部分を、個別にCSSで指定してあげればOK。

まずは、各記事の記事タイトル部分(h2タグ)から。

「外観」⇒「テーマ編集」⇒「design.css」と進みます。

keni613

そこから、こんな記述を探して、
赤文字の部分を書き加えましょう。

/*——————————————————–
メインコンテンツ(本文)
——————————————————–*/

#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・・・

などなど、それぞれに、
「君の文字色は白!あ、でもそっちの君はそのままでいいよ」
などと定義してあげないといけません。

/*●H3タグ*/
#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です。

実際のデザインを確認しながら進めてくださいね^^

賢威6.1~背景色とカラム部分の色を変える

あんまりかっこいいとは思わないんだけど、
一応こういうことも簡単にできます。

kenis7

みて。
サイトの背景の色と、メインカラム、サイドバー部分の色を変えてます。

この設定方法ね。

まずは、「外観」⇒「テーマ編集」と進み、
「design.css」を開きます。

keni613

この、一番上の記述なんだけど、

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{ background-color: #a9a9a9; }

もしくは、マネー版みたいに、
うっすら背景に模様(斜線)が入っているようなタイプは

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{
background: url(./images/common/bg-main.png) repeat #a9a9a9;
}

* html #container{ background: #a9a9a9; } /*IE6*/

こうなっていると思います。

この記述の下に、こんな記述を書き足します。
赤い文字の部分のカラーコードは任意です。

#main-contents {
background-color: #fff;
}
.sub-column {
background-color: #fff;
}

全部書き足したマネー版の場合はこうなります。

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{
background: url(./images/common/bg-main.png) repeat #a9a9a9; ← 全体背景の色
}

* html #container{ background: #a9a9a9; } /*IE6*/ ← 全体背景と同じカラーコードにする

#main-contents {
background-color: #fff; ← メインカラム部分の背景色
}
.sub-column {
background-color: #fff; ← サイドバー部分の背景色
}

この3箇所を好みの色にそれぞれ変えてやります。

ただし、賢威6.1は、
基本的にサイト全体の文字色を、一括で大きく指定してしまっているので、
メインカラムとサイドバーで極端に背景色を変えた場合、
メインカラム用とサイドバー用に、それぞれ、文字色を割り当ててやらないといけません。

黒い文字なら全部が黒、白い文字なら全部が白。
いちいち細かく文字色を変えるにはそれなりに設定がいるからね!!

SIRIUSで簡単ホームページ~サイドバーをカスタムしよう

SIRIUS(シリウス)を使えば、サイドバーの編集もあっという間です。
ホームページビルダーで面倒な思いをした人には、
信じられない便利さかもです。

まずは、サイドバーのメニュー部分を編集する方法です。

詳しい解説は動画にしましたのでご覧くださいね。

次いで、サイドバーに任意のコーナーを設置する方法。

こちらも、動画で解説していますので、
ご覧くださいね。

ドラッグ&ドロップでサイドバーが作れる『ウィジェット』

カスタマイズの自由さって、WordPressの醍醐味のひとつですよね!
ワードプレスでは、サイドバーの編集も、
ドラッグ&ドロップで思い通りにできちゃいます。

実際に、動画で解説していますので、
4分程度、お付き合いください。
続きを読む