人気ブログランキング | 話題のタグを見る
多忙なため、コメントへのお返しができなくてごめんなさい。温かいコメントは更新の励みです。どうしても解決できない問題がある...という場合に限っての質問箱を設けましたので、よかったらご利用ください。いつもAnimal Skinを愛用してくださってどうもありがとう~♪
Top
★文字色の変化を指定する★
文字色の変更についてのお話です。^^

ちなみにこちらの配布スキンも、文字色変更等の参考になるかも...
⇒「ヒマワリの右メニュースキン」




文字色の変更についてお話します。
サイドバーでも簡単に説明してあるのですが、もうすこしだけ詳しくね。^^

まずはじめに、Animal Skinで配布しているスキンは基本形がほとんどなので、
色変更ができる部分というのもほとんど同じ、ではあります。

けれど、たまーにちょっと変わったタイプのCSSになっているのがあります。
そういう場合は、ここであげる例を参考に、いろいろ実験してみてください。
そう、スキンの改造とは、実験なのです。^^


エキサイトのスキン変更は、HTMLとCSSを使うのですが、
色の変更は...CSS(スタイルシート)編集で行います。

スキン変更ページの、下半分の枠がそうですね。

HTMLが、大まかなスキンの骨組みを設定するものなら、CSSは細部の調整をするもの...
そう思ってもらえればいいでしょう。


CSSを上から順番に見ていくと...↓のような箇所が最初のほうにでてきます。
これは、スキンによってトップ画像がここにあったりもするので、毎回すべて同じというわけではありませんが、例として挙げている基本情報はあまり変わりません。

BODY{ background:#FFFFFF; }
BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #777777; }


↑の最後、COLOR :#の後に続くのが。記事中の文章や、メニュー部分でメインとなる、つまり、リンク文字ではない、普通の文字の色です。
例に挙げている777777というのは、グレーですね。


文字色には黒やグレーを使う人が多いと思うので、サンプルを挙げてみましょう。


#000000
#111111
#222222
#333333
#444444
#555555
#666666
#777777
#888888
#999999

最初が真っ黒、次第にグレーになっていくのがわかりますか?
とはいっても、最初の3つくらいはあんまり変わってないような感じ...^^;

私個人の好みではありますが、Animal Skinで配布しているスキンには、
グレーの基本文字色を使ったものが多くあります。
白背景だと、真っ黒よりもグレー文字のほうが、目に優しい気がするので。

ちなみに、999999の次は、アルファベットが続きます。


#AAAAAA
#BBBBBB
#CCCCCC
#DDDDDD
#EEEEEE


EEEEEEになると、かなり薄くなるかな~。
もちろんこのあとには、FFFFFFが続くのですが、これは「白」です。
ここでは見えないので省きましたけどね。^^
薄い文字色は、濃い色の背景色を使いたいときに利用します。

と、これが基本の「黒~グレー~白」の色番号でした。

この数字とアルファベットを組み合わせると、とんでもない数の色数ができるわけで...
ネット上にあるすべてのサイトは、この6桁の番号で色を指定しているのです。

色の一覧表は、私はこちらのを利用させてもらってます。見やすくて便利ですよ♪ ^^

⇒基本カラー
⇒パステルカラー1
⇒パステルカラー2


また、こちらのサイトの管理人さんは、日本の伝統色を同様の色番号で紹介されています。
色の名前も素晴らしく、ああ、いいな~こういうの♪と思いますね~。^^
ページが開いたら、「日本の伝統色」をクリックしてください。
⇒「まなざしの工房」による、日本の伝統色



メインの文字色を変えるところはわかりましたね。

次は、リンク文字の色です。

CSS編集内には、このような部分と、それに似た箇所がいくつかあると思います。


A:LINK{ COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
A:VISITED{ COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
A:ACTIVE{ COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
A:HOVER{ COLOR: #8889A0; TEXT-DECORATION: NONE; }



これ↑は、リンク文字の色です。

上から

「基本のリンク文字色(クリックする前)」
「基本のリンク文字(クリックしてリンク先を訪問した後)」
「クリックしているときのリンク」(注※:←ここは省いてある場合も少なくない)
「カーソルが乗っているときのリンク」です。

それぞれの6桁を変えると、リンク文字の色が変わるのが予想できると思います。^^


こちらは↓ブログタイトルの文字色です。
基本的には↑で紹介したリンク文字色の変化と同じ働きをしますが、それそれの頭にDIV.HEADERと書いてあるので、この色文字の変化はヘッダと呼ばれるブログタイトル文字にのみに適応されるわけです。

DIV.HEADER A:LINK { COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.HEADER A:VISITED { COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.HEADER A:ACTIVE{ COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.HEADER A:HOVER { COLOR: #8889A0; TEXT-DECORATION: NONE; }



そうなると、こちら↓は同様に、URLを示す文字だけに適応する色変化となりますね。

DIV.URL A:LINK { COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.URL A:VISITED { COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.URL A:ACTIVE{ COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.URL A:HOVER { COLOR: #8889A0; TEXT-DECORATION: NONE; }



そしてこちら↓も同じ。ここでの色変化は、
ユーザーメニュー(Top | New Post | Config、トップ | 投稿 | 設定)に適応されます。

残念ながら現在のところ、スキン編集のプレビュー画面で、このユーザーメニューの文字色を確認することはできません。

DIV.USERMENU A:LINK { COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.USERMENU A:VISITED { COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.USERMENU A:ACTIVE{ COLOR: #3D3B3F; TEXT-DECORATION: NONE; }
DIV.USERMENU A:HOVER { COLOR: #8889A0; TEXT-DECORATION: NONE; }


※CSS編集内で色変化を指定するには、HTML編集でDIV設定をしていることが条件になります。

基本の文字色変化指定に関して、なんとなくわかってもらえたかな?

とにかく、スキンの中にある#を筆頭に続く6桁というのは、どこかの色なのです。

エキサイトのスキン編集ページでは、残念なことにプレビュー画面で確認できない箇所がいくつかあるのですが(コメント欄など)、編集用のスキンを別に作り、それを使って実験的に色を変えてみると失敗を恐れる心配がないかもしれません。

スキン改造に慣れるまでは、使用中のスキンのタグをすべてコピペして同じスキンをもう一つ作り、それであれこれ実験する...というのは基本ですからね。^^
もしも、どうしようもないくらいにメチャクチャになってしまっても、オリジナルが別にあるというのは救われますから。
Top▲ | by mari_ca by animal_skin | 2011-12-26 00:00 | その他
<< ★プルダウンによる「最新の記事... | ページトップ | ★画像転載禁止ブログパーツとマ... >>
↓質問はこちらへ↓