<   2006年 03月 ( 30 )   > この月の画像一覧
2006年 03月 30日
爆発する文章
今回のカスタマイズは以前出した文字の移動の応用です


[PR]
by chocobopapa | 2006-03-30 19:56 | スキン編集
2006年 03月 29日
test


こんなこともできるんだぁ^^;;
と言うことでテスト中...




あなたの心が

開きますように














[PR]
by chocobopapa | 2006-03-29 11:16 | スキン編集
2006年 03月 27日
【HTML+TIME】 カスタマイズ 7?時間とともに文章を表示させましょう①

効果が見れるのはIE5以降だけです。他のブラウザの方ごめんなさい。
IE以外のブラウザの方には、ふつ~に表示されてしまいます。



雨が降ると心まで湿っぽくなってしまいます...
あなたは...いま...
何処にいるのですか?



あの日...

あなたに出逢わなければ...

私はきっと...





HTML+TIMEのカスタマイズです。いつもおこしになっていただきありがとうございます。
今回のカスタマイズは時間とともに文字を表示させるカスタマイズです。

その前にお願いです^^;
今回のソースを使われる方...出来たらでいいのでコメントくださいね^^
拝見させていただきたいので、よろしくお願いします。

あと、出来たら【HTML+TIME】のソースの転載はなるべくしないでね^^;



①と②は前回と同じです。
 前回のカスタマイズを行った方は、記事の書き方だけでOKです。

①HTML全体の一番最初の行に次の文をコピーしてください。
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<?IMPORT namespace="t" implementation="#default#time2">
この2行の文は、動きのなかったHTMLに動きを持たせるための宣言文です。
絶対に入れ忘れないで下さい。
今後のカスタマイズでも、この2行が必要になってきますので^^

②CSSの最後に次の文をコピーしてください。
.time {behavior: url(#default#time2);}

これで準備は終了。

記事の書き方(ちょっとずらしたほう)

<center>
<SPAN CLASS="time" begin="3" DUR="5">あの日...</SPAN><BR>
<SPAN CLASS="time" begin="6" DUR="5">あなたに触れて</SPAN><BR>
<SPAN CLASS="time" begin="9" DUR="3">私は...</SPAN>
</center>

解説
 1.<center>~</center>
     この文は間に挟まれているものを真ん中に表示させると言う意味です。
     省略すれば、post領域の設定に従います。(通常は左寄せかな?)
 2.あの日...
     ここの部分に表示させたい文章を書いて下さいね^^
 3.begin="3"
     ここは、ブラウザでこのページを表示させてから、拡大させるまでの秒数です。
     各行をずらして表示させています。
     1行目3秒後、2行目6秒後、3行目9秒後...
     同じ数字をいれると同じタイミングで表示されてしまいます(意味なくなっちゃう^^;;)
 4.DUR="5"
     表示させる秒数です。
     今回の場合最初の2行が5秒表示、最後の行が3秒表示にしてみました。
 5.<BR>
     行間調整に入れてます。見やすくするのに...入れなくてもOK!


記事の書き方(一行ずつ表示するほう)
<center>
<SPAN CLASS="time" begin="1" DUR="3">雨</SPAN><BR>
<SPAN CLASS="time" begin="4" DUR="3">雨が降ると心まで湿っぽくなってしまいます...</SPAN><BR>
<SPAN CLASS="time" begin="7" DUR="3">あなたは...いま...</SPAN>
<SPAN CLASS="time" begin="10" DUR="3">何処にいるのですか?</SPAN>
</center>

解説
 基本は先ほどの解説と一緒です。
 異なる点は...
   beginDUR の関係です。

 一行目のbegin(表示開始)は1、DUR(表示時間)は3 ... 一行目の表示終わりは4となります。
 そこで、2行目のbeginを4とすれば、一行目の表示終わりに2行目の表示となるわけです。



他にも制御方法はあるのですが...これが一番短い文でできますので^^;
他の方法はまたの機会にご紹介いたします。


また、今回のカスタマイズでは、一度きりの表示です...
次回は、何回も繰り返す表示の仕方をご紹介しますね^^;(え?いらん??ま、そういわずに^^;;)

最後にプレビューで見て調整してみてくださいね。

上手く出来ない方はご連絡くださいね。検証いたしますので
[PR]
by chocobopapa | 2006-03-27 12:39 | スキン編集
2006年 03月 23日
40 スクロールバーの色を変えてみましょう(CSS)

今回はスクロールバーのカスタマイズです...

スクロールバーのカスタマイズなんて、他でもやられているので目新しくはないです。

ということで、ちょっとがんばっちゃいました^^

私のHPのほうで新しいコンテンツを作ってみました^^

Scrollbar Color Customize というページを作ってみました^^
一度御覧になってください

宣伝はここまでで、カスタマイズ方法です

Scrollbar Color Customize にアクセスします(結局宣伝になっちゃってますね^^;;)

そこでいろいろいじってみてください。
気に入った色になりましたら、右下にあるボタンを『ぽち』
クリップボードにコピーされますので、CSSにペーストしてみてください。

わからないことありましたらコメントくださいね。
[PR]
by chocobopapa | 2006-03-23 23:12 | スキン編集
2006年 03月 19日
39 水平線を変更してみましょう③ IE only (CSS)

記事と記事の間にちょっと区切りをつけたいとき <hr> と言うタグを使います。

前回は一つの <hr> タグでしたが、今回は複数の <hr> タグを設定してみましょう
今回はIEに搭載されているfilterを使ってみましょう。(IE専用です)
  

                ↑
            標準の水平線
           
CSSの一番最後に次の文を追記します。
*前回 hrタグを設定した方は一度その設定を消して下さいね

HR.s10 {
color: #ff0000;
background-color: #ff0000;
height: 3px;
border: 0px;
filter: Alpha(opacity=100, finishopacity=0, style=1);
width: 480px;
text-align: center;
}

解説
 ①  color: #ff0000;
   ここは線の色を設定します。
 ②  background-color: #ff0000;
   ここはIE以外のブラウザ用の線の色を設定します。(IE以外は色しか設定できません)
 ③  border: 0px;
   枠の設定です。(今回は枠を使わないので0pxに)
 ④  height: 12px;
   線の太さを設定します
 ⑤filter
   filterの設定です
 ⑥  width: 500px;
   線の長さを設定します
 ⑦  text-align: center;
   線の配置場所を設定します。
   中央:center
   左  :left
   右  :right

記事投稿の仕方
  
こんな風に区切りをつけたい場所に
<hr class="s1">
  と打つだけ



HR.s10 {
color: #ff0000;
background-color: #ff0000;
height: 3px;
border: 0px;
filter: Alpha(opacity=100, finishopacity=0, style=1);
width: 480px;
text-align: center;
}


HR.s11 {
color: #ff0000;
background-color: #ff0000;
height: 3px;
border: 0px;
filter: Alpha(opacity=0, finishopacity=100, style=1);
width: 480px;
text-align: center;
}


HR.s12 {
color: #ff0000;
background-color: #ff0000;
height: 10px;
border: 0px;
filter: Alpha(opacity=100, finishopacity=0, style=2);
width: 480px;
text-align: center;
}


HR.s13 {
color: #ff0000;
background-color: #ff0000;
height: 10px;
border: 0px;
filter: Alpha(opacity=0, finishopacity=100, style=2);
width: 480px;
text-align: center;
}


HR.s14 {
color: #0000ff;
background-color: #0000ff;
height: 1px;
border: 0px;
filter: Alpha(opacity=100, finishopacity=0, style=3);
width: 480px;
text-align: center;
}



HR.s15 {
height: 5px;
border: 0px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#ffff0000, EndColorStr=#ff0000ff);
width: 480px;
text-align: center;
}


HR.s16 {
height: 7px;
border: 0px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#99ff0000, EndColorStr=#33ffff00);
width: 480px;
text-align: center;
}


HR.s17 {
color: #ff0000;
background-color: #ff0000;
height: 5px;
border: 0px;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=black, Strength=2, Direction=135);
width: 480px;
text-align: center;
}


HR.s18 {
color: #ff0000;
background-color: #ff0000;
height: 2px;
border: 0px;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#3333ff, Strength=2, Direction=180);
width: 480px;
text-align: center;
}

[PR]
by chocobopapa | 2006-03-19 23:27 | スキン編集
2006年 03月 19日
【HTML+TIME】 カスタマイズ 6 背景色を変化させて見ましょう

IE5以降だけです。他のブラウザの方ごめんなさい。

HTML+TIMEのカスタマイズです。
今回は、時間とともに背景色を変更する...です。
きっと華やかになる事と思います^^

その前にお願いです^^;
今回のソースを使われる方...出来たらでいいのでコメントくださいね^^
拝見させていただきたいので、よろしくお願いします。

あと、出来たらソースの転載はなるべくしないでね^^;




①と②は前回と同じです。
 前回のカスタマイズを行った方は、③だけでOKです。

①HTML全体の一番最初の行に次の文をコピーしてください。
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<?IMPORT namespace="t" implementation="#default#time2">
この2行の文は、動きのなかったHTMLに動きを持たせるための宣言文です。
絶対に入れ忘れないで下さい。
今後のカスタマイズでも、この2行が必要になってきますので^^

②CSSの最後に次の文をコピーしてください。
.time {behavior: url(#default#time2);}

これで準備は終了。でも記事書くときは結構大変ですのでがんばってみてください。

③HTMLの①の後ろに下の文をコピーしてください
<BODY ID="body1" STYLE="background-color:black;"><t:animateColor targetElement="body1" attributeName="background-color" begin="3" to="yellow" dur="10" autoreverse="true" repeatCount="indefinite" />

解説
 ①STYLE="background-color:black;
  最初に表示される背景色を設定します。カラーコードでもOKです。
 ②begin="3"
  ブラウザを開いてから色を変化させ始めるまでの秒数の設定です。
 ③to="yellow"
  何色に変化させるかを設定します。
 ④dur="10"
  何秒で変化させるかを設定します。(数字が小さいほど変化は早いです)
 ⑤autoreverse="true"
  変化させたあと、元に戻しますので true を設定しています
 ⑥repeatCount="indefinite"
  何回変化させるかを設定しています。
  そのページを表示している間変化させたいので indefinite を設定しています。

上手く出来ない方はご連絡くださいね。検証いたしますので
[PR]
by chocobopapa | 2006-03-19 21:46 | スキン編集
2006年 03月 19日
38 水平線を変更してみましょう② (CSS)

記事と記事の間にちょっと区切りをつけたいとき <hr> と言うタグを使います。

前回は一つの <hr> タグでしたが、今回は複数の <hr> タグを設定してみましょう
  

                ↑
            標準の水平線
           
CSSの一番最後に次の文を追記します。
*前回 hrタグを設定した方は一度その設定を消して下さいね

hr.s1{
color: #ff0000;
background-color: #ff0000;
border: 0px;
height: 3px;
width: 500px;
text-align: center;
}


解説
 ①  color: #ff0000;
   ここは線の色を設定します。
 ②  background-color: #ff0000;
   ここはIE以外のブラウザ用の線の色を設定します。(IE以外は色しか設定できません)
 ③  border: 0px;
   枠の設定です。(今回は枠を使わないので0pxに)
 ④  height: 12px;
   線の太さを設定します
 ⑤  width: 500px;
   線の長さを設定します
 ⑥  text-align: center;
   線の配置場所を設定します。
   中央:center
   左  :left
   右  :right

記事投稿の仕方
  
こんな風に区切りをつけたい場所に
<hr class="s1">
  と打つだけ


いろいろな水平線

HR.s2 {
height: 10px;
border: 3px;
border-color: #ff0000;
border-style: double;
width: 500px;
text-align: center;
}


HR.s3 {
color: #ff0000;
background-color: #ff0000;
height: 6px;
border: 3px;
border-style: double;
width: 500px;
text-align: center;
}


HR.s4 {
color: #ff0000;
background-color: #ff0000;
height: 3px;
border: 3px;
border-style: dashed;
width: 500px;
text-align: center;
}


HR.s5 {
color: #ffffff;
background-color: #ffffff;
height: 4px;
border: 1px;
border-color: #ff0000;
border-style: dashed;
width: 500px;
text-align: center;
}


HR.s6 {
color: #ff0000;
background-color: #ff0000;
height: 5px;
border: 5px;
border-style: dotted;
width: 500px;
text-align: center;
}


HR.s7 {
color: #ffffff;
background-color: #ffffff;
height: 9px;
border: 3px;
border-color: #0000ff;
border-style: dotted;
width: 500px;
text-align: center;
}


HR.s8 {
color: #5555ff;
background-color: #5555ff;
height: 9px;
border: 3px;
border-color: #6666ff;
border-style: inset;
width: 500px;
text-align: center;
}


HR.s9 {
color: #5555ff;
background-color: #5555ff;
height: 9px;
border: 3px;
border-color: #6666ff;
border-style: outset;
width: 500px;
text-align: center;
}

[PR]
by chocobopapa | 2006-03-19 16:45
2006年 03月 18日
リクエスト募集中
前の記事のように、いろいろな事が可能になってきました^^

ただ、IEだけってのが難点ですが...


こんなこといいなっ!できたらいいなっ ♪ みたいな事ありましたらご連絡ください

研究してみますので...

 
前の記事のカスタマイズも、順次公開予定です。もうしばらくお待ちになってくださいね~
[PR]
by chocobopapa | 2006-03-18 13:00 | スキン編集
2006年 03月 18日
38 水平線を変更してみましょう① (CSS)

記事と記事の間にちょっと区切りをつけたいとき <hr> と言うタグを使います。

今回はこのタグのカスタマイズをして見ましょう。
    (IE以外のブラウザの方は、色しか変わりません;;)


                ↑
            標準の水平線
           
CSSの一番最後に次の文を追記します。

hr{
color: #ff0000;
background-color: #ff0000;
border: 0px;
height: 3px;
width: 500px;
text-align: center;
}


解説
 ①  color: #ff0000;
   ここは線の色を設定します。
 ②  background-color: #ff0000;
   ここはIE以外のブラウザ用の線の色を設定します。(IE以外は色しか設定できません)
 ③  border: 0px;
   枠の設定です。(今回は枠を使わないので0pxに)
 ④  height: 12px;
   線の太さを設定します
 ⑤  width: 500px;
   線の長さを設定します
 ⑥  text-align: center;
   線の配置場所を設定します。
   中央:center
   左  :left
   右  :right

記事投稿の仕方
  
こんな風に区切りをつけたい場所に
<hr>
  と打つだけ

表示例


[PR]
by chocobopapa | 2006-03-18 12:21 | スキン編集
2006年 03月 16日
HTML+TIME テスト中^^;
現在テスト確認中のHTML+TIME のカスタマイズのご紹介です
(IEの方にしか見えませんToT...ごめんなさいm(_"_)m

                       もうしばらくお待ちになってくださいね
                       ①落ちてくる文字

WELCOME

TO

Chocobo Style




②色が変わる文字と背景

ChocoboStyle




③ボタンで表示-非表示切替







④移動する画像



⑤グラジェント(画像の貼り付けではありません^^;;)

 テスト中 
いろいろと試しているので...
この頁はちょっと重くなってるかも...




⑥背景色切替

[PR]
by chocobopapa | 2006-03-16 21:47 | スキン編集

記事更新停止中です;;
by chocobopapa
    
since 2005.9.17
Count Down
Ranking

第10位

マイペース
SunSet Swish

第9位

Around The World
MONKEY MAJIK

第8位

恋のダウンロード
仲間由紀恵
with ダウンローズ

第7位

太陽の下
レミオロメン

第6位

Kiss Me Good-Bye
アンジェラ・アキ

第5位

Startin'/Born To Be...
浜崎あゆみ

第4位

SEXY BOY-そよ風に寄り添って-
モーニング娘。

第3位

純恋歌
湘南乃風

第2位

一剣
氷川きよし

第1位

サヤエンドウ
はだしのシンデレラボーイ
NEWS
Chocobo Style
    
以前の記事
    
カテゴリ
    
最新のトラックバック
美容
from 美容
Η(・∀・)イイ!!
from しんや
キッズコスメ
from キッズコスメ
負けても勝ち組w
from ドンパッチ
ホワイトツリー ビタフォ..
from 韓国コスメでべっぴん肌
スーヒャンスノー インテ..
from 韓国コスメでべっぴん肌
【化粧水】雪花秀 滋陰水
from 韓国コスメでべっぴん肌
韓国コスメ「雪花秀」に興..
from 韓国コスメが売れる理由
陸上 自衛隊のサイト集情報
from 陸上 自衛隊メンバー
横幅に戸惑った話 ~2年..
from ここから
    
フォロー中のブログ
    
その他のジャンル
    
ファン
    
記事ランキング
    
ブログジャンル
    
画像一覧
Copy Right Chocobo Style Since 2006