CSS 関連の記事はほとんどが IE では意味ないので悪しからず。さて、件の通り CSS の content プロパティの counters を使用した事を書いていきたいと思います。この件で検索すると例を載せた詳しい解説は山の様にあるのですが、親子孫(入れ子構造、ネスト構造とも言う) 関係を考慮した開始番号を指定して自動連番を行うという手法が見当たらなかったので、記事にします

実際、Panels UI Commands reference : 私的マニュアル の記事でこの手法を使っています。この記事の中で使用している ol 要素の CSS に自動連番を行っています。ダラダラと前置きが長くなるので、サッサと本題に入りましょう

1. ol {
2.   counter-reset: item 9;
3. }
4. li ol {
5.   counter-reset: item;
6. }
7. ol li {
8.   display: block;
9. }
10. ol > li::before {
11.   content: counters( item, "." )". ";
12.   counter-increment: item;
13. }

文章は一般的には 章 > 節 > 項 といった親子孫関係と言ったネスト構造となっています。新しい項が開始される際には、項は 1 から始まり、また、同様に新しい節が開始される際には、節は 1 から始まります。章は大元なので一つの章が終了しても、章番号は継続されなければなりません

上記サンプル CSS 1～3行では、カウンターの開始番号を指定しています。章番号は 10 番から開始したいので 9 と指定しています。しかし、このままだと 節、項 の番号も 10 番から開始されてしまうので、4～6 行にて大元の親以外の ol 要素にカウンターのリセットを指定しています。li 要素の中に含まれる全ての ol 要素を対象としているので、大元の ol 要素には適用されません

太字で記述されている部分が、カウンターにする任意の名称です。同一の HTML 文書において一意な名称にする事をお薦めします。斜体文字の部分は開始する番号を指定します。この例ですと 10 番から開始される事になります

item って、同じ名前使ってるじゃん。おかしくならないのか？と、疑問に思われる方もいると思いますが、CSS3 Generated and Replaced Content Module ここの記述からも解るように、ネスト構造の場合は内部的に自動的に新しいカウンターを生成します。プログラミングで言うならば、ローカル変数のスコープ範囲と言った所でしょうか

JUGEMお知らせブログ | 独自タグ一部変更のお知らせ に記載されている様に、私の左斜め下を行くような改悪です。何故この様な事を行うのか理解も納得できない…既存の独自タグを変更せずに独自タグを加えるという事なら理解も納得もできるが、もっとも重要である記事本文に置き換えられる ¹ 独自タグを変更するとは…('A`) ²

幸い、私のテンプレートではレイアウトが崩れる事はなかったのですが…³ テンプレート制作者、ブログ利用者、またそのブログ利用者もテンプレートを改造して利用している方などの影響を及ぼす範囲、またレイアウトが崩れていないかなどの各作業に取られる時間的コスト等を考える事はできなかったのでしょうか？

1. 因みにこの独自タグ、記事の続きがあると空のアンカー要素が記事本文の後ろに勝手に加えられます。てすとのたいとる を参照。HTML ソースを見れば解ります
2. この件に関しては既にサポート側に問い合わせているが、どの様な返答が来るか…
3. 全ての記事を確認はしていません

コード実行結果画像 ¹

某掲示板のスレにやっつけで、矩形だけでレーティングの設定を行う Panels UI の TF を挙げたんですが、その時に書いた TF のコードをもっと汎用的にしてみました

線描画のみなので、画像などのリソースは必要ありません。…が、下記のコードを見てお解りの様に美しくないです。² TF はループインストラクションがないので、どうしてもこうなってしまいます。あとは、レートの設定を行う事はできるんですが、該当のタグを消す事はできません

1. // Global
2. // padding (ボタン間の隙間)
3. $puts(m.p, 1)
4. // start at position (左上隅の描画開始位置 m.l=左 m.t=上)
5. $puts(m.l, 15)
6. $puts(m.t, 15)
7. // 矩形の幅 (ボタンの幅)
8. $puts(w, 20)
9. // 矩形の高さ (ボタンの高さ)
10. $puts(h, 5)
11. // 通常表示時の線の色
12. $puts(c.n, 212121)
13. // レイティングが設定されていた時のボタン全体の色
14. $puts(c.o, 212121)
15. // マウスポインターをボタン上に重ねた時のボタンの枠線の色
16. $puts(c.h, 808080)
17. // PerTrack
18. $rectabs(0, 0, %_width%, %_height%, $c(220,220,220), null)
19. $select(%rating%,
20.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null),
21.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
22.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null),
23.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
24.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null)
25.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h), $get(c.o), null),
26.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
27.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null)
28.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h), $get(c.o), null)
29.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*1}+{$get(m.p)*1}), $get(w), $get(h), $get(c.o), null),
30.   $rectabs($get(m.l), $eval($get(m.t)), $get(w), $get(h), $get(c.o), null)
31.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
32.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null)
33.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h), $get(c.o), null)
34.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*1}+{$get(m.p)*1}), $get(w), $get(h), $get(c.o), null)
35. )
36. $textbutton($get(m.l), $get(m.t), $get(w), $get(h),
37.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
38.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 5', tooltip, 'rate 5')
39. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*1}+{$get(m.p)*1}), $get(w), $get(h),
40.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
41.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 4', tooltip, 'rate 4')
42. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h),
43.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
44.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 3', tooltip, 'rate 3')
45. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h),
46.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
47.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 2', tooltip, 'rate 2')
48. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h),
49.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
50.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 1', tooltip, 'rate 1')

ボタンの表示順は上から 5, 4, 3…1 と 5段階に表示しています。基本的に太字部分の変数を適切な値に変更を行う事によって動作します。$textbutton() のパラメーター command はメニューを呼び出していますが、これも適切な値に変更します

ボタンの並び順は縦方向ですが、$textbutton() や $rectabs() の座標パラメーターを変更する事で横方向にボタンを描画させる事もできます

1. 掲載しているスクリーンショットの鏃の様なものは私が普段使用しているマウスカーソルです。ツールチップテキストが IrfanView のスクリーンショット機能で撮れていません…('A`)
2. $textbutton() や $rectabs() を $imagebutton(), $imageabs() に変更しても、そんなに変わりません。TF とはこんなもんです

WWW ブラウザを Firefox 2 に変更してからブックマークなどで favicon.ico が表示される様になったのですが、自分のブログにも favicon.ico を設置したいと思いましたが、以下に示す様な JUGEM 側の制約があるので、ちょっと考えてみました

• サーバーにアップできるのはフォームから入力する記事とテンプレート、それと画像ファイル
• アップできる画像ファイルは PNG, JPEG, GIF の 3つの形式のみ

この件で検索すると、かなりの対策案がヒットするのですが、どれも同じような対策案ばかりで捻りがありません。結局のところ、他のレンタルサーバーを借りてそこを参照するという方法ばかり…実際の所、どの様な仕組みで UA は favicon.ico を読み込んでいるのか？ 多分以下のような方法だと思うが…

• ドメインのルートディレクトリから favicon.ico を取得
• HTML の link 要素の href 属性の値から favicon.ico を取得

読み込む順番などは調べてないので解りません…('A`)

HTML に記述する場合は以下の様に head 要素の直接の子要素として記述します。XHTML の場合は以下の様に記述します

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico の URI" />

HTML の場合は以下の様に記述します

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico の URI">

rel 属性の値は icon, shortcut icon どちらでもいい様です

ん？ href 属性の値は URI…URI だから URL も含んでるよな…んじゃぁ URL スキームだと何でもいいんじゃないか？だったら data: スキーム ¹ でも表示できなければオカシイんじゃないか？

そう思い、早速、適当に用意したアイコンを URL エンコード して HTML ヘッダの link 要素を以下の様に追加して記述

<link rel="icon" type="image/vnd.microsoft.icon" href="data:image/vnd.microsoft.icon,%00%00%00…(長ったらしいので省略)" />

CTRL + R を押してブラウザをリロード…

favicon.ico の例 ('A`)

ちょッ…コレ…ほんとに表示されたよ…('A`) このままではアレ <sup>2</sup> なんで表示できる事が確認できたので、取り敢えず削除しました。現在はまともなアイコンが表示されているはずです。以上の方法だと HTML に埋め込める事ができ、サーバーに対しても接続リクエストが増えないので良いと思います…が！しかし、困った事に IE は URL の data: スキームを理解しないので表示されません…('A`) 今の所、私が検索して調べてみたり、やってみて解った事を纏めてみました

• link 要素の rel 属性は shortcut icon よりも icon と記述したほうが良いらしい ³
• link 要素の type 属性に指定する MIME タイプは image/x-icon よりも IANA に登録されている image/vnd.microsoft.icon の方が良いらしい ³
• link 要素の href 属性の値のファイル名は favicon.ico でなくてもよい ³
• Firefox では ICO 形式に加えて PNG, GIF 形式も表示できるらしい ³
• IE は URL の data: スキームを解釈しない
• Opera (9.25 で確認しました) は URL の data: スキーム中の MIME タイプを image/x-icon としなければ表示しない

記事を書いている最中、確認作業なんかも行いながら気付いたんですが、最初に書いた JUGEM の制約もクリアできそうな感じですね…めんどくさくなってやってませんが…('A`) その内、暇を見つけて確認作業を行いたいなと思ってます…その前に favicon.ico の表示自体をやめそうですが…('A`)

もともと、この機能に関しては IE は一番最初に実装したのにも関わらず、現在の所は機能、実装においては Firefox 2 が最も良いという皮肉な事になっている様です…

1. RFC2397 を参照 (私的和訳らしい…)
2. 私のサイトにはこの様なファンシーかつキュートなアイコンは似合わないと思います…('A`)
3. Favicon - Wikipedia を参照

Firefox 2.0.0.11

Opera 9.25

Internet Explorer 6

前回の記事で述べたように WWW ブラウザ の乗り換えと並行して、此処のテンプレートを新規で作成し直しました。何度か本サイトを訪問して頂いた方は気が付いたかもしれませんが…先日までは公式テンプレートを改造したものを使用していたのですが、レイアウトや文書構造を見直してみると、一から作った方がいいと思い、現在のテンプレートを作成しました。テンプレートの仕様はこのサイトの仕様にもなります。仕様は以下のようになっています

• 文字エンコードは EUC-JP ¹
  本来ならば、一般的な UTF-8 (Unicode) で記述したいのですが JUGEM の仕様上できない様です…
• 文書型定義 (DTD) は XHTML1.0 Transitional DTD
  とてもじゃないが XHTML1.0 Strict DTD では lint ² が通らない。サイトの機能上、必要な要素や属性が廃止されている為 Strict よりは要素やその属性の使用が緩和されている Transitional となっています
• 視覚 UA を対象にした CSS はレベル 3 まで使用
  視覚効果を狙っただけのものなので、内容自体には差違はありません。現在 Working Draft ³ の段階ですが CSS は試験的にレベル 3 も使用しています

  ---

• サポートしている UA
  サポートしている UA は Firefox 2, Opera 9, IE6 辺り ⁴ です。他の WWW ブラウザでは試していません。基本的に確認作業は Firefox 2 で行い、Opera 9, IE6 と順に確認しています。CSS の実装状況が絶望的な IE についはレイアウトが致命的に崩れない限りは切り捨てていきます
• CSS において使用している単位
  使用している単位は全て相対単位を使用しているので WWW ブラウザのウィンドウのサイズを変更してもみっともなく水平スクロールバーが現れたりする事はないはずです ⁵
• JUGEM の仕様上、発生してしまう lint のエラー
  JUGEM のブログは HTML テンプレート内に記述した独自タグを動的に置き換えて生成しています。その生成する内容に lint でエラーが発生する要素の記述がある為、これは避けようができません ⁶

  ---

• 2 カラム構成
  2 カラム構成でもご覧の様に記事が左カラム、メニュー、広告などは右カラムになっているので、記事主体の構成となっています
• Javascript に依存していない
  レイアイト、内容表示を行うにあたって Javascript に依存していないので Javascript を無効にしていてもブラウジングできます
• 外部リソース未使用
  テンプレート部分において画像などの別リソースが必要となるようなデザインはしていないので、ブラウジングが軽く、素早く表示される事を念頭に作成

大雑把なレイアウトはこんな感じ…

• ヘッダー
  ブログ名、ブログの概要、水平カレンダーなどのヘッダー部分
• 左右のカラムをラッピングするブロック要素
  • 左カラム
    ページナビゲーション、記事本体、コメント記入、トラックバック
  • 右カラム
    各種メニュー、広告
• フッター
  ブログ全体でのページナビゲーション、コピーライト、サムライト表示

如何に今まで使っていたテンプレートがやっつけ作業の改造ものだという事が今回の作業で解りました…('A`) テンプレートで使用している CSS などは今後記事にしていきたいと思います

1. IANA character-sets を参照
2. Another HTML-lint gateway を参照
   lint とは糸屑、埃などという意味。つまり HTML の埃をチェックします
3. CSS 3 - W3C Working Draft を参照
4. 掲載しているスクリーンショットが各ブラウザでの結果です。ダウンロードリンクは右カラム recommends の各種ボタンからジャンプできます
5. border 関係のプロパティなど、ごく限られた部分で px 単位を使用しています
   CSS の仕様だと px は相対だと記述されていますが、この単位は出力先依存です。参考: CSSの単位
   あと IE でウィンドウサイズの横幅を縮めていくと右のカラムがあっさりと下に落ちてしまいます…('A`) これは IE の挙動がオカシイので私のせいではありません
6. この件に関しては運営サポート側に要望として挙げているのですが…('A`)