Crimson Report

<< 十月の雨 | 研究者と助手 >>


スポンサーサイト

Fri 18 11, 2005

Permalink : http://sug.jugem.cc/?eid=

一定期間更新がないため広告を表示しています

| posted at | filed under - | - | - |

Latest entry


styleDate(実況改造)

Thu 07 10, 2004

Permalink : http://sug.jugem.cc/?eid=131

リカバリしたり、台風が来たり、リカバリやり直したり、地震が来たりして放置しておりました。ゆうべの真夜中の地震、埼玉じゃ結構揺れたよ。沈着冷静をモットーとしている私も、さすがに目が覚めた。だって、市内の地震情報のスピーカー搭が近くにあるんですもの。それはもううるさくて、うるさくて。・・・今日もつかみは完璧だ。

しかし、毎度の事ながら本編のネタがない。リアルタイムでテンプレ改造しながらエントリも書くという試みの地平線(まだやってるんだろうか?北方謙三氏は。)をめざしてみる。(18:51)

とりあえずサイトを見ると、あまりにもサッパリしすぎている(本人は結構ギトついている)ので飾りネタをやることに決定。(18:57)

普通にCSSをあてるんじゃ面白くないので、装飾しにくい所をしやすくする方法を考えてみる。ターゲットはエントリの日付。まずは現状の確認。このテンプレのHTMLでは日付の文字列にパーマネントリンクを張って、さらにh2タグで囲んでいるのでソースは以下のようになっている。(19:05)

<h2><a href="{entry_permalink}" title="{entry_permalink}">{entry_date}</a></h2>

この{entry_date}を引数にしたスクリプトで、日付を分解し<span>タグで囲む。各パーツにクラスを指定できるようにする。スクリプトの役目は分解&クラス付けだけで、装飾はCSSでやる方法が簡単そうだ。

[ javascript ] (第一案)

<script type="text/javascript">
function styleDate(date) {
var tmp = date.split('.');
var yy = tmp[0];
var mm = tmp[1];
var dd = tmp[2].split(' ')[0];
var ww = tmp[2].split(' ')[1];
var outStr = '<span class="date">';

outStr += '<span class="y">' +yy + '/</span>';
outStr += '<span class="m">' +mm + '/</span>';
outStr += '<span class="d">' +dd + ' </span>';
outStr += '<span class="w">' +ww + '</span>';
outStr += '</span>';
document.write(outStr);
}
</script>
</head>

<!-- 呼び出し部分 -->
<h2><a href="{entry_permalink}" title="{entry_permalink}">
<script type="text/javascript">
<!--
styleDate('{entry_date}');
//-->
</script>
<noscript>
{entry_date}
</noscript>
</a></h2>

[ CSS ]

<style type="text/css">
.date {
cursor: pointer;
font-family: Trebuchet MS;
}
.date .y {
line-height: 1;
font-size: .7em;
}
.date .m {
line-height: 1;
font-size: .7em;
}
.date .d {
line-height: .9;
font-size: 2em;
font-family: Verdana;
font-weight: 700;
}
</style>

わりとあっさり完成。(19:43)

せっかくだから、文字列も変更できるように改造する。月の表示を略英字に変えたり、書き出す順序を変えたり、CSSでフロートさせたりと色々試してみる。が、飽きてきたようだ。(20:35)

[ javascript ] (第二案)

<!-- 強調部 変更箇所 -->
<script type="text/javascript">
function styleDate(date) {
var m = Array(12);
m['01'] = 'JAN';
m['02'] = 'FEB';
m['03'] = 'MAR';
m['04'] = 'APR';
m['05'] = 'MAY';
m['06'] = 'JUN';
m['07'] = 'JUL';
m['08'] = 'AUG';
m['09'] = 'SEP';
m['10'] = 'OCT';
m['11'] = 'NOV';
m['12'] = 'DEC';

var tmp = date.split('.');
var yy = tmp[0];
var mm = tmp[1];
var dd = tmp[2].split(' ')[0];
var ww = tmp[2].split(' ')[1];
var outStr = '<span class="date">';

outStr += '<span class="d">' +dd + ' </span>';
outStr += '<span class="y">' +yy + ' </span><br />';
outStr += '<span class="m">' +m[mm] + '. </span>';
outStr += '<span class="w">' +ww + '</span>';
outStr += '</span>';
document.write(outStr);
}
</script>

[ CSS ]

.date {
cursor: pointer;
font-family: Trebuchet MS;
}
.date .y {
font-size: .9em;
line-height: 1.2;
}
.date .m {
font-size: .9em;
line-height: 1;
}
.date .d {
display: block;
width: 1.5em;
float: left;
font-size: 2em;
line-height: 1;
letter-spacing: -.1em;
font-family: Verdana;
font-weight: 700;
}
.date .w {
display: none;
}

(20:40)

注意点としては、スクリプトオフの観覧を考えて書き出したタグの親要素のスタイルはいじらない方がよい。(21:00)

とかいいつつも、親要素もいじってみたりする。それと長いので”続きを読む”に退避。(翌日21:46)

| posted at 18:52 | filed under Memo | comments(11) | trackbacks(0) |


スポンサーサイト

Fri 18 11, 2005

Permalink : http://sug.jugem.cc/?eid=

| posted at | filed under - | - | - |


Comments & Trackback

  1. - : 管理者の承認待ちコメントです。

  2. - : 管理者の承認待ちコメントです。

  3. - : 管理者の承認待ちコメントです。

  4. - : 管理者の承認待ちコメントです。

  5. - : 管理者の承認待ちコメントです。

  6. - : 管理者の承認待ちコメントです。

  7. - : 管理者の承認待ちコメントです。

  8. - : 管理者の承認待ちコメントです。

  9. - : 管理者の承認待ちコメントです。

  10. - : 管理者の承認待ちコメントです。

  11. - : 管理者の承認待ちコメントです。


Search this site

about this site

Categories

Archives

Appddix