いくつになったの

禁止事項

No reproduction or republication without written permission.
To use any of my site linkware JavaScripts, you must provide a link back to this url .

使い方

名前・生年月日を設定して、「ソースコードを作成する」ボタンをクリックすればできあがりです。
あとは作成されたソースコードをコピーして、あなたのブログの管理画面を開き、ブログパーツ用のスペースに貼り付けてください。

1.表示タイプを選びます

【1】
あお45ヶ月6日♪
5歳の誕生日まで209
script*KT*
★は、好きなマークや画像に変更できます。
お名前は省略できます。
【2】
あおは2月4日生まれ
45ヶ月6日♪

5歳の誕生日まで209
script*KT*
【1】に加えて誕生日も表示します。
お名前は省略できます。
【3】
あお
2月4日生まれ
45ヶ月6

誕生日まで209
script*KT*
★マークの設定はできません。
デフォルトは左寄せですが、詳細設定で変更できます。
お名前は省略できます。

2.生年月日などを入力します


名前生年月日
(※半角入力)
アクセント色
(※半角入力)
ベース文字色
(※半角入力)
カラーパレットから色を選択します カラーパレットから色を選択します
カラーパレットから色を選択します カラーパレットから色を選択します
カラーパレットから色を選択します カラーパレットから色を選択します
カラーパレットから色を選択します カラーパレットから色を選択します
カラーパレットから色を選択します カラーパレットから色を選択します
チェック
表示するものにチェックしてください。チェックを入れたものだけ、上から順に表示されます。
名前
表示するお名前を入力してください。無くても(削除しても)OKです。
(【1】【2】を選んだ場合は名前がないと「は4歳5ヶ月6日♪」のように「は」が残ってしまうので注意)
生年月日
年は4桁の西暦で。※未来の日付を入れないでください。
アクセント色
名前、カウント数字、マークの色です。
カラーパレットから色を選択しますをクリックするとカラーパレットから色を選択できます。パレットに無い色や、WebColorNameは直接入力してください。
削除して空欄にすると、ベース文字色と同じ色で表示されます。
ベース文字色
アクセント色以外の文字の色です。
削除して空欄にすると、スクリプトを設置するページで設定されている文字色になります。

1.増やしたい分を下のフォームに入力して、追加データを作成 をクリックします。
2.作成された追加データ(IkutuEC…)をコピーして、<追加データ挿入欄>に貼り付けます。

名前生年月日
(※半角入力)
アクセント色
(※半角入力)
ベース文字色
(※半角入力)
カラーパレットから色を選択します カラーパレットから色を選択します

<追加データ挿入欄>



※追加データを作成しただけではスクリプト作成時に組み込まれないので、かならず↑に貼り付けてください。
※追加したい人数分を貼り付けてください。何人分でもOKです。
※追加データは、既にwebサイト/ブログに貼り付けてある「いくつになったのEC1.3」へ表示人数を追加するのにも使えます。

肖像画像のように、それぞれに違った画像を表示させることができます。
アップロードした画像のタグ<img src="http://〜">を、名前欄に記入してください。

  1. まず、使用する画像を、ブログにアップロードしておきます。
    画像は、表示するサイズにあらかじめ縮小しておきます。もしアップロード時にサムネイル画像が作成されるならそれを使うといいです。
    幅は大きすぎるとブログのレイアウトが崩れるので、100ピクセルくらいまでが良いかと。
    縮小ソフトがなくてもweb上で簡単に縮小できます。(FC2画像縮小など)
  2. アップロードした画像をブログ記事に使用すると、記事の入力欄に「画像を表示するタグ」が表示されるので、それをコピーします。
    例えば、「gazou.jpg」という画像(横100ピクセル、縦120ピクセル)の場合、この画像のタグは次の部分です。
    <img src="http://(中略)/gazou.jpg" width="100" height="120" border="0" align="" alt="gazou.jpg" />
    コピーするのは上記のように、<img>のところだけです。<a href="http://〜">とか</a>はリンク用のタグなので要りません。
    ※「<」などの記号が欠けないように注意してコピーしてください。
    ※タグが表示されない場合、記事編集モードを変更してみてください。
    ※どうしてもタグが表示されない場合は、上のタグをコピーしてメモ帳などに貼り付け、画像のURLと画像サイズを書き変えて使ってください(--;)
  3. コピーしたimgタグを、このページの「2.生年月日などを入力します」の名前欄に貼り付けます。
  4. <br />をコピーして、imgタグの後に貼り付けます。(これは改行するためのタグです。)
    その次にお名前を記入します。
    最終的に、名前欄の中はこんな感じになります。
    <img src="http://(中略)/gazou.jpg" width="100" height="120" border="0" align="" alt="gazou.gif" /><br />お名前
    もし、お名前の下に画像を表示するなら、このようにします。
    お名前<br /><img src="http://(中略)/gazou.jpg" width="100" height="120" border="0" align="" alt="gazou.gif" />

