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

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

賢威6.1~「最新情報」のカスタマイズ

賢威6.1では、最新の投稿記事表示がこんな感じになってます。
まずは、これがデフォルト。

kenis1

で、こっちがタイプ2.

kenis2

この設定は、ワードプレスの管理画面で簡単に切り替えられます。

kenis3

ただ、ですね。。。
やっぱ、トップページは情報量が多いし、こうしたいわけですよ。

kenis4

この設定方法。
まずは、「賢威の設定」で、最新情報をタイプ1にしておいてくださいね。

kenis5

んで、ワードプレスの「外観」⇒「テーマ編集」⇒「index.php」へと進みます。

kenis6

この中から、<!–▽メインコンテンツ–>という箇所を探します。
で、この中の、

<!–最新情報–>~~~~~<!–/最新情報–>

この中にある、こんな記述を探します。

変更前
<?php newposts_keni(5,5,1,”year”); ?>
</dl>

変更後
<?php newposts_keni(5,5,0,”year”); ?>
</dl>

この赤い文字の部分を「0」にすればOK。

ただ、私のメインブログで使っている「マネー版」では、
この記述がありませんでした。

その代わりに変更した記述が、

変更前
<?php $new_info_rows = (trim(mb_convert_kana(the_keni(‘new_info_rows’),”as”)));
if (!mb_ereg(“^[0-9]+$”, $new_info_rows) or ($new_info_rows <= 0)) {
$new_info_rows = 5;
}
newposts_keni($new_info_rows,1,1,”year”,0,the_keni(‘new_info’)); ?>
</dl>

変更後
<?php $new_info_rows = (trim(mb_convert_kana(the_keni(‘new_info_rows’),”as”)));
if (!mb_ereg(“^[0-9]+$”, $new_info_rows) or ($new_info_rows <= 0)) {
$new_info_rows = 5;
}
newposts_keni($new_info_rows,1,0,”year”,0,the_keni(‘new_info’)); ?>
</dl>

これですっきりです♪

賢威6.1~ブログ説明文の文字色を変えたい(ついでに編集もしたい)

keni617

ヘッダー画像に入るブログ説明文の文字色変更とテキスト編集。

最初の状態はこれ。

keni618

あ~~テキストの色が合ってないし、
お姉さんの画像に被っちゃってるね。

まずは、テキストの文字色変更から。

keni613

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

/*——————————————————–
ヘッダー
——————————————————–*/

この中の、

/*●ヘッダーテキスト・右上の文章*/
#header-in #header-text{
float: right;
margin-top:25px;
width: 40%; /*・1行の幅はwidthの値を変更*/
color: #000;
}

この部分を変更します。

「#000」で黒、「#fff」で白。
他にも、カラーコードで自由に設定できるので、
作ったヘッダー画像に合わせて色を変えてみてくださいね。

ついで、あのテキストを編集。
あそこに入れる文字の編集ですね。

コイツは簡単。

keni619

ワードプレスの設定で変更可能です。

ただし、今までの賢威5.0とかだったら、
phpの記述の中に直接テキストを書き込んでいたので、
「改行」が使えたし、リンクなども使えましたが、
ワードプレスのキャッチコピーを直接持って来るので改行などのタグは使えません!

賢威6.1~ヘッダー画像の上下幅を変えたい

賢威6.1マネー版で、ヘッダーに画像を設定した場合、

keni615

このヘッダーは半分くらい真っ白なので見えにくいかもだけど、
ヘッダー画像の上部、と、ヘッダー画像とグローバルメニューの間、
要は、ヘッダー画像を挟んで上下のスキマが広いので、
細めのヘッダー画像を作っても、ちょっとヘッダーが大きくなりすぎな気がします。

まぁ、ヘッダーを目立たせて出オチを狙うってのもありかもですが、
そういうのはランディングページの役目であって、
コンテンツ重視のメインブログのヘッダーが異常に派手なのはいけすかない・・・

サイトが立ち上がった瞬間、読者さんの受ける印象として、
ヘッダー「だけ」ってのもねぇ。。。Σ( ̄Д ̄;)

ここにさらにイメージ画像を入れてしまうと、
サイトが立ち上がったとき、まるっきりコンテンツ部分が見えなくなってしまうでしょ?

それではメインブログとしてちょっと・・・

あと、PRIDEみたいにアドセンスを利用する場合、
ヘッダーが勝ちすぎて、ヘッダーとアドセンスしか見えない状態だと、
アドセンスの警告対象にもなってしまうので注意です。

ま、最初に見たとき、PCの画面半分くらいがヘッダーで埋め尽くされてて、
「あぁ、こりゃしつこいわ・・・」と思ったのがきっかけで、
ヘッダー画像を細く作り直したり、いろいろしたんだけど、

根本的にヘッダー画像の上下の余白が大きすぎるんだ!
という責任転嫁で自分を納得させ、じゃぁ、あの幅を縮めよう!
ってなことでやってみました。

「外観」⇒「テーマ編集」から、「design.css」へ進みます。

keni613

その中から、下記のような記述を探します。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background: url(./images/common/bg-header.png) center bottom repeat-x #ffffff;
font-size: 1.2em;
}

* html #header{ background: #ffffff; } /*IE6*/

#header-in{ padding: -1em 0; } ← ここがヘッダー画像のすぐ上の幅

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ(メインタイトル)下の

の1行の幅はこちらのwidthの値を変更*/
}

#header .header-logo{
margin-bottom: 0.2em; ← ここがヘッダー画像のすぐ下の幅
font-size: 2.167em;
}

私はヘッダー画像のすぐ上の幅を「-1」にして、
ヘッダー画像のすぐ下の幅を「0.2」にしています。

keni616

なんか、すっきりした感じ♪

賢威6.1プリティ版の背景色を変える

賢威6.1のプリティ版、と言えば、このサイトのテーマでもありますが
そんなことをいいつつコロコロテーマを変えるのでとりあえずスクショ。

keni61

うーん。。
サイトの最上部の青と黄色のラインとか、H2見出しタグとかは
好みな感じでカラーチェンジできるんだけど、
メインカラムとかの全体背景の色がね。。。

keni612

見えるかな?
ビミョーにピンクで、これが賢威のテンプレートメーカーで変えられない><

あれ?メインブログで使っているマネー版は変えられるんだけどな^^;

まぁ、いいや。
手動で変えちゃえ!

ってことで、

keni613

「外観」⇒「テーマ編集」から「design.css」を選択。

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

#container{ background-color: #fffff1; }

お、いきなり最上部にあったぜ!!

んで、これをカラーコード変更すればOK。
とりあえず、真っ白にしたいから、上記赤文字の部分を#fffに変更しました。