スキン編集覚書
侘助スキンにした時に、いじった部分の覚書。
1)本文内のリンク指定
body内のリンクのスタイルは特にいじらなければCSSの上の方の
A:LINK {************ }
A:VISITED {************}
A:ACTIVE {************}
A:HOVER { ************}
の部分で指定したスタイルになる。
今回はこのリンク色で本文内にリンクがあると、それがリンクだとちょっとわかりにくいかな?と感じた。元のリンク色の明度を上げたりしたけどあんまりピカピカした色もあれだし・・・。
かといってまったく別に鮮やかな色を設定するのもイマイチだし、リンクはわかりやすくが優しいデザインだといわれてるし・・。
と言う事で本文内のリンクにだけ別に「DIV.POST_BODY A:****」とクラスを作ってスタイルを設定。
アンダーラインラインを入れてみた。でもなんかもうちょっとナントカしたいな・・・と。
で、リンクの下のラインをドットに替える。
ついでにリンクを押した時、文字がへこんだようにする。
ドットにするには
BORDER-BOTTOM-STYLE : DOTTED; ←ボトムの線種
BORDER-BOTTOM-COLOR : #399; ←線の色
BORDER-BOTTOM-WIDTH :1PX; ←線の太さ
へこんだようにするには
position:relative;top:2px;left:2px;
topは上から下へ2px
leftは左から右へ2px動くということ。数字を大きくしたらそれだけ動きも大きくなる。
A:HOVERは基本のリンク設定でアンダーラインが設定されているのでこれをnoneにしないとアンダーラインとドットの二重線になってしまう。
これで、本文中にリンクを書くとこんな感じに・・・
ExciteブログTOPへ
実際のCSS
しかし・・・。CSSをいじくってるとFireFoxとIEではずいぶん違うもんだなあ・・・と思う。FireFonxでOKだったのをIEで見るとあれれ?と思い、IEでもうまくいくようにやり直す事がよくある。その逆もあるけどね。
今度のスキンはコメント入力欄に画像を入れてある。TOP画像の一部を色をちょっと淡くしてぼかしをかけたもの。(コメントくださる方、書きにくかったらゴメンナサイ。コメント見てたらちょっと殺風景かなと、ついいれちゃいました。)
前に「コメント入力欄をひろげて飾る」を書いた時、background-attachment: fixed;を入れるとfirefoxでは見えないと書いたのだけど、今回はFirefoxとIEどちらも見えてます。
background-attachment: fixed;を入れない代わりに、画像の位置指定をbackground-position: right bottom;にして、常に一番下に画像が来るようにしたらIEでも長文を入れても画像が上に上がりません。ちょっと微妙な動きをしますが(笑)
でもこれ、コメント欄のサイズにあわせた一枚画像だからかもしれません。
前回ワンポイントをbackground-position:95% 90%;くらいで下のほうに入れてた時は、fixedが無いと上へずれて行きました。
あ、ってことはワンポイントも、キャンパスのサイズをコメント欄のサイズに合わせりゃいいのか?
コメント入力欄のCSS
スキンの記事を見に来てくださる方へ。
うちのパソコンのブラウザがIE6とFirefox1.0なので、それ以外のオペラ等のブラウザはどう見えてるのか確認できてません。
ネスケはかなり違う?マックでIEの方なんかはどう見えてるんだろう?一応公開で書いてるブログだから弱小と言えども気にはなるんですけどね。でもまぁ・・・。変だよと言われても直せるスキルはないし(汗
自分家でちゃんとみえてりゃいいかと言う、その程度の者が書いてることなのですから。
もし雀屋の記事を見て、スキンをいじる気になったら、いじる前に必ずバックアップをお取りくださいね。
1)本文内のリンク指定
body内のリンクのスタイルは特にいじらなければCSSの上の方の
A:LINK {************ }
A:VISITED {************}
A:ACTIVE {************}
A:HOVER { ************}
の部分で指定したスタイルになる。
今回はこのリンク色で本文内にリンクがあると、それがリンクだとちょっとわかりにくいかな?と感じた。元のリンク色の明度を上げたりしたけどあんまりピカピカした色もあれだし・・・。
かといってまったく別に鮮やかな色を設定するのもイマイチだし、リンクはわかりやすくが優しいデザインだといわれてるし・・。
と言う事で本文内のリンクにだけ別に「DIV.POST_BODY A:****」とクラスを作ってスタイルを設定。
アンダーラインラインを入れてみた。でもなんかもうちょっとナントカしたいな・・・と。
で、リンクの下のラインをドットに替える。
ついでにリンクを押した時、文字がへこんだようにする。
ドットにするには
BORDER-BOTTOM-STYLE : DOTTED; ←ボトムの線種
BORDER-BOTTOM-COLOR : #399; ←線の色
BORDER-BOTTOM-WIDTH :1PX; ←線の太さ
へこんだようにするには
position:relative;top:2px;left:2px;
topは上から下へ2px
leftは左から右へ2px動くということ。数字を大きくしたらそれだけ動きも大きくなる。
A:HOVERは基本のリンク設定でアンダーラインが設定されているのでこれをnoneにしないとアンダーラインとドットの二重線になってしまう。
これで、本文中にリンクを書くとこんな感じに・・・
ExciteブログTOPへ
実際のCSS
/*ポスト内のリンクの装飾*/
DIV.POST_BODY A:LINK{ COLOR: #494;
BORDER-BOTTOM-STYLE : DOTTED;
BORDER-BOTTOM-COLOR : #399;
BORDER-BOTTOM-WIDTH :1PX;}
DIV.POST_BODY A:VISITED{ COLOR: #494;
BORDER-BOTTOM-STYLE : DOTTED;
BORDER-BOTTOM-COLOR : #399;
BORDER-BOTTOM-WIDTH :1PX;}
DIV.POST_BODY A:ACTIVE{ COLOR: #0bb; }
DIV.POST_BODY A:HOVER{ COLOR: #d66; text-decoration: none; BORDER-BOTTOM-STYLE : DOTTED;
BORDER-BOTTOM-COLOR : #d66;
BORDER-BOTTOM-WIDTH :1PX;
position:relative;top:2px;left:2px;}
しかし・・・。CSSをいじくってるとFireFoxとIEではずいぶん違うもんだなあ・・・と思う。FireFonxでOKだったのをIEで見るとあれれ?と思い、IEでもうまくいくようにやり直す事がよくある。その逆もあるけどね。
今度のスキンはコメント入力欄に画像を入れてある。TOP画像の一部を色をちょっと淡くしてぼかしをかけたもの。(コメントくださる方、書きにくかったらゴメンナサイ。コメント見てたらちょっと殺風景かなと、ついいれちゃいました。)
前に「コメント入力欄をひろげて飾る」を書いた時、background-attachment: fixed;を入れるとfirefoxでは見えないと書いたのだけど、今回はFirefoxとIEどちらも見えてます。
background-attachment: fixed;を入れない代わりに、画像の位置指定をbackground-position: right bottom;にして、常に一番下に画像が来るようにしたらIEでも長文を入れても画像が上に上がりません。ちょっと微妙な動きをしますが(笑)
でもこれ、コメント欄のサイズにあわせた一枚画像だからかもしれません。
前回ワンポイントをbackground-position:95% 90%;くらいで下のほうに入れてた時は、fixedが無いと上へずれて行きました。
あ、ってことはワンポイントも、キャンパスのサイズをコメント欄のサイズに合わせりゃいいのか?
コメント入力欄のCSS
/*コメント入力欄を広げて飾る*/
TEXTAREA.TXTFLD {height:10em;
BACKGROUND-IMAGE : URL("画像のアドレス");
background-repeat: no-repeat;
background-position: right bottom;
}
スキンの記事を見に来てくださる方へ。
うちのパソコンのブラウザがIE6とFirefox1.0なので、それ以外のオペラ等のブラウザはどう見えてるのか確認できてません。
ネスケはかなり違う?マックでIEの方なんかはどう見えてるんだろう?一応公開で書いてるブログだから弱小と言えども気にはなるんですけどね。でもまぁ・・・。変だよと言われても直せるスキルはないし(汗
自分家でちゃんとみえてりゃいいかと言う、その程度の者が書いてることなのですから。
もし雀屋の記事を見て、スキンをいじる気になったら、いじる前に必ずバックアップをお取りくださいね。
by suzume-ya3
| 2005-01-04 15:44
| スキン編集