3.詳細設定

必要に応じて設定してください。

名前と数字の強調太字にするときはチェック
横位置揃え
テキストリンク(script*KT*)は、右揃え固定です。
文字のサイズ
(年齢カウント)
貼り付ける場所の文字サイズに合わせる(推奨)
文字サイズを指定する
文字のサイズ
(誕生日カウントダウン)
年齢カウントに合わせる
文字サイズを指定する
カウントダウンを表示する期間
常に表示
日前からカウントダウン表示開始
誕生日当日のメッセージのみ
カウントダウンを表示しない
カウントダウン前後のマーク
生後日数
生後日数を追加する

 ○ 

どちらか選んでください。
1.生まれた当日を1日目と数える
2.生まれた当日は含まない(経過日数)

 年齢カウント(○歳○ヶ月○日)の数え方は、2.と同じ経過日数なので、生まれた当日を含みません。そのため1.を選んだ場合、生後1ヶ月までの期間は、生後日数と年齢カウントの日数が1日合わないように見えます。

追加スクリプトの挿入

4.ソースコードを作成します

ボタンをクリックするとソースコードが表示されます。コピーして、あなたのwebサイトやブログに貼り付けてください。

 

コピーの前に「プレビュー」をクリックして、正常に表示されるかどうか確認してください。

プレビューはポップアップウィンドウで開きます。表示されないときはブラウザやセキュリティソフトの広告ブロック機能にひっかかっているかもしれません。一時的に広告ブロック機能をオフにしてみてください。

トラブルシューティング

表示されない
  • 入力に間違いがあると表示されません。ソースコードを作成したら「プレビュー」で正常に表示されるかご確認ください。
  • 設置できないブログがあります。また、設置可能なブログでも設定や場所によって表示できないことがあります。
    詳しくは「HOW TO」(設置方法)をご覧下さい。
日数がずれている
お使いになっているパソコンの内部時計(Windowsの場合「日付と時刻のプロパティ」)をご確認ください。
また、生年月日を半角数字で入力しているかご確認ください。
その他
  • 基本的にカウント数字は太字(強調)表示ですが、お使いのブログのスタイルシート設定が優先されるので太字にならないことがあります。
  • 未来の日付を指定してのカウントダウンには使えません。

ソースコードの直接修正

ソースコードを貼り付けた後に設定を変更したいときや、表示する語句をオリジナルのものにするとき、参考にしてください。

修正するときはいきなりたくさん変更しないで、正常に表示されるか確認しながら、1箇所ずつ変更するのがおすすめです。また、ソースコードは1文字でも欠けると動作しなくなりますので、JavaScriptに詳しくない場合は十分ご注意ください。修正は基本的に自己責任でお願いします(-ω-)

var ichi="center";

メッセージの横位置の設定です。
left ⇒左寄せ
center ⇒中央揃え(センタリング)
right ⇒右寄せ
となります。(なお、script*KT*のリンク文字は、必ず右寄せです。)

var fs1="100%";

スクリプト全体の文字サイズの設定です。初期状態(100%)だと、貼り付けるページで設定されている文字サイズになります。
サイズを小さめにするなら85%、75%などに変更します。
ポイント(pt)やピクセル(px)、emなどでのサイズ指定でもOKです。

var fs2="100%";

誕生日カウントダウンの文字サイズの設定です。100%だと、上のfs1で設定した文字サイズが基準になります。

var bold=1;

アクセント色を強調しない(太字にしない)場合は、var bold=0; とします。

var age0=name+""+bm+""+bd+"日生まれ"+kai;
var age1=ysf+"";
var age2=msf+"ヶ月";
var age3=dsf+"";
var age4="";
var age5="生後";
//0年の時の代替テキストです。0年と表示するときは、var age5=ysf+"日";
var age6="";
//0ヶ月の時の代替テキストです。0ヶ月と表示するときは、var age6=msf+"日";
var age7="ちょうど";
//0日の時の代替テキストです。0日と表示するときは、var age7=dsf+"日";
var age8=name+""+bm+""+bd+"日生まれ"+kai+"今日で"+ysf+"歳です♪";

表示されるメッセージは、age0〜age8までの組み合わせになります。[ ]は変数。

通常の日
[name][ysf]歳と[dsf]日♪…age0+age1+age6+age3+age4
[name][ysf][msf]ヶ月ちょうど♪…age0+age1+age2+age7+age4
[name][ysf][msf]ヶ月[dsf]日♪…age0+age1+age2+age3+age4
生後1年以内
[name]生後[dsf]日♪…age0+age5+age3+age4
[name]は生後[msf]ヶ月ちょうど♪…age0+age5+age2+age7+age4
[name]生後[msf]ヶ月[dsf]日♪…age0+age5+age2+age3+age4
誕生日
[name]は今日で[ysf]歳です♪…age8

