2007年 03月 22日
背景色の変更
Nikon D200+Ai AF Zoom Nikkor ED 80-200mm F2.8D
f0018464_1713673.jpg

スキンについて、せっかく色々と勉強したので、
今回は背景色の変更方法について紹介しようと思います。
ただし、私の使用スキンはexite blogのTwo Colorsです。
Two Colorsの場合はこうだ、という形で話を進めます。
なお、私はスキン編集歴2日の素人なので、ある程度の知識のある方は笑って読み飛ばしてください。



 
     
 まず、CSS編集の文字列のトップの辺りに、こんな行があるはずです。

  BODY{ BACKGROUND : #282828; MARGIN : 0PX;PADDING : 0PX; }

この黄色の部分が背景色です。
替える場合は、色コード表から好みの色のコードをコピペして、置き換えて下さい。



 次に、もうちょっと下の方にいくと、こんな行があるはずです。

    DIV#TOP {
    BACKGROUND : #0F0F0F;
    BORDER-BOTTOM : 5PX SOLID #6D6D6D;
    PADDING : 25PX 25PX 0PX;
    }

この黄色の部分がブログのタイトルの背景色です。
好みの色のコードをコピペして、置き換えることが出来ます。
ちなみに緑色の部分は、タイトルの下にある灰色の線です。
5PXというのがその幅で、太くしたければ数値を大きく、細くしたければ数値を小さくして下さい。
緑の行を削除すれば線は無くなります。
なお、#6D6D6Dは灰色を表すコードです。他のコードに置き換えれば違う色になります。



 さらに、こんな行を探してみてください。

  DIV.MNTTL {
  PADDING : 2PX 10PX;
  MARGIN : 25PX 0PX 10PX;
  MARGIN-BOTTOM : 10PX;
  BACKGROUND : #151515;
  FONT-FAMILY : TAHOMA;
  LETTER-SPACING : 2PX;
  }

MNTTLとはメニュータイトルの略なのですが、
黄色の部分の色を変えればメニュータイトルバーの色が変わります。



 なお、理由は分からないのですが、カレンダーに関しては他のメニュータイトルバーとは別に変更する必要があります。CSSの中から、次の文字列を探してください。(結構後の方です)

  DIV.CAL_TOP {
  PADDING : 2PX;
  PADDING-LEFT : 10PX;
  MARGIN-TOP : 25PX;
  MARGIN-BOTTOM : 10PX;
  BACKGROUND : #EBEBEB;
  FONT-FAMILY : TAHOMA,;
  LETTER-SPACING : 2PX;
  }

この黄色の部分がカレンダーのメニュータイトルバーの色を決めています。




こんな感じですが、参考になりましたでしょうか?
これだけでも、結構雰囲気変わると思いますよ。
背景の場合、必ず「BACKGROUND :色コード」という形になっているので分かりやすいですよね。
他のスキンの場合でも、基本は同じなので同じようにやれば出来ると思います。

色以外もちょこちょこと替えているのですが、それは次回以降で説明します。

by muto2100 | 2007-03-22 16:22 | スキン編集 | Comments(14)
Commented by k-masa77 at 2007-03-22 19:19
おお! これは助かる
ぜひぜひ参考にしたいと思います
次回もよろしくです
Commented by yoruichi01 at 2007-03-22 20:15
こんばんは~♪

mutoさんの更なる挑戦…全然、付いていけないのですが…
参考になりますので、今後とも宜しくお願いします。
お邪魔ついでに一件だけ質問…
コメントを省略する時に
”内容が重複するのでコメントはこちらに…”
とリンクされてるのですが、どうやってやられてるのでしょうか…。
Commented by jin-na at 2007-03-22 22:08
こんばんやし。
昨晩は影響を受けて深夜まで色々やってしまいました。

やり方は粗方分かったけど、色を決めるのって難しいですね。
センスを問われるというか・・・。

写真以上に気をつかうかも・・・。
Commented by POKOパパ at 2007-03-22 22:21 x
今回は写真と違う話題ですが、これまた参考になりますね。
私もgooブログをなんとかexblog風にカスタマイズしようと
思ってるのですが、何をどうやったらいいのかさっぱりです。
mutoさんのこの記事がきっかけになって挑戦するかも。

