一応CSSが使えないブログ等向けなお魚日数経過スクリプト。

CSSが使えるブログやHPは前回のを自由に使ってもらったとして
CSSが使えねぇよ!ってブログなんかの場合はこっち使うといいかもたれ。
あと種目別なんかに分けたいとかってリクエストがあったので
テーブルにしたほうがいいかと思って
テーブルメインでいきまふ。
あんまごちゃごちゃ書かれるとわけわからんようなるからね。・゚・(ノ∀`)・゚・。
<!-- ここから表示部分 -->
<div  id="life-lis2"><!-- 置き換えモードで使うなら"life-lis"とする -->
<!-- ↑消しちゃ駄目! -->
<!-- CSSが使えないブログ等はこっちのテーブルを使用-->
<p>
<table width="200px">
<th style="border-bottom:1px dashed #333;" bgcolor="#222222"><font style="color:#0088ee;font-size:12px;font-weight:normal;">採取魚 経過日</font></th>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・フウライ 2009/11/3</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・トゲチョウ 2009/9/12</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・ツキチョウ 2009/9/12</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・サツキハゼ 2009/8/30</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・ヘビギンポ 2009/7/21</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・ナベカ 2008/9/14</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・ナミチョウ 2008/8/16</font></td></tr>
</table>
</p>
<p>
<table width="200px">
<th style="border-bottom:1px dashed #333;" bgcolor="#222222"><font style="color:#0088ee;font-size:12px;font-weight:normal;">飼育魚 経過日</th>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・クロナマコ 2009/10/26</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・スカンクシュリンプ 2009/10/26</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・クイーンエンゼル 2008/8/17</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・ミドリフグ 2008/5/11</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・フタイロカエルウオ 2007/11/25</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・クマノミjr 繁殖 2007/1/1</font></td></tr>
<tr><td><font style="color:#7F8E96;font-size:12px;font-family:Arial,Helvetica,sans-serif;">・クマノミjr 繁殖  2007/1/1</font></td></tr>
</table>
</p>

</div><!-- ←消しちゃ駄目! --> <!-- ここまで表示部分 -->

<!-- ここからスクリプト --> <script type="text/javascript"><!-- //スクリプトとHTMLタグの位置関係の変更不可 function keika(year,month,day,mode){ var hurai=new Date(year,month-1,day); var toge=new Date(); var nami=new Date(toge.getFullYear(),toge.getMonth(),0); var akebono,seguro,tonosama; var misuji=0; var hatatate=0; if(toge.getDate()>=hurai.getDate()){ tonosama=toge.getDate()-hurai.getDate(); }else{ if(nami.getDate()>=hurai.getDate()){ tonosama=(nami.getDate()-hurai.getDate())+toge.getDate(); }else{ tonosama=toge.getDate(); } hatatate=1; } if(toge.getMonth()-hatatate>=hurai.getMonth()){ seguro=toge.getMonth()-hatatate-hurai.getMonth(); }else{ seguro=12+toge.getMonth()-hatatate-hurai.getMonth(); misuji=1; } akebono=toge.getFullYear()-misuji-hurai.getFullYear(); var str = (mode)? '<font color="#666666">'+ year + '/' + month + '/' + day +'</font>'+'<br/>'+ ' 現在 (': ''; if(akebono) str += '<font color="#0088ee"><b>'+akebono + '</b></font>年'; if(seguro) str += '<font color="#0088ee"><b>'+seguro + '</font></b>ヶ月'; if(tonosama) str += '<font color="#0088ee"><b>'+tonosama + '</font></b>日 '; return (mode)? str + '経過)': str; } function setLife(id,mode){ var list = document.getElementById(id); if(!list) return false; list.innerHTML = list.innerHTML.replace(/(\d+)\/(\d+)\/(\d+)/g, function($0,$1,$2,$3){ return keika($1,$2,$3,mode); } ); } // 以下、実行 setLife(id,mode) setLife('life-lis',0); // 0: 置換モード setLife('life-lis2',1); // 1: 追加モード //--></script> <!-- ここまでスクリプト -->

上のスクリプトを実行するとこうなりまふ。



採取魚 経過日
・フウライ 2009/11/3
・トゲチョウ 2009/9/12
・ツキチョウ 2009/9/12
・サツキハゼ 2009/8/30
・ヘビギンポ 2009/7/21
・ナベカ 2008/9/14
・ナミチョウ 2008/8/16

飼育魚 経過日
・クロナマコ 2009/10/26
・スカンクシュリンプ 2009/10/26
・クイーンエンゼル 2008/8/17
・ミドリフグ 2008/5/11
・フタイロカエルウオ 2007/11/25
・クマノミjr 繁殖 2007/1/1
・クマノミjr 繁殖 2007/1/1


自分のとこの黒っぽい背景に合わせてフォントの色を勝手に決めちゃってるんで

その辺はユーザーさんのブログやHPの背景に合わせて
フォントのカラーを変更してやってください。
あと、上のスクリプトやタグ内でのタグ以外での改行禁止。
タグで改行入れるにしてもスクリプトやタグを十分理解してる人のみ。
じゃないと動かなくなるよ~。・゚・(ノ∀`)・゚・。

多分このネタはこれで最後。

2月後半で怪しい動きするかもだけど
きにせんといて(ぁ

テーブルタグの中の日付は半角で!

じゃないと認識できませんよ~!

15 comments

  • eiji
    宿題がてら提案を。
    前回も今回もソース部が長くて、初心者の方には気が遠く、あるいはうんざりの元なので、いっそのことソース作成フォームを作って置いておけば、気軽にポチッと作成して利用される方が増えるかも。
    生体名、購入日、あとは好みで色とか。
    如何に簡単そうに見せるかが敷居を下げる秘訣ですね♪
  • eiji
    あ。そうそう。
    高解像度のモニタでこのサイト見ると、なぜか横スクロールが発生してます。IE8でもFirefoxでも。
    だけど窓幅縮めたらスクロールバーが消えます。
    不思議な現象だ(汗)
    ちなみに窓幅が1400~1500pxを越えるとスクロールバーが発生するみたい。
    ちょうどオンロードのタイミングで突然現れますね。。。

    あ、で、IE8だと記事も狭くなってます(汗)

    こちらはfloatの処理をうまくすれば直りそうな感じ。

    宿題出し過ぎ(汗)

  • エイジさん
    フォームは一応視野には入れてるんですが
    なんせ昼も夜も忙しくて手がorz

    そのうち暇見てなんとかしまふ。

    あと高解像度モニターで表示が狂う・・

    ん~いつごろからだろ・・
    もしかしたらサイドウィジェットで使ってるインラインフレームのせいかしら・・

    一応自分の環境だとIEテスタとか使っても

    症状が出てない・・
    ん~自宅の巨大PCは片付けちゃったしなぁ・・・
    他のちゃんとしたスキン使うか・・orz
  • 会社のデスクトップで覗いてみますた。
    IE7でも記事の表示がおかしかったorz

    やっぱ他のスキン使おう・・

  • なんとかこの最新バージョンで進行中です~
    文字の大きさも無事変更できました^^

    ちなみにうちのパソコンからでは(たぶんIE7)何も問題があるようには見えませんが・・・

  • わもんさん
    あっこっちの奴でやってるんですね
    了解です~
    問題はですね。。
    デスクトップなんかの(最近のノート含め)
    高解像度モニターなんかで見るとわかるんですが
    どうにもこうにもおかしな表示してらっさりますw
    今使ってるノートがなんていうか
    中途半端な解像度でそっちの確認までしておりまへんでした(;´Д`)
    まぁスキンの変更でそれはなんとか・・
  • IEでの記事ずれについては、スキン変えなくても、entry-content に対して clear:both; を唱えれば回避できそうです。
     
    横スクロールの発生について、厳密に症状の出る窓幅を測ってみました。どうやら1414pxを超えるとスクロールバーが発生するようです。
    と言うことは、モニタの幅がコレ以下の人には気づけないバグですね。。。
  • .entry-content {
    display:block;
    margin-left:5px;
    margin-right:5px;
    margin-top:15px;
    overflow:hidden;
    }
    ってなってるのを
    .entry-content {
    clear:both;
    display:block;
    margin-left:5px;
    margin-right:5px;
    margin-top:15px;
    overflow:hidden;
    }
    ってすればOKですかね?
    取りあえず追加してみましたが
    どうでしょうか?
    横スクロール発生はどないしましょw
    {
    overflow-x : hidden;
    }
    で消えますかね?
    取りあえずこの行もbodyに対して追加してみますた。

    自分の環境だと検証できないので

    エイジさんお願いします。。。orz
  • 横スクロールが出るのはもしかして
    bodyに対してwidthを指定してないから??
  • エイジ
    IEで記事が狭くなってたのは直ったね。
     
    で、横スクロールですが、overflowによる措置は根本原因の解決にはなってないし、第一本当に横スクロールが必要なときに困ります。
    しかも今見たら、IE7だとまだしぶとく横スクロールが出てます(汗)
     
    ちょっと忙しくて詳しく見てあげられませんが、とりあえずの予想として、画像ビューワ系スクリプトのチェック、特にscrollWidthに影響しそうなコードをよく調べてみると良いでしょう。
    画像クリック時に半透過のマスクが背景に敷かれると思うので、きっとその幅がbodyを超えてるとか、ありがちな話です。
    きっとその辺の詰めが甘いんでしょうね。
     
    あるいは、スクリプト自体は問題ないけど、ゆーいちさんの組んだCSSが災いしてる可能性も無くは無いです(汗)
    同じスクリプトを使った他サイトを見てみて、もし横スクロールが出てないなら、このサイトでのCSS等の相性かな。
  • あやの
    なになに・・
    自動的に 日数が動いちゃうの???(^^)

    また すごいの、作ってますね~♪

    ゆーいちさんは こゆのが お得意で うらやましいですょ。

    私なんか パソコンでも 変なとこ押しちゃったら

    もどすのに 一苦労です・・。
    ・・知ってる方には 「変なとこ」じゃ ないんですけどね。f^^)

    最低限。 いつ 連れ帰って来たかは 覚えておきたいものです。。m(__)m うぅ。。

  • 最近、ここに居場所がないような・・・
    アナログな私にはなんのこっちゃです(T_T)
  • エイジさん
    んーーーーーーーーー
    CSS取りあえず被らないようにはしてるつもりなんですが
    どっかで被ってるか
    CSSの記述が間違ってるか・・

    ただ最初の頃はデスクトップで作ってたんですが

    その時も変な横スクロール出てたんで
    widthとか弄って消したつもりだったんですが
    何かが悪さしてるのは間違いないですが
    なんだろ?w
  • あやのさん
    もうちょい楽にみんなが気軽に作れるように改造中です(;´Д`)

    PC変なとこ押すとわからなくなります(爆

    生体はお持ち帰りしたときは殆どブログに書いてたりするんで
    それみて思い出したりしてます。・゚・(ノ∀`)・゚・。
  • もちのすけさん
    おっ。。そろそろこのネタも辛いんで
    そろそろ水槽ネタ出しておきますw

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です