//変更例
var age0=by+"年"+bm+"月"+bd+"日から開始"+kai;
var age1=ysf+"年";
var age2=msf+"ヶ月";
var age3=dsf+"日";
var age4="経過";
var age5="";
var age6="";
var age7="";
var age8=by+"年"+bm+"月"+bd+"日から開始"+kai+"今日で"+ysf+"周年";

var kai="<B"+"R />";

改行しないときはvar kai=""; とします。
改行しないと、年齢表示と誕生日カウントダウンが1行で表示されます。
※複数人数分を全部1行で表示するには、Sa1、Sa0、script by KTのタグをdivからspanに変更してください。

var Start=366;

カウントダウンの開始日数です。任意の数字を設定してください。(※半角数字のみ)

  • 30日前から表示したい場合 ⇒ 30
  • 前日から表示する ⇒ 1
  • 誕生日にだけ表示 ⇒ 0
  • 常に表示する ⇒ 366
  • 表示しない ⇒ -1

var pre1=(ys+1)+"歳の誕生日まで"+rdf+"";
var pre2="明日は"+(ys+1)+"歳の誕生日です";
var pre3="Happy Birthday!!";

誕生日カウントダウンのメッセージ

//変更例
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>";

マークには、文字・記号の他に、web素材サイト等で配布しているアイコン画像などを使用することができます。

必ずお読みください
画像を使用する際は、その画像を配布しているサイトの利用規約を守って、十分に気をつけてお使いください。
『画像への直リンク』 と 『画像の共有登録』 は多くの場合禁止されています。

『画像への直リンク』とは
素材サイトで公開されている画像のURLをそのままimgタグのsrc指定する行為。(本来は画像を自分のパソコンに保存して、自分のサイト・ブログにアップロードした後のURLを指定します。)
⇒直リンクは素材サイトのサーバー負荷を高めるため、管理者(製作者)に迷惑がかかります。
『画像の共有登録』とは
画像を第三者と共有できるシステムにアップロードする行為。(FC2アイコンに素材サイトの画像をインポートして共有ONにして保存する行為、一部のオンラインゲームに使用する行為などです。)
⇒作成者以外による登録は、素材の再配布にあたります。
  1. 使用する画像をブログやサイトにアップロードします。
  2. 下のタグをコピーしてテキストエディタ(『メモ帳(notepad)』など)に貼り付けます。
  3. <img src='画像のURL' alt='' style='width: 画像の幅px; height:画像の高さpx; '>
  4. アップロードした画像の上で右クリック→「プロパティ」を表示して、URL(アドレス)をコピーして「画像のURL」と置き換えます。画像サイズは幅×高さで表示されています。
  5. できたタグを作成フォームの「マーク」欄へ貼り付けて、スクリプトを作成します。(または、貼り付けたスクリプトのマークと置き換えます。)

更新記録