こういうバックグランドカラーも落ち着いてていいですね。
Commented by tyamu-s at 2007-03-22 23:19
こんばんは(^o^)丿
お久しぶりです!!

さて、スキン変更に設定も変えておられるのですか!!
す・すごいですね(汗)
背景も落ち着いた感じで良いと思います(^^♪
自分だけのオリジナルスキン・・・
私も作って見たいものです(^^;;

ちなみに私はお友達に教えていただいたコメント欄を大きくするのしかしていません(^^;;
なお、今回、私もスキン変更をしたのですが文字が小さいのです(>_<)
でも、色的に気に入ってるので使用しています(汗)
Commented by しゃるだー at 2007-03-22 23:20 x
mutoさん、日々変わっていきますね。すごい!の一言です。
とても参考になるのですが、正直まだ?????って感じです(笑
今回のスキン変更シリーズが終わったら少しづつチャレンジしてみようと思います。
次回UPも楽しみにしています!
Commented by muto2100 at 2007-03-23 16:53
k-masa77さん、こんにちは。
スキン編集に関しては、最初はさっぱり分からなくて結構苦労しました。
なので、初心者が分かりやすいように、初心者が解説するのも良いかな、と思いUPしました。
参考になれば幸いです。
Commented by muto2100 at 2007-03-23 16:58
yoruichiさん、こんにちは。
>>内容が重複するのでコメントはこちらに…
これ、別に難しいことやっていませんよ。
普通に「こちら」の部分にリンクを貼り付けているだけです。
ただ、当該記事に飛ぶようにリンクされなくてはいけないので、
記事管理からリンクさせたい記事をピックアップして、
そのURLをコピーして貼り付けています。

<例>
※内容が重複するのでコメントは不可にします。コメントは<a href="http://muto2100.exblog.jp/4872185" target="_blank">こちら</a>にお願いします。

こんな感じです。
参考になれば幸いです。
Commented by muto2100 at 2007-03-23 17:02
jin-naさん、こんにちは。
>>やり方は粗方分かったけど、色を決めるのって難しいですね。
そうなんですよ。
適当に、色を持ってきても品の無いデザインになっちゃうんですよね。
その辺がなかなか難しいです。
私も、色に関しては何回も試行錯誤して、この状態に落ち着きました。
でも、色選びもなかなか楽しいものですね。
先日紹介した、和色大辞典はなかなかお勧めですよ。
微妙な色が沢山あって、色々な組み合わせが楽しめそうです。
Commented by muto2100 at 2007-03-23 17:05
POKOパパさん、こんにちは。
exite以外の人には分かりづらい話でゴメンなさい。
そんなわけで、一応写真も貼り付けているのですが・・・。
今回は、結構苦労が多かった分、達成感もありまして。
blogで紹介せずにはいられませんでした。(笑)

ディズニーシリーズが中途半端なので、一区切り付いたらディズニーに戻ります。
Commented by muto2100 at 2007-03-23 17:08
tyamu-sさん、こんにちは。
>>私も作って見たいものです(^^;;
私も最初はとてもじゃないけどオリジナルなんて無理だと思っていたのですが、
やってみれば結構何とかなるものですね。
結構色々なサイトで編集方法が紹介されているので、
今回はそれを読みまくりました。
出来るようになると、なかなか楽しいですね。
病みつきになりそうです。(笑)
Commented by muto2100 at 2007-03-23 17:11
しゃるだーさん、こんにちは。
オリジナルなものが出来るようになると、かなり嬉しいですよ。
ここでは初心者の方でもなるべく分かりやすいように、
初心者の私が初心者の立場で解説します。
難しい用語は、私にも分かりませんからね。
是非、挑戦してみてください。
Commented by atempo2006 at 2007-03-24 14:26
こんにちは。
スキンを変更なさったんだぁ~と思っていたら、
ご自分でカスタマイズなさっていたんですね。(^o^
しっかりと メモしました。φ(. . )
Commented by muto2100 at 2007-03-24 18:20
atempoさん、こんにちは。
スキンのカスタマイズはなかなか楽しいですね。
なるべく分かりやすく説明するつもりなので、参考になれば幸いです。
今後も、ちまちまと編集方法をUPしていきます。


<< ヘッダーの文字変更      Customize! >>