Lilypie Baby Tickerを貼ってみる

出産予定のあるご夫婦や赤ちゃんのいる方のために、gooブログでも利用できるちょっと嬉しいブログパーツ「Lilypie Baby Ticker」を紹介します。
このブログパーツは、出産予定日、子作り日、赤ちゃんの次の誕生日（1～5歳）などをグラフィカルに表示するものです。
＃ 5歳以上のお子様向けの「次の誕生日」もあります

● 2003年01月23日(JST)産まれの赤ちゃんの3歳の誕生日ティッカの例


このブログパーツはimgタグで表示可能な画像として提供されるため、scriptを使用できないgooブログでも利用することができます。ということで、早速Lilypie Baby Tickerをgooブログに設置してみましょう。

1. Lilypie.comにアクセス
   先ずは Lilypie.com にアクセスしてださい。
   次に、出産予定日や子作り日のティッカを作りたいなら「Create Baby days」のリンクを、赤ちゃんやお子様の次の誕生日のティッカを作りたいなら「Baby & Kids Birthday」のリンクを開いてください。
   
   
2. 出産予定日の場合 (Expecting a baby)
   「Create Baby days」のリンクを開くと「Expecting a baby（出産予定日）」のページが表示されます。
   「Baby's Due-date（出産予定日）」の欄を適切な値に変更してください。例えば、2005年12月31日に出産予定の場合は、Day: 31、Month: December、Year: 2005です。
   
   出産予定日が分からない場合は、「Estimated due-date」のリンクを開いてください。「First day of your last Menstrual Period（最終月経の初日）」、「Average length of cycle（月経周期）」、「Average Luteal Phase length（黄体期の日数）」を選択して[Calculate Due-date]のボタンを押すと、「Estimated Due-date」の欄に出産予定日が表示されます。
   
   「Timezone（タイムゾーン）」の欄を適切な値に変更してください。日本の場合は、[(UTC +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk]です。
   
   Baby meterやBaby day markerは、お好みの絵柄を選んでください。
   
   「Set Background（背景色）」は、白色にするなら「White Background」を、透過色にするなら「Clear Background」を選んでください。
   
   「Text above the ticker（ティッカ上部の文字列）」や「Left side photo（左側の写真）」のオプションは取り敢えず空欄がいいでしょう。ティッカ部分を作ってしまえば、文字や写真は通常の記事のように追加すれば良いのですから。
   
   それらを入力したら、[Creat Ticker]のボタンを押してください。
   
   妊娠後何週間経過したかマークされ、出産まであと何日か表示されます。
   
   
3. 子作り日の場合 (Trying To Conceive)
   「Create Baby days」のページで「Trying To Conceive」のリンクを開いてください。
   
   「First Day of Last Menstral Period（最終月経の初日）」の欄を適切な値に変更してください。例えば、2005年8月3日が初日だった場合は、Day: 3、Month: August、Year: 2005です。
   
   「Cycle length（月経周期）」の欄を適切な値（例えば28days）に変更してください。ただし、月経周期が21日未満だったり37日超過だったりする場合は、このティッカは使用できません。
   
   「Timezone」の欄を適切な値に変更してください。日本の場合は、[(UTC +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk]です。
   
   「TTC meter」や「TTC marker」は、お好みの絵柄を選んでください。
   
   「Set Background」は、白色にするなら「White」を、透過色にするなら「Clear」を選んでください。
   
   「Text above the ticker」や「Left side photo」のオプションは空欄がいいでしょう。
   
   それらを入力したら、[Creat Ticker]のボタンを押してください。
   
   月経周期に対する現在日付がマークされ、エッチに最適な日または妊娠検査日が何日後か表示されます。
   
   
4. 赤ちゃんやお子様の次の誕生日の場合 (Baby & Kids Birthday)
   「Baby & Kids Birthday」のページを開くと、「1st Birthday（1歳の誕生日）」から「5th Birthday（5歳の誕生日）」と「Next Birthday（次の誕生日）」へのリンクがありますので、1～5歳の誕生日にしたい場合は「1st Birthday」から「5th Birthday」の何れかを、お子様の次の誕生日の場合は「Next Birthday」を開いてください。
   
   「Baby's Date of Birth（赤ちゃんの生年月日）」や「Kid's Birthday（お子様の誕生日）」の欄を適切な値に変更してください。例えば、2005年6月18日生まれの赤ちゃんの場合は、Day: 18、Month: June、Year: 2005です。
   
   「1st Birthday」から「4th Birthday」を選んだ場合は、「Timezone」の欄を適切な値に変更してください。日本の場合は、[(UTC +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk]です。
   
   「Baby meter」、「Baby day marker」、「Kid's Birthday meter」、「Kid's Birthday marker」は、お好みの絵柄を選んでください。
   
   「Set Background」は、白色にするなら「White (Background)」を、透過色にするなら「Clear (Background)」を選んでください。
   
   「Text above the ticker」や「Left side photo」のオプションは空欄がいいでしょう。「Wording（言葉づかい）」は既定値のままでも変更しても構いませんが、値を入力する場合は英数字と一部の記号しか使えませんので注意が必要です。
   
   それらを入力したら、[Creat Ticker]のボタンを押してください。
   
   赤ちゃんの誕生日の場合は、現在何ヶ月の位置にいるかマークされ、生後どのくらい経過したか表示されます。
   お子様の誕生日の場合は、あとどのくらいで次の誕生日になるか表示されます。
   
   
5. [Create Ticker]ボタンを押した後
   記事に貼り付けるなら、単純に「HTML Used for web, email and forums that allow HTML.」の欄にあるソースをgooブログの編集画面の本文欄に貼り付けるだけです。
   
   ブログヘッダやタイトル部分などに貼り付ける場合は、使用しているテンプレートが カスタムマーク の付いているものに限られます。
   貼り付け方法は、「CSSの編集」で各種ID/クラスの「背景画像」として画像に設定するか、gooブログアドバンスなら「HTMLの編集」で好きな位置に上記HTMLソースを貼り付けるかのどちらかです。
   
   
6. CSS編集の例
   記事（エントリレイアウト）の上部に余白を設けて、その背景画像のURLにHTMLソースにあるimgタグのsrc属性の値（のみ）を指定する。
   
   ● 「HTML Used for web, email and forums that allow HTML.」欄に出力されるHTMLソースの例
   <a href="http://lilypie.com"><img src="http://lilypie.com/baby3/030123/1/5/0/+9" alt="Lilypie Baby Ticker" border="0" /></a>
   
   ● シンプル系テンプレート二段組（クリアブルー左やクリアオレンジ右）のCSS修正例
   
   Lilypie Baby Tickerの適用例

   【修正前】
   /* エントリーレイアウト用　*/
   #center {
     height:100%;
   }
   　↓
   【修正後】
   /* エントリーレイアウト用　*/
   #center {
     height:100%;
     /* 上部に画像の高さ＋αの余白を設ける */
     padding-top: 80px;
     /* Lilypie Baby Tickerの画像URL */
     background-image:
       url("http://lilypie.com/baby3/030123/1/5/0/+9");
     /* 繰り返しなし */
     background-repeat: no-repeat;
     /* 上部に中央寄せ */
     background-position: center top;
   }

   
   
7. 備考
   記事に挿入したりテンプレートのHTML編集したときには、Lilypie Baby Tickerの画像がバナーになっているのでいいんですが、テンプレートのCSS編集で背景画像に設定した場合は、ブログのブックマークに http://lilypie.com を追加してあげたほうがいいかも知れませんね。

ということで、あなたも赤ちゃんの誕生日（やエッチに最適な日）が待ち遠しくなる筈です。
＃ このティッカを利用しているのに、赤ちゃんができなかったりできちゃっても責任は持てませんが

● Lilypie Baby Ticker - lilypie.com
● CSS編集による適応例（『子供、いらない』付録GO）