FCafe  月・曜日表記変更別法

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 しかし、「そこまでやるならHTMLを一から手打ちしてFTP更新した方がまし」 と思ったりもします。
・・・もう少しスマートな方法は無いものでしょうか。

(スクリプトを用いず) CSSのみによって月名と曜日名を変更する別の方法を考えてみました。

 
【 設定法 】   CSSに以下の如くクラス設定を追加します (月・曜日をフル英語表記化する場合の例)
.day i {display:none}
/* ------------------- 月名設定 --- */
.m01:before{content:"January"}
.m02:before{content:"February"}
.m03:before{content:"March"}
.m04:before{content:"April"}
.m05:before{content:"May"}
.m06:before{content:"June"}
.m07:before{content:"July"}
.m08:before{content:"August"}
.m09:before{content:"September"}
.m10:before{content:"October"}
.m11:before{content:"November"}
.m12:before{content:"December"}
/* ------------------- 曜日設定 --- */
.Sun:after{content:"Sunday"}
.Mon:after{content:"Monday"}
.Tue:after{content:"Tuesday"}
.Wed:after{content:"Wednesday"}
.Thu:after{content:"Thursday"}
.Fri:after{content:"Friday"}
.Sat:after{content:"Saturday"}
テンプレートHTMLの head 領域 ( スタイルシート参照リンク以後 ) に以下のタグを追加します
<!--[if lt IE 8]>
<style type="text/css">.day i {font-style:normal; display:inline}</style>
<![endif]-->
日付部分のタグを以下のように書きます (例)
<h3 class="day m<%xxx_month> <%xxx_youbi>"><i><%xxx_month>/</i><%xxx_day><i> <%xxx_wayoubi></i></h3>

Sample

 

【 解 説 】   :befor/:after 擬似要素を用いて希望する形の月名(曜日名)を表示させようというもの。
御存知の如く 「IEでは(7でも)ダメ」 でして、そう云う方法は当店では従来御紹介して来なかったのですが、近々出る 「IE8」 ではサポートされるそうなので先物買い的に。 (一応条件コメントで 「8未満」 用のCSSも御用意しました)
  この方法では 日付部のソースはそのまま日付として(オートマトンにも)読めるようになっていますが、閲覧者に(ブラウザ上で)表示されるのは擬似要素のみです。(逆にHTML内にはその月・曜日名は出力されません)
お示ししたCSSの設定(:after/:before)、タグ組みは一例で、様々なアレンジが可能と思われます。  

Comment


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/588-4302ad5d

Shown after Admisson
.

≫ 月日表示一桁化別法 日付表記変更の問題点 ≪

2008 / 09 / 17  Wed
Entry   
Comment 0 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。