2012/08/26
全ての表示タイプでお名前を省略できるようにしました。
表示タイプ【3】は、前はお名前を省略しても空行が残ってしまう設定だったのを直しました。
2010/03/03
外部スクリプト扱いだった「生後日数」を、詳細設定に組み込みました。
2010/02/21
「いくつになったの」の更新じゃないですが、「ヒトならいくつ」をBさんからお預かりしてこのサイトで公開開始。
2009/09/28
EC1.33へ。名前欄にタグを入力できるよう修正。(名前の「"」→「'」に変更)
2007/08/14
EC1.32へ。カウントダウンなしの時、追加スクリプトとの間が1行が空くのを修正。
2007/08/10
EC1.31へ。入力フォーム形式に変更。それに伴いブログでの公開終了。kai位置変更。
2006/7/12
バージョン1.3へ。
※MacTigar標準ブラウザのsafari2.0で見ると、カウントダウン日数がトンデモナイ数字になるというご指摘があり、Macユーザーさんのご協力を得て修正しました(ありがとうございました!)。
(日付の指定を"2000/1/1"⇒2000,1,1 のように変更、DateParceをgetTimeへ変更)
2006/6/27
こっそりバージョン1.2へ。
※センタリングはどうするの?というご質問が多かったので、スクリプト内で設定できるようにしました。それに伴い、出力形式を<div …></div>にしました。
※以前から「どこで入手するのか探すのに苦労した」という声が多かったので、リンク必須にさせていただきました。
2006/1/20
Macでコピペの際「\(円記号またはバックスラッシュ)」が「?」へ化けてしまうらしいので、結局エスケープは無しにしました。特に問題ない様子。
2005/5/4
密かにバージョン1.1へ。
※スクリプト内の終タグの「/」にはエスケープ記号(\)が必要だって知らなかったんです。常識知らずで済みません。更に間違い(汗)「</」という表記がスクリプト終了と認識されないように「</」を「<\/」とします。「/」だけの時は不要。
2005/4/27
EC1.0としてブログに公開。
アクセント色(名前と数字の色)をfontタグで10箇所以上設定していた(今思うとすごいな!)のを、「.fontcolor()」に変更し、色コード一箇所の変更で済むようにしました。また「ベース色」(アクセント色以外の文字)の設定項目をつけました。
・アクセント色、ベース色の変更は個別設定(短いソースの方)でできるので、何人分設置していても別々の色に色分けすることができます。
・全体設定の色コード(アクセント色、ベース色)では、個別設定の色を無視して一括変更できます。
・アクセント色(名前と数字)だけを太字にする・しないの設定をつけました。(全体設定)
・フォントサイズの設定がスクリプト内でできるようになりました。(全体設定)
・虹色バージョンが消えました。

本来ならver3.1とか4.0にするはずでしたが、色設定を簡単にしたために、結構人気があった虹色表示ができなくなってしまい、方向に悩んでいたことと、ブログユーザー増加に伴い、試験的にソースをブログで公開しようとしていたことから、それまでの版と区別することに。ECはEasy Custom版ということで。
2005/3/25
【ver3.0】(限定公開)
・関数形式にしました。個別設定(実行部分)で名前と生年月日を設定するので、個別設定を増やすだけで何人分も設置できるようになりました。
・生年月日が2月29日でも機能するようになりました。(うるう年以外の年には、2月28日を誕生日とみなします。)
・0年・0ヶ月・0日の代わりに好きな言葉を表示できるようにしました。
初期状態だと0歳0ヶ月10日のとき⇒「生後10日」、1歳0ヶ月15日のとき⇒「1歳と15日」と表示。
・カウントダウン(2行目)の色を変える機能を廃止。
2005/3/1
★【ver.2.3】誕生日が29・30・31日での不具合、カウントダウン不具合を修正
前の月に誕生日に当たる日がないと、日数表示がマイナスになっていたのを直しました。 また、カウントダウンで誕生日にメッセージの一部が表示されない(記入忘れ…)のを修正。
2004/11/27
★【ver.2.2】カウントダウン非表示設定の不具合を修正
非表示にしていても誕生日前日・当日にメッセージ表示されていました(汗汗)。
2004/7/19
★【ver.2.1】NN7.1で動作するよう修正
ネスケで動作確認を忘れていました(汗)。色変えの方法を変えたり、{ }を取ったりと修正。
2004/7/16
★【ver.2.0】誕生日までのカウントダウンをつけました。
その他、書き換え易いようにメッセージの設定部分と出力部分を完全に分けるなど大幅変更。 フォントタグの設定を変えたソースを4種類用意。
2004/3/23
★【ver.1.0】閏年の計算に、400で割り切れる年が入っていなかったのを修正。
【修正前】if((toYear%4==0)&&(toYear%100!=0))
→【修正後】if(((toYear%4==0)&&(toYear%100!=0))||(toYear%400==0))
※ご指摘ありがとうございました。
2003/11/26
★外部ファイル形式の使用法を付け加えました。
複数のページに表示したり、複数人数の表示に便利です。

2003/4/28
★NN7.0で表示されるように修正しました。
if-else構文の間違いを修正しました。;が多かったらしいです。(ネスケってシビアだわ〜。)他に変数の宣言(var)も全部付けました。
2003/1/20
★フレームページで使用できるようになりました。
フレームを使用したページで使うと、タグのtarget属性を無視して新規ウインドウを開いてしまっていたのを修正しました。today,btday,nameの前にvarを追加。教えて下さって有難うございました!
2002/6/20
★誕生日が1999年以前の場合に表示がおかしくなるのを修正しました。
「/*条件式*/」中のFullという部分(2ヶ所)を追加しました。
ただし、ブラウザがIE3、NN3の場合、見えなくなってしまいます。スミマセン。
(2000年以後の生まれならFullを削除しても正常に動きます。IE3、NN3でも見える…ハズ)
2001/10/23
2001年7月にサイト作りを始め、育児ページに「今、1歳○ヶ月です」と書いていたのですが、いちいち書き直してアップロードするのが面倒で、勝手に変わるのがないかなぁと検索したものの「○日経過しました」というのはあっても「○ヶ月○日経過」と表示するのが見つかりませんでした。HTMLの本を見たらJavaScriptとかいうヤツで出来そうな感じ…と、ズブの素人がいきなり思い立って作ってみたものです。他にも使って下さる方があればいいなと思い公開。