カテゴリ:SKIN( 16 )
マイスキン試行錯誤その12
☆ブラウザによる表示のされ方の違いを解消☆
・・・と大袈裟なタイトルをつけてみたけど、最初に断っておきますが検証したのは
Windows ME/IE5.5→Windows XP/IE6.0 だけです~。
最近PCを買い替えてこうなったのですが、これだけでも結構表示のされ方が違ったので。

タグの大文字小文字を区別する?!
基本的に、HTMLやCSSでは大文字と小文字は区別しないのでどちらで書いてもOKとなっています。
でも、CLASS名は大文字小文字の区別をするようです。
私は小文字でタグを書く派なので、マイスキンをいじる際も小文字を使っていました。
エキサイトでは全部大文字になっているので、最初はそれにあわせて大文字にしていたんですが、途中から面倒になって小文字で書いていたんです。
つまり、自分でいじった部分は大文字小文字が混在というあまり美しくない状態になっていたわけですが、どうやらCLASS名も大文字小文字が混在していたようで・・・(笑)。
IE6.0になってからうまく表示されなかった部分は、小文字で書いていた部分を大文字に直したら、表示されるようになりました。
自分のPCで今までちゃんと見えていたってことは、IE5.5ではCLASS名も大文字小文字の区別はしないのかな?
大文字小文字両方使ってる人は、ご注意ください(ってこんな事するのは私だけかなぁ~・笑)。

スクロールバーの色
ページ全体のスクロールバーの色を変える場合、IE5.5ではBODYに対してスクロールバーの色の設定をすればよかったのですが、IE6.0ではHTMLに対して設定しないといけないようです。
IE5.5とIE6.0両方でスクロールバーの色の設定を有効にしたい場合は
BODY,HTML{ スクロールバーの色設定 }
というふうにすればOKです。
私の今回のスキンでは、コメント欄はコメント欄の背景にあわせて別途スクロールバーの色設定をしているのですが、スクロールバーの色はぜ~んぶ同じでいい!という場合は
*{ スクロールバーの色設定 }
とするのが手っ取り早く確実かもしれません~。
参照:IE5.5 スクロールバー色 CSS 設定ページ 内の「IE 6でのスクロールバー色設定について」

勝手にセンタリング
これは別サイトでテーブルタグを使っている部分に現れた現象なんですが、今まではTABLEやDIV内の文章の行揃えは(ALIGNとかTEXT-ALIGNとか)省略すればデフォルトで左揃えになっていたのが、IE6.0ではセンタリングされるようです。
というわけで、左揃えにしたい部分には(私の場合大部分がそう)いちいち「text-align:left」を書き加えるという作業に追われたのでした・・・。

あくまでも、自分が作ってるサイト内で発見できた不具合にしか対応していませんが、他にもいっぱいあるかもしれません。
今IE5.5でのみ動作確認してる方に少しでも参考になれば・・・と思います。
[PR]
by kaokaopon | 2005-01-13 14:20 | SKIN
スキン変更♪
お正月バージョンのスキンから新しいのに変えました~。
ドラマ版「セカチュー」のタイトルバック風です(笑)。
細かいところで直したい所はまだいくつかあるのですが、気が向いたらそのうち・・・。
b0005267_15325199.gif


空の写真は、こちらでお借りしました。
きれいな空の写真がサイズも豊富で充実してます♪
b0005267_14204136.jpg
[PR]
by kaokaopon | 2005-01-10 14:41 | SKIN
はぴ~にゅ~いや~♪
あけましておめでとうございます。
今年もよろしくお願いします。

お正月バージョンのスキンを取り急ぎ作ってみたけど、変~!!(爆)
久々にスキンいじったら、どこがどうなってるやらさっぱり忘れていて苦労しました。
お正月バージョンのスキンは前々から作ろうと思ってたのに、結局今日になって慌ててやり始めたので適当になっちった~。

新たな技(?)は、画面の周囲を額縁風に囲むボーダー。
これ超簡単。
CSSの BODY{~} の部分に、
BORDER : #好きな色 線の幅px 線の種類 ;
を加えるだけです~。
いろいろ変えてみると雰囲気ガラッとチェンジする(かもしれない)ので楽しんでみてちょ。

b0005267_16475746.gif


あまり気に入った出来ではないので、5日くらいで元に戻すかまた新しいの作るかする予定(笑)。
[PR]
by kaokaopon | 2005-01-01 16:44 | SKIN
マイスキン試行錯誤その11
☆文字スタイルやリンク文字を好きな色に変えよう☆
苦労の甲斐あって、ほぼ自分の思い描いていた通りにカスタマイズも進み、後は文字スタイルやリンクの色など細かいところを直して無事マイスキン第1号完成♪
あまりよくわからないながらも、タグ辞典片手にCSSいじる作業はかなり楽しく、やみつきになりそうです。
楽しかったあまりに、ブログ始める前はまったく予定していなかったマイスキン講座(?!)なんかを無謀にもやってしまいましたが(笑)こんな素人丸出しのつたない説明でも参考に見に来て下さった方もいらっしゃったようで、ありがとうございました♪
スキンいじりについて書くのはこれにていったん終了とし、今後は本来やる予定だったコンテンツをシコシコ埋めていきたいと思います。
半年後くらいにまたマイスキン第2弾に挑戦したいと思ってるので、その時また何か新しい技を試してみたら、ここで紹介するつもりです☆

これだけじゃなんなので、最後に基本中の基本、
文字スタイルとリンク文字の設定の方法。

CSSソースの頭の方の
BODY,TD,DIV,LI { ~ }
の部分で、基本的な文字スタイルを指定しています。
同じくその下の
A:LINK { ~ }
A:VISITED { ~ }
A:ACTIVE { ~ }
A:HOVER { ~ }

の部分で、基本的なリンクスタイルを指定しています。
クラス単位など、個別に他のスタイルを指定しない限りはここで指定したスタイルが適用されます。
例えば、タイトルロゴの下のURLの文字スタイルとリンクスタイルを変更したい、という場合は
DIV.URL { FONT : ~ }
DIV.URL A:LINK { ~ }
DIV.URL A:VISITED { ~ }
DIV.URL A:ACTIVE { ~ }
DIV.URL A:HOVER { ~ }
と書き加えればOKです(URLはデフォルトでも別指定になってますが^^;)

それぞれの説明。
{ FONT : 文字サイズ 書体名 etc; COLOR : 文字色; 他指定 }
他指定の部分は、
マージン(他のクラスとの余白)を取りたいなら MARGIN : ~PX;
枠から文字の余白を取りたいなら PADDING : ~PX;
枠線で囲みたいなら BORDER : ~;
右詰・左詰・センター表示にしたいなら TEXT-ALIGN : (RIGHTまたはLEFTまたはCENTER);
文章の行間を広げたいなら LINE-HEIGHT : ~%;
背景色をつけたいなら BACKGROUND-COLOR : ~;
などなどを必要なだけズラズラッと並べてください。
本文など、文章が長くなる部分は行間を広げるのがオススメです。
読む人の目に優しいのはだいたい120%~150%くらいだそうです(ここでは120%)。

リンクスタイルは、それぞれ
A:LINK・・・まだクリックしてない(未訪問)リンク文字の色
A:VISITED・・・クリック済み(訪問済み)のリンク文字の色
A:ACTIVE・・・クリック中状態のリンク文字の色
A:HOVER・・・リンク文字にマウスが触れたときの色
で、以降 { ~ } の中でスタイルを以下のように設定します。
文字色指定は COLOR : ~;
下線をつけるかつけないかは TEXT-DECORATION : (NONEまたはUNDERLINE 指定しなければ下線がつきます);
他、今回ここではやってないけど、カーソルの形を変えたり背景色を入れたりクリックしたときにボタンのようにポチッと凹んだりなど、ここでいろいろ指定できます。

カラーコードは、私はこちらを参考にしています
「TAG index/カラーチャート - ホームページ制作情報」

最後に・・・。
せっかくスキンをきれいにカスタマイズしても、記事を投稿する際の基本的な注意点を忘れてはいけませんです。
機種依存文字を使ってはダメですよ~!
自分のブラウザでは正しく表示されても、他のブラウザやOSで見ると文字化けして何が書いてあるんだかわからない、という状態になってしまう恐れがあります。
特に丸囲み数字を使ってる人をよく見かけるので・・・。
詳しくはこちらで解説されています→「機種依存文字劇場」
[PR]
by kaokaopon | 2004-08-13 01:45 | SKIN
マイスキン試行錯誤その10
☆コメント投稿欄を装飾しよう☆
コメント投稿フォームも、本文にあわせて赤のドット線で装飾してみました。
DIV.COMMENT { ~ }
DIV.COMMENT_BODY { ~ }
DIV.COMMENT_TAIL { ~ }
DIV.COMMENT_INPUT { ~ }
DIV.COMMENT_LINE { ~ }

「COMMENT」と書いてあるからには、この辺りだろうな~と検討をつけて、BORDER指定を書き加えていきます。
DIV.COMMENT { ~ }
 ・・・コメント欄全体を囲む枠。ここでは現在3PXの赤ドット指定してあります。
DIV.COMMENT_BODY { ~ }
 ・・・コメント本文。ここでは文字の大きさと行間を変えてあるのみ。
DIV.COMMENT_TAIL { ~ }
 ・・・コメントにつく「Commented by kaokaopon at yyyy-mm-dd hh:mm」の部分
DIV.COMMENT_INPUT { ~ }
 ・・・コメント入力欄、非公開のチェックボックス、送信ボタンを囲む枠。ここでは無指定。
DIV.COMMENT_LINE { ~ }
 ・・・「トラックバックする」とコメント表示の間のライン。ここでは無指定。

本当は入力欄の枠線や背景色とかも変えたいんだけどな~。
今のところそれを設定できる場所がわかってませんです。
今後の研究課題!(笑)

↑入力欄のカスタマイズ方法について、またまた「はい こちらサポセン。」さんより回答をいただきました~!ありがとうございます♪
新しくコードを追加しなきゃいけなかったんですね・・・。
どうりで一生懸命既存の箇所をあちこちいじっても反映されなかったワケだ(笑)。
次回模様替え時(いつだ?!)に是非参考にさせていただきたいと思います。
こちらで詳しく解説されています。
「はい こちらサポセン。」さん 〆 スキン編集塾#6
「ぽっとの陽だまり研究室」さん コメント入力欄をちょっとおしゃれに♪ パート2
[PR]
by kaokaopon | 2004-08-11 00:48 | SKIN
マイスキン試行錯誤その9
☆スクロールバーの色を変えよう☆
多分これもさんざん既出ネタ。
改めてここで書かなくとも、あちこちで語り尽くされてることだとは思いますが(それ言っちゃうと背景画像やらタイトル画像やらもそうだろな~^^;)とりあえず今回のマイスキン作成で私が試したことは記録として全部残しておくつもりなので、「またこれかい!」とか「うちでも書いてるよ!」とか思われた方はゴメンナサイ。

CSSソースの、
BODY { ~ }
の中(カッコの中です)に、以下の指定を加えます。
scrollbar-track-color : #~;
scrollbar-face-color : #~;
scrollbar-arrow-color : #~;
scrollbar-3dlight-color : #~;
scrollbar-darkshadow-color : #~;
scrollbar-highlight-color : #~;
scrollbar-shadow-color : #~;

それぞれどの部分を指すか、言葉では説明し難いので図解してみました。
b0005267_2115814.gif

b0005267_21153052.gif

b0005267_21154620.gif

b0005267_2116135.gif

b0005267_21161660.gif

b0005267_21163037.gif

b0005267_21164668.gif

これでは3dlight-colorとhighlight-color、darkshadow-colorとshadow-colorの区別がつかないですけど、私もあまりよくわかってません(笑)。
arrow、3dlight、shadowの3箇所に色をつけると、こんな感じになります。
b0005267_145244.gif

highlight、darkshadowもあわせて同じ色にすると、はっきり濃い線になります。
b0005267_1471416.gif

face、3dlight、darkshadowに色をつけたこんな感じも、個人的に好きです。
b0005267_1522851.gif

いろいろ試して、お好みのスクロールバーに変えてみましょう♪
ただし、これはIE5.5以上のみの仕様のようです。
[PR]
by kaokaopon | 2004-08-09 01:57 | SKIN
マイスキン試行錯誤その8
☆投稿欄のタグボタンの属性を変えよう☆
投稿画面についてる、太字にする「B」、イタリックにする「I」、アンダーラインの「U」、取消線の「S」の各ボタンがありますね?
あれ、私使わないんです。
特にイタリックとか取消線なんて、どーゆー場面で使えばいいのか検討もつきません(笑)。
字が太くなったり斜めになったりするよりは、ワンタッチで文字色を変えたり文字の大きさを変えたりできるほうがいいなぁ~
・・・ということで、各ボタンの現属性を無効にして、それぞれ別の属性を割り当ててみました。

ここでは、現在
 「B」→赤い文字にする
 「I」→緑色の文字にする
 「U」→青い文字にする
 「S」→小さい文字にする
こうなってます。
これを設定する部分は、CSSソースの先頭の
BODY { ~ }
の後の辺りにでも下のように追加します。
BODYのカッコの中に入れちゃダメですよ!
B { FONT-WEIGHT : NORMAL; COLOR : #~; }
I { FONT-STYLE : NORMAL; COLOR : #~; }
U { TEXT-DECORATION : NONE; COLOR : #~; }
S { TEXT-DECORATION : NONE; FONT-SIZE : 10PX; }

B { FONT-WEIGHT : NORMAL;
これは、本来の<B>タグの「太字にする」という属性を無効にする文です。
太字のまま、文字色や大きさも変えたいという場合は、FONT-WEIGHT : NORMAL;の部分はいりません。
I { FONT-STYLE : NORMAL;
これは、本来の<I>タグの「斜め文字にする」という属性を無効にする文です。
同じく、斜め文字はそのままで…という場合は、FONT-STYLE : NORMAL;の部分はいりません。
U { TEXT-DECORATION : NONE;
S { TEXT-DECORATION : NONE;
これもそれぞれ、本来の<U>タグの「文字にアンダーラインをひく」属性、本来の<S>タグの「文字に取消線をひく」属性を無効にする文です。
本来の属性を残しておきたい場合は、TEXT-DECORATION : NONE;の部分はいりません。
自分でよく使いたい文字スタイルを、各ボタンに割り当てておくと便利だと思いますよ♪

あと、「”」←ちょっと違う?(笑)引用欄を装飾する方法です。
ここでは、現在こうなってます。

これも、上記の各タグの設定と一緒にこんな感じで追加してください。
BLOCKQUOTE { COLOR : #~; BACKGROUND-COLOR : #~; FONT-SIZE : ~; BORDER : 2PX #~ DOTTED; PADDING : 5PX; }

BLOCKQUOTE { ~ の最初の指定から説明すると、
COLOR : #~; で中の文字色(ここでは茶色)、
BACKGROUND-COLOR : #~; で中の背景色(ここでは淡いピンク)、
FONT-SIZE : ~; 中の文字の大きさ(ここでは12PXにしてあります)、
BORDER : 2PX #~ DOTTED; 枠線の指定で頭から枠線の太さ、枠線の色、枠線の種類(ここでは2PXのピンクの点線にしてます)。
PADDING : ~; 枠線から文字部分の余白の指定(ここでは四辺に5PXの余白を取ってます)。

余白指定なんですけど、四辺をそれぞれ別の数値にしたい場合は
PADDING : 5PX 10PX 5PX 10PX という風に連続指定するんですが、
私の持ってるタグ辞典には先頭から「上、右、下、左」の順と書いてあるんですけど、これあってます?
他の所で指定してみたら、右と左が逆だったような・・・。
自分で検証しろよって感じですね(笑)。
そのうち確かめてみますが、知ってる人がいたら教えてクダサイ(笑)。

↑「はい こちらサポセン。」さんより、回答をいただきました。
上、右、下、左 の順で正解だそうです。
ありがとうございました♪
[PR]
by kaokaopon | 2004-08-07 00:15 | SKIN
マイスキン試行錯誤その7
☆ユーザ名にメールフォームへのリンクを貼ろう☆
プロフィールの by ~ のところをクリックするとメールフォームが開くようにしたい。
ついでに、その部分をプロフィールと文字スタイルを変えたい。
そこで、またまたHTMLに追加クラスを作りました。
全体HTMLの中の<$nick$>の部分に、以下のように書き加えます。
<DIV CLASS=NICK>
<A HREF="mailto:xxxx@yyyy(自分のメールアドレス)">
<$nick$></A>
</DIV>

これで、ユーザ名にメールフォームへリンクが貼れました。

後は、CSSソースに
DIV.NICK { ~ }
で、ユーザ名のスタイルを指定します。
私の場合、ユーザ名を右詰にしたかっただけなんですが(笑)。
別にユーザ名のスタイルを変えなくてもいいという人は、もちろんCLASSなど作らずに
<A HREF="mailto:xxxx@yyyy(自分のメールアドレス)"><$nick$></A>
と書き換えるだけでOKですよ♪

最初は、メールフォームへのリンクを一生懸命CSSの方で設定しようと思ったんですけど、できませんでした。
CSSでできることとできないことの区別がいまだ曖昧なところがまだまだ素人な私です(笑)。
それとも他にできる方法があるのかな?
[PR]
by kaokaopon | 2004-08-05 23:09 | SKIN
マイスキン試行錯誤その6
☆本文タイトルの頭にアイコンを入れよう☆
↑この、黒い猫のアイコンです。
わかりにくいかもしれないけど、いちおう猫のカオですからねっ(笑)。

えー、アイコンを入れる前に、タイトルと「編集|削除」のところのスタイルを変えるのに挑戦したんですが、かなり四苦八苦しましたです。
CSSソースの
DIV.POST_TTL ~ が本文タイトルで
DIV.POST_ADMIN ~ が編集|削除の部分だろうなぁと検討をつけて文字色を変えたりサイズを変えたりしてみたものの、一向に反映されない!
なんで?なんで??
と悩むことン時間。
HTMLソースとCSSソースを見比べていて、気がつきました。
CSSの方で指定されている「POST_TTL」と「POST_ADMIN」が、HTMLソースのどこにもクラス設定されてないんですね。
本文HTML内の<DIV CLASS=POST_HEAD>~</DIV>の中に
<$postsubject$>(本文タイトル)や<$postadmin type=1$>(編集|削除)があるので、この辺りにクラス設定があってもいいはずなんだけど・・・。

というわけで、本文HTMLソースに勝手に作っちゃいました。
<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR><TD WIDTH=80%>
<DIV CLASS=POST_TTL>
<$postsubject$>
</DIV>
</TD>
<TD WIDTH=20% ALIGN=RIGHT>
<DIV CLASS=POST_ADMIN>
<$postadmin type=1$>
</DIV>
</TD>
</TR>
</TABLE>
</DIV>

赤字が書き加えた部分です。
これで、やっと本文タイトルや編集|削除のところを個別にスタイル変えられました♪

さて、本題のアイコンを先頭に表示させるには。
CSSソースの「DIV.POST_TTL ~」の部分に、次のように追加します。
DIV.POST_TTL { BACKGROUND : URL(自分のアイコンのurl) NO-REPEAT LEFT; PADDING-LEFT : 16PX(アイコンの幅+α);}

これは、アイコン画像を繰り返しなしで左側に表示、という指定です。
画像url指定だけだと、タイトル先頭の文字とアイコン画像が重なってしまうので、アイコン画像の分だけ左側を空けてタイトルを表示させるようにします。
それがPADDING-LEFT : ~PXの部分です。

タイトル全面に背景画像入れたりタイトルの下にライン画像を入れたり 、ここでもいろいろ遊べそうなのでいつか試してみたいと思います。
[PR]
by kaokaopon | 2004-08-05 14:26 | SKIN
マイスキン試行錯誤その5
☆本文枠やメニュータイトル枠などに下線をつけよう☆
プロフィールとユーザ名を赤ドット線で囲ったので、ページに統一感を持たせるために他の部分にも赤ドット線で装飾を加えることにしました。
つけたい部分は、ブログurlの下と本文の下(記事と記事の境をわかりやすくするため)と各メニュータイトルの下。

ブログurlは「URL」というクラスに入っているので、CSSソースの「DIV.URL { ~ }」 の下にでも、次の一文を加えます。
DIV.URL { BORDER-BOTTOM : 3PX #E9967A DOTTED; }

最初の「DIV.URL { ~… 」の中に「BORDER-BOTTOM ~」以下の文を挿入しても大丈夫です。
私は、長くなってわかりづらくなるし、後で修正が簡単なようにわざわざ別の指定にしました。

同じように、本文全体が入る「DIV.POST」、メニュータイトルが入る「DIV.MNTTL」にも同じように指定を入れます。
この他にも、好きなところに好きな枠線を入れてみていろいろ試してみてください♪

ちなみに、BORDERの指定は
 BORDER・・・・・・枠全体(四方を線で囲む指定)
 BORDER-TOP・・・・・・枠の上を指定
 BORDER-BOTTOM・・・・・・枠の下を指定
 BORDER-RIGHT・・・・・・枠の右を指定
 BORDER-LEFT・・・・・・枠の左を指定

となります。
メニュータイトルを1PXの黒二重線で囲みたい場合は、
DIV.MNTTL { BORDER : 1PX #000000 DOUBLE; }

という風に、線を入れる部分や色、線種などを変えてたくさんのバリエーションで楽しめると思います。
[PR]
by kaokaopon | 2004-08-04 23:49 | SKIN
↑ページTOP



KAOと旦那と3匹の猫のたわむれの日々。家に引きこもってるのでネタがありません。最近猫日記となりつつあります(笑)。
by kaokaopon
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
カテゴリ
全体
BBS
雑記
プレマタ
入院日記


観た
読んだ
作った
お取り寄せ
レシピ
SKIN
BLOG
WEB
日々。
ABOUT
以前の記事
2010年 10月
2010年 04月
2009年 08月
2009年 01月
2008年 10月
2008年 07月
2008年 06月
2008年 04月
2008年 03月
2008年 02月
2008年 01月
2007年 12月
2007年 11月
2007年 10月
2007年 09月
2007年 08月
2007年 07月
2007年 06月
2007年 05月
2007年 04月
2007年 03月
2007年 02月
2007年 01月
2006年 12月
2006年 11月
2006年 10月
2006年 09月
2006年 08月
2006年 07月
2006年 06月
2006年 05月
2006年 04月
2006年 03月
2006年 02月
2006年 01月
2005年 12月
2005年 11月
2005年 10月
2005年 09月
2005年 08月
2005年 07月
2005年 06月
2005年 05月
2005年 04月
2005年 03月
2005年 02月
2005年 01月
2004年 12月
2004年 11月
2004年 10月
2004年 09月
2004年 08月
最新のコメント
お初です。 私としまし..
by マッシー at 23:39
お久しぶりで~す。 K..
by NAONAO at 22:32
むかぁし、実家に大根をか..
by ゆうくん at 17:27
>非公開コメント様 返..
by kaokaopon at 18:21
>NAOさん お久しぶ..
by kaokaopon at 18:19
お久しぶりで~す。 っ..
by NAO at 22:59
>みちこちゃん うん、..
by kaokaopon at 00:06
コメントしとるやん!(笑..
by みちこ at 17:17
>まのさん はじめまして..
by kaokaopon at 00:05
かなりじかんがたってまし..
by まの at 07:59
>Tner-Harold..
by kaokaopon at 21:54
>mappyさん はじめ..
by kaokaopon at 21:54
体に気をつけて。
by Tner-Harold at 10:35
はじめまして。 アンダ..
by mappy at 00:35
>NAOさん こんばんは..
by kaokaopon at 23:36
こんばんは。NAOです。..
by NAO at 23:01
>みのりさん お~、みの..
by kaokaopon at 00:21
人間ドックですか~さすが..
by みのり at 23:15
>Naoさん いらっしゃ..
by kaokaopon at 23:40
Kaoさん、お言葉に甘え..
by KAO's blog at 21:40
フォロー中のブログ
食卓から愛をこめて
* もなこの手づくり石け...
だって私はドラマ好き♪
ベジタリアンの厨房
気ままな星遊び
笑門来福
pumilus sapo
母ちゃんちのご飯
***いつか出会えるあな...
茶タローくぅぅぅん.2
ほんの小さな庭
***やっと出会えたあな...
ゆっくりのんびりいこうじ...
ライフログ
タグ
(92)
(77)
(22)
(15)
(6)
検索
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