Harukiya Archives

2005/06/10

http://sug.blog2.fc2.com/blog-entry-189.html

H2

クールなデザインってなんだかわからないけど、とりあえず僕の中じゃマメ文字と英語表記だ（笑。どちらも、はた迷惑な話だが）限界はあるが、英字・数字は単純なラインでデザインされているので、つぶれにくい。フォントサイズを小さくしたい→日本語だとつぶれて読めない→英語表記にしる、という安易な考え。心配無用、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> - 月（洋風）を表示”なんて変数ができて、闇へと葬り去られるのであった（合掌 ペンギン）

< 05月 | 07月 > | 表紙へ戻る | 探す | 案内

2007年 11月　2007年 10月　2007年 09月　2007年 08月　2007年 07月　2007年 06月　2007年 05月　2007年 04月　2007年 03月　2007年 02月　2007年 01月　2006年 12月　2006年 11月　2006年 10月　2006年 09月　2006年 08月　2006年 07月　2006年 06月　2006年 05月　2006年 04月　2006年 03月　2006年 02月　2006年 01月　2005年 12月　2005年 11月　2005年 10月　2005年 09月　2005年 08月　2005年 07月　2005年 06月　2005年 05月　2005年 04月　2005年 03月　2005年 02月　2005年 01月　2004年 12月　

ホームページ アフィリエイト レンタルサーバー FC2ブログ キャッシング