« 世渡り上手かも | トップページ | 作品展 »

結婚記念日カウントダウン

 結婚してからの経過年月日と、結婚記念日までのカウントダウンです。

 「いくつになったの?(年齢表示&誕生日カウントダウン)」を、結婚記念日に使いたい…という要望が多いので、メッセージをちょっとだけ変更してみました。だもんで、スクリプトは全く同じです。

 5年目は木婚式とか、10年目は錫婚式とかが表示できるといいのかな…?もし使う人の要望があったら作ろうかな…(^_^;)

 ソースをコピーして貼りつけ、名前と結婚した年月日を書き換えてご使用ください。

■サンプル

□と△が結婚して
521日♪
6周年まで344

□と△が結婚して
15ヶ月22日♪
2周年まで192

□と△が結婚して
11ヶ月30日♪
明日で結婚1周年

□と△が結婚して
今日で1周年です♪
Thank you!!

  • 4色分表示されますので、不要な分は削除してください。
  • 色コード(#336699など、色を表わす数字)を変更して、自分の好きな色にできます。
  • メッセージは自由に変更できます。
  • フォントサイズの変更・センタリングがHTMLタグなしで変えられます。(ソースがむちゃ長いのはその所為なので大目に見てね;;)
  • このサンプルは、基本の文字サイズ設定を12pxにしています。ヤプログは10pxにするなど、お使いの環境に合わせて変更してください。

【注】gooブログ、yahoo!ブログでは使用できません。

■利用規約

  • 配らないでください。
  • テキストリンク(script by KT)は必ず表示してください。リンクウェアです。
    削除したり、見えにくくしないでお使いくださいね。

■ご質問は…

カスタマイズ方法のご質問や、貼り付けたのに表示されない…など、トラブルの場合は、メインサイトのBBSまたはメールフォームでご質問ください。

トラブルの場合は、

  • どういう症状か。
  • 貼り付けたページのURL(http://〜)
  • ページのどの場所に貼り付けたか

この3点を書いてくださいね。(スクリプトはできるだけ貼り付けたままの状態でお願いします)

■使い方

  1. 下記の枠内のソースをコピーします。

    (マウスで枠内の文字を全部ドラッグして反転する→反転した上で右クリック→コピー)
  2. <!-- 結婚記念日スクリプト -->
    <!-- 共通設定 -->
    <script type="text/javascript">
    <!--
    // いくつになったの?EC1.3 結婚記念日バージョン
    // http://homepage2.nifty.com/coel/kid/
    // 以上削除禁止
    function Kekkon(name,by,bm,bd,ac,bc){
    var tday=new Date();
    var ty=tday.getFullYear();
    var tm=tday.getMonth()+1;
    var td=tday.getDate();
    function uruu(seireki){
    var ur=0;
    if (seireki%4==0){
    if ((seireki%100!=0)||(seireki%400==0))ur=1;};
    return(ur);
    };
    if (uruu(ty)==1)
    var num=new Array(31,31,29,31,30,31,30,31,31,30,31,30);
    else
    var num=new Array(31,31,28,31,30,31,30,31,31,30,31,30);
    var ld=bd;
    if (num[tm]-bd<0)ld=num[tm];
    var ys,ms;
    if (td<ld){
    if (tm<=bm) {ms=tm-bm+11,ys=ty-by-1;}
    else ms=tm-bm-1,ys=ty-by;
    }else if (tm<bm) {ms=tm-bm+12,ys=ty-by-1;}
    else ms=tm-bm+0,ys=ty-by;
    var ds,plus;
    if (num[tm-1]<bd) plus=0
    else plus=num[tm-1]-bd;
    if(td-ld<0) ds=plus+td
    else ds=td-ld;
    var nbd=bd;
    if (uruu((by+ys+1))==0){
    if (bm==2){if (bd==29) nbd=28;};
    };
    var nday=new Date(by+ys+1,bm-1,nbd);
    var rd=Math.ceil((nday.getTime()-tday.getTime())/(24*60*60*1000));
    //*****************************************
    /* ■位置・フォントの設定■ */
    var ichi="center"; /* 文字揃え(left、center、right)*/
    var fs1="12px"; /* 基本の文字サイズ(%,em,px,ptなど) */
    var fs2="100%"; /* カウントダウンの文字サイズ */
    var bold=1; /* アクセント色を太字にする→1、しない→0 */
    var acolor=""; /* 共通アクセント色(個別設定より優先)*/
    var bcolor=""; /* 共通ベース色(個別設定より優先)*/
    //---------------------------------------
    if (acolor=="")ac=ac; else ac=acolor;
    if (bcolor=="")bc=bc; else bc=bcolor;
    name=name.fontcolor(ac);
    ysf=""+ys;ysf=ysf.fontcolor(ac);
    msf=""+ms;msf=msf.fontcolor(ac);
    dsf=""+ds;dsf=dsf.fontcolor(ac);
    rdf=""+rd;rdf=rdf.fontcolor(ac);
    if (bold>0){
    name=name.bold(),ysf=ysf.bold(),msf=msf.bold(),
    dsf=dsf.bold(),rdf=rdf.bold();
    }else;
    //----------------------------------------
    /* ■年齢表示(1行目)のメッセージ設定です■ */
    var age0=name+"が結婚して<BR />";
    var age1=ysf+"";
    var age2=msf+"ヶ月";
    var age3=dsf+"";
    var age4="";
    var age5=""; /* 0年のときage1の代わりに表示 */
    var age6=""; /* 0ヶ月のときage2の代わりに表示(0年では非表示)*/
    var age7=""; /* 0日のときage3の代わりに表示 */
    var age8=name+"が結婚して<BR />今日で"+ysf+"周年です♪"; /* 記念日 */
    var kai="<B"+"R />"; /* 改行しないときはvar kai="";とする */
    //------------------------------------------
    /* ■記念日カウントダウン(2行目)の設定です■ */
    var Start=366; /*カウントダウンの有無、開始日数を記入してください */
    /* 常に表示する「366」・表示しない「-1」・誕生日にだけ表示「0」*/
    var pre0=""; /* カウントダウン前後の飾り文字 */
    var pre1=(ys+1)+"周年まで"+rdf+""; /* 通常の日 */
    var pre2="明日で結婚"+(ys+1)+"周年" /* 記念日の前日 */
    var pre3="Thank You!!!"; /* 記念日当日 */
    /* ■表示の設定は以上です■ */
    //*********************************************
    var Sa1="<div style=font-size:"+fs1+";text-align:"+ichi+";>";
    var Sa0="</div>";
    var Sc1="<span style=font-size:"+fs2+";>";
    var Sc0="</span>";
    if (bold>0)pre3=pre3.bold();else;
    pre0=pre0.fontcolor(ac);
    pre3=pre3.fontcolor(ac);
    if (ms==0){if (ys==0){age1=age5,age2=""} else age2=age6};
    if (ys==0)age1=age5;
    if (ds==0)age3=age7;
    var msg=age0+age1+age2+age3+age4;
    if (ms==0){if (ds==0)msg=age8;};
    var cd="";
    if (Start>=0){
    if (Start>=rd){
    if (rd==1)cd=pre0+pre2+pre0
    else cd=pre0+pre1+pre0};
    if (tm==bm){if (td==ld) cd=pre0+pre3+pre0;}
    };
    var output=msg.fontcolor(bc)+kai+Sc1+cd.fontcolor(bc)+Sc0;
    return (document.write(Sa1+output+Sa0));};
    // -->
    </script>
    <!-- 共通設定おわり -->



    <!-- 個別設定 -->
    <script type="text/javascript">
    <!--
    Kekkon("□と△",2000,6,6,"#336699","");
    // -->
    </script><br />


    <!-- 個別設定 -->
    <script type="text/javascript">
    <!--
    Kekkon("□と△",2004,1,5,"#CC6666","");
    // -->
    </script><br />


    <!-- 個別設定 -->
    <script type="text/javascript">
    <!--
    Kekkon("□と△",2004,6,28,"#99CC66","");
    // -->
    </script><br />


    <!-- 個別設定 -->
    <script type="text/javascript">
    <!--
    Kekkon("□と△",2004,1,5,"#FFCC00","");
    // -->
    </script><br />

    <!--リンク表示(削除しないでくださいね)-->
    <div style="font-size:10px;text-align:right;padding-right:10px"><a href="http://homepage2.nifty.com/coel/kid/" target="_blank" style="text-decoration:none;">*script by KT*</a></div>

  3. メモ帳を起動し、コピーしたソースを貼り付けます。

    (windowsのスタートボタン→すべてのプログラム→アクセサリ→メモ帳)
    いきなりブログのサイドバーなどに貼り付けると修正しづらいからです。
  4. 名前と年月日、色コードを書き換えます。

    ソースの下の方に、「個別設定」という部分があるので、ここを書き換えます。

    ===========================================
    <!-- 個別設定 -->
    <script type="text/javascript">
    <!--
    IkutuEC("□と△",2000,6,6,"#336699","#666666");
    // -->
    </script><br />
    ===========================================

    "□と△" → お名前に書き換えてください。

    2000,6,6, → 記念日を必ず半角数字で。2000/6/6はダメです。

    "#336699"
     → 名前・数字などのアクセント色を色コード(※)で指定します。お好きな色の色コードに書き換えてください。指定しないで「""」だけにすると、ベース色と同じ色になります。

    "#666666" → 文字のベース色を色コードで指定します。(注:ソース中では、貼り付けたページでの基本の文字色になるように、空欄としています。)お好きな色の色コードに書き換えてください。

    ===========================================

    ★色コードって? ⇒ web上で色を指定するときに用いる色番号です。
     Mariのいろえんぴつ様、色のみじん切り様などに見やすい表がありますよ♪


    例えば、次のように書き換えるとします。
    2004年1月5日が記念日
    数字の色(アクセント色)をオレンジ(#FF6600)
    その他の文字の色(ベース色)を黒(#000000)にする。

    IkutuEC("□と△",2004,1,5,"#FF6600","#000000");

    □と△が結婚して
    111ヶ月17日♪
    2周年まで14

    ===========================================

    「"」や、「,」などの記号を、誤って削除しないように気をつけてくださいね

    個別設定は4つありますが、足りない場合はコピペして増やしてください。不要の分は削除してください。
  5. 修正が終わったら、修正したソースを全部コピーします。
  6. お使いのブログでの、JavaScript設置方法(ブログパーツ設置方法)に従って、貼り付けます。

    ⇒主なブログ・ホームページへの貼り付け方はこちら。


    プロフィール欄に貼る場合の注意点

    プロフィール専用欄に貼ると、
    動作しない場合があります。(ココログ、ライブドアブログ、sb、LOVELOG、FC2などで確認されています。)入力画面に、もし設定があれば「自動改行-オフ」にしてみてください。その場合、スクリプト以外の文が改行されなくなるので、改行したい行には、行末に改行タグ<BR>を付ける必要があります。

    基本的には、フリーエリアなど、一般的にブログパーツを貼る場所に貼り付けてください。

  7. 保存して、ちゃんと表示されているか、確認してください。それ以上修正がなければ、終了です。
  8. メッセージ、フォントサイズ、その他の変更方法

    名前・年月日・色以外の設定は、「共通設定」の中に項目があるので、適宜書き換えてください。

    ここも、「"」、「,」、「+」などの記号を、誤って削除しないように気をつけてくださいね。

    ★以下の説明は「いくつになったの?」の変更説明ですが、スクリプトが同じなので流用しています(^_^;)
  9. /* ■位置・フォントの設定■ */

    var ichi="center"; /* 文字揃え(left、center、right)*/

    ※スクリプトの水平位置指定です。デフォルトはcenter(センタリング)ですが、左寄せするときはleft、右寄せはrightとしてください。

    var fs1="12px"; /* 基本の文字サイズ(%,em,px,ptなど) */

    ※文字サイズを指定しない(var fs1="";)と、基本的には周囲と同じになります。ここでは12pxにしていますが、ココログだと0.8em(サイズ可変)、ヤプログは10px(サイズ固定)が普通かも。

    var fs2="100%"; /* カウントダウンの文字サイズ */

    ※デフォルトは100%で、年齢表示と同じ文字の大きさですが、カウントダウン行だけちょっと小さくしたい時は80%などと指定します。他にもem,px,ptなどの単位が使えます。%、emの場合、上記fs1で設定した大きさが基準になります。

    var bold=1; /* アクセント色を太字にする→1、しない→0 */

    ※名前、数字(年月日)、カウントダウン数字を太字にする設定です。

    var acolor=""; /* 共通アクセント色(個別設定より優先)*/
    var bcolor=""; /* 共通ベース色(個別設定より優先)*/


    ※個別設定のアクセント色・ベース色と同じですが、ここで設定すると、個別設定より優先されます。まとめて変更したいときに。

    *******************************************


    /* ■年齢表示(1行目)のメッセージ設定です■ */

    ※ここから、メッセージ文の設定項目になります。難しいようですが、ルールさえわかれば簡単なので、オリジナルメッセージにチャレンジしてみてください。

    ※文字を記入するときは、「""」でくくること。
    ※nameやysfなどの変数との間に「+」を入れること。
    ※HTMLタグも使えます。ただしタグ内の""は削除してください。

    var age0=name+"は";

    ※主語の部分です。(「○○は○歳○ヶ月○日」で、○○は、の部分)。「name」には個別設定で記入したお名前が代入されます。

    var age1=ysf+"歳";

    ※ysfは年数です。年齢でなく経過年数表示のときは、"歳"を"年"に書き換えてください。

    var age2=msf+"ヶ月";

    var age3=dsf+"日";

    var age4="♪";

    ※述語の部分です。「"です"」「"になりました"」「"だよ"」などでも。

    var age5="生後"; /* 0歳のときage1の代わりに表示 */

    ※0歳と表示したい場合は、「var age5=ysf+"歳";」としてください。

    var age6="と"; /* 0ヶ月のときage2の代わりに表示(0歳では非表示)*/

    ※0ヶ月と表示したい場合は、「var age6=msf+"ヶ月"」としてください。ただし、0歳のときに限っては表示されません。

    var age7="ちょうど"; /* 0日のときage3の代わりに表示 */

    ※0日と表示したい場合は、「var age7=dsf+"日"」としてください。

    var age8=name+"は今日で"+ysf+"歳です♪"; /* 誕生日 */

    ※年齢でなく経過年数表示のときは、"歳"を"年"などに書き換えてください。

    =========================================

    ここでお分かりのように、「○○は○歳○ヶ月○日♪」というメッセージは、上の変数の組み合わせで表示される仕組みです。

    通常の日は、age0+age1+age2+age3+age4 です。

    1年未満(例えば0歳0ヶ月15日)なら、age0+age5+age3+age4 です。

    誕生日は、age8 だけです。(つまり誕生日は、他の日と違って縛りが無いので普段とは全然違うメッセージでも表示できます。タグを使って、この日だけフォントを変えたりもできます。)

    =========================================

    var kai="<BR />"; /* 改行するときは<BR />と記入 */

    ※カウントダウンを2行目に(改行して)表示するかどうかの設定です。一緒に一行で表示する場合、var kai="";としてください。

    *******************************************

    /* ■誕生日カウントダウン(2行目)の設定です■ */

    var Start=366; /*カウントダウンの有無、開始日数を記入してください */

    /* 常に表示する「366」・表示しない「-1」・誕生日にだけ表示「0」*/

    ※100日前からなら100、前日・当日のみなら1など、好きな日数から開始できます。

    var pre0="●"; /* カウントダウン前後の飾り文字 */

    ※★とか***とか適当に変えてください(^_^;)画像も使えます。

    画像を使うときは、

    var pre0="<img src=http://〜(自分の領域に自分でアップロードした画像のURL)>"

    とします。(直リンクは絶対にしないでください。この意味がわからない時は、やめておいたほうが無難です(^_^;))

    var pre1=(ys+1)+"歳の誕生日まで"+rdf+"日"; /* 通常の日 */

    var pre2="明日は"+(ys+1)+"歳の誕生日です" ;/* 誕生日の前日 */

    var pre3="Happy Birthday!!"; /* 誕生日 */

    /* ■表示の設定は以上です■ */

    …といいつつ、実はその下にまだあります。タグ解る人用の設定説明です。
    //************************************************************

    var Sa1="<div style=font-size:"+fs1+";text-align:"+ichi+";>";

    var Sa0="<\/div>";

    ※これは、スクリプトを出力するときのスタイル設定です。ここに直接スタイル指定を書き込めます。ここにclass指定をするときは、必ずclass="○○"の""を取って記入するか、エスケープしてください。

    var Sa1="<div class=○○;>";

    または var Sa1="<div class=\"○○\";>";

    あるいは下記のような記述でもOKです。(ただしAutoPage(TeaCupブログ)ではこれは使えません)

    var Sa1='<div class="○○";>';

    var Sc1="<span style=font-size:"+fs2+";>";

    var Sc0="<\/span>";

    こちらはカウントダウン行のスタイル設定です。

    構造をタグ風に書くと、

    <Sa1>年齢表示<Sc1>カウントダウン<Sc0><Sa0>

    のようになってます。

    ■更新記録

    【2005/7/12】バージョン1.3へ。
    ※MacTigar標準ブラウザのsafari2.0で見ると、カウントダウン日数がトンデモナイ数字になるというご指摘があり、修正しました。(日付の指定を"2000/1/1"⇒2000,1,1 のように変更)

    【2005/6/27】こっそりバージョン1.2へ。
    ※センタリングはどうするの?というご質問が多かったので、スクリプト内で設定できるようにしました。それに伴い、出力形式を<div …></div>にしました。
    ※前々から「どこで入手するのか探すのに苦労した」という声が多かったので、リンク必須にさせていただきました。

    【2005/5/4】密かにバージョン1.1へ。
    スクリプト内の終タグの「/」にはエスケープ記号(\)が必要だって知らなかったんです。常識知らずで済みません。更に間違い(汗)「</」という表記がスクリプト終了と認識されないように「</」を「<\/」とします。「/」だけの時は不要。Macでコピペの際\が化けてしまうようなので、エスケープ無しにしました(2006/1/20)

|

Javaスクリプト」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

パソコン・インターネット」カテゴリの記事

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/9774/8550098

この記事へのトラックバック一覧です: 結婚記念日カウントダウン:

コメント

この記事へのコメントは終了しました。