Harukiya Archives

2005/06/10

category / CSS

クールなデザインってなんだかわからないけど、とりあえず僕の中じゃマメ文字と英語表記だ（笑。どちらも、はた迷惑な話だが）限界はあるが、英字・数字は単純なラインでデザインされているので、つぶれにくい。フォントサイズを小さくしたい→日本語だとつぶれて読めない→英語表記にしる、という安易な考え。心配無用、continuation （継続）なんて僕にも読めない。辞書引きながら書いている。良い子はマネしてはいけません。

そして1ヶ所英語表記にしたが最後、とーたるばらんすとかの関係でワルノリはカスケード式に加速してゆく。テンプレート機能一覧で”<%topentry_youbi> - 曜日（洋風）を表示”はサポートされているので、月名部分の表記を英語化する方法2題。

HTML

1. <h2 class="date">
2. <a title="<%topentry_year> <%topentry_month> <%topentry_day> を開く" href="./blog-date-<%topentry_year><%topentry_month><%topentry_day>.html">
3. <%topentry_youbi>&nbsp;<%topentry_day>,
4. </a>&nbsp;
5. <a title="<%topentry_year> <%topentry_month> を開く" href="./blog-date-<%topentry_year><%topentry_month>.html">
6. <span><%topentry_month></span>
7. &nbsp;<%topentry_year>
8. </a>
9. </h2>

表示
Fri 10, June 2005

HTMLは、こんな感じ。<h2>の部分はテンプレにあわせてそれなりに。<span>がキモであり、span厨の症例でもある。

その1 CSS2でやる。

1. h2 a+a[title] span {
2. display: none;
3. }
4. h2 a+a[title~="01"]:before {
5. content: "January";
6. }
7. h2 a+a[title~="02"]:before {
8. content: "February";
9. }
10. h2 a+a[title~="03"]:before {
11. content: "March";
12. }
13. h2 a+a[title~="04"]:before {
14. content: "April";
15. }
16. h2 a+a[title~="05"]:before {
17. content: "May";
18. }
19. h2 a+a[title~="06"]:before {
20. content: "June";
21. }
22. h2 a+a[title~="07"]:before {
23. content: "July";
24. }
25. h2 a+a[title~="08"]:before {
26. content: "August";
27. }
28. h2 a+a[title~="09"]:before {
29. content: "September";
30. }
31. h2 a+a[title~="10"]:before {
32. content: "October";
33. }
34. h2 a+a[title~="11"]:before {
35. content: "November";
36. }
37. h2 a+a[title~="12"]:before {
38. content: "December";
39. }

月の元の数字部分は隠して、title属性セレクタのマッチする要素のcontentプロパティで月名を挿入。h2の部分はテンプレにあわせてそれなりに。

いつもならココで「さあ、今すぐあなたも Get Firefox !」とシメルのだけど、今日はIE6でも同様な表示をさせる方法も書いとく。（デジャビュな理由）

その2 javascriptでやる。

1. <script type="text/javascript">
2. function month_to_str () {
3. var m = Array( 12 );
4.  m['01'] = "January";
5.  m['02'] = "February";
6.  m['03'] = "March";
7.  m['04'] = "April";
8.  m['05'] = "May";
9.  m['06'] = "June";
10.  m['07'] = "July";
11.  m['08'] = "August";
12.  m['09'] = "September";
13.  m['10'] = "October";
14.  m['11'] = "November";
15.  m['12'] = "December";
16.  if ( document.getElementsByTagName ) {
17.   var h2list = document.getElementsByTagName ( 'H2' );
18.   if ( !h2list ) return;
19.   for ( var i=0; i<h2list.length; i++ ) {
20.    var h2 = h2list[i];
21.    if ( h2.className == "date" ) {
22.     var span = h2.lastChild.firstChild;
23.     if ( span ) {
24.      span.firstChild.nodeValue = m[ span.firstChild.nodeValue ];
25.     }
26.    }
27.   }
28.  }
29. }
30. month_to_str();
31. </script>

上のHTMLのままなら、<!--/topentry-->直後にコピペでOK。<h2>の部分をテンプレにあわせて修正した人は、強調部分が適合箇所になる。あとDTDがXHTMLなら、スクリプトは外部ファイル化が推奨です。

やがて、時は流れ ”<%topentry_emonth> - 月（洋風）を表示”なんて変数ができて、闇へと葬り去られるのであった（合掌 ）

writeback

1. マス ： 葛飾にペンギンを見た。-10日22時
2. お名前 ： 　パス ：
   ご意見・ネタ・苦情など

< 会心の一撃 | 温故知新 > | 表紙へ戻る | 探す | 案内