アサブロの生成するHTML (要望)2005年05月19日 09時23分

先日の更新でHTMLに少し手が入れられたのですが、個人的にここはこうしてほしいという部分があるので書いておきます。なお、この記事では積極的に直してほしい部分を取り上げ、できればこうであってほしいなという点については別記事でまとめることにします。

  1. div.mod-description、div.mod-category直下のdiv要素(「このブログについて」と「カテゴリ」に関する本文)のclassがmod-textになっています。ほかの部分と比較するに多分mod-bodyの間違いでしょう。
  2. div.mainの子要素としてdiv.naviが2つ存在しますが(「前の記事」「次の記事」といったナビゲーションが入るのか?)、それぞれnavi-top、navi-bottomというidまたはclassを加えて区別できるようにしてほしいです。(主にスタイルのため。)
  3. div.calendarの子要素にclassがmod-captionであるh2要素(内容は「カレンダー」あたりが適切か)およびclassがmod-bodyであるdiv要素を追加し、カレンダーを構成するtable要素は追加されたdiv要素の子要素にしてほしいです。つまり、現在は要素の親子関係が
    div.mod.mod-calendar
    └ table.calendar
    となっているところを、
    div.mod.mod-calendar
    ├ h2.mod-caption (カレンダー)
    └ div.mod-body
       └ table.calendar
    としてほしいのです。(スタイルを作成する際にツールバーのほかの項目と一貫性を持たせるられるようにするため。) スタイルシートにて.mod-calendar .mod-caption { display: none; }としておけば表示も今とは変わらないはずです。
  4. DOCTYPE宣言が<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">と存在しないものになっているので、正しく<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">としてほしいです。
  5. フッタに存在するアサブロのバナー画像に、HTML 4.01 Strictには存在しないborder属性が記されているので、これを削除してほしいです。リンク画像につくボーダーを消すのはスタイルシートで#footer a img { border: none; }としてほしいです。
  6. アサブロバナー画像のimg要素及びコメント送信フォームのinput要素の開始タグがXMLの空要素タグのように記述されています。(XHTMLではなく)HTMLを使うのなら/>ではなく>でタグを閉じてほしいです。

さまざまなスタイルを作っていくにあたって、表現の可能性を増やすためにもぜひ検討していただきたいと思います。

カテゴリの指定数2005年05月19日 09時21分

アサブロを触ってみていろいろと要望が出てきたので、今日はその要望についてまとめてみました。書いていて長くなったので3つの記事(この記事、HTMLに対する要望願望)に分けることにします。

現在アサブロではひとつの記事に対してカテゴリを2つまでしか指定できませんが、これははっきり言って少ないと思います。というのも、私はこの「カテゴリ」というのをディレクトリとしてではなくラベル、もしくは記事に対するキーワードとして使いたいと思っているからです。

記事をコンピュータのファイルに例えるならば、従来のようにファイルの内容ごとにディレクトリを作って整理するのではなく、ファイルにさまざまなキーワード(メタデータ)をつけてそこから絞り込んでいくというか、つまりは最近注目が集まっているデスクトップ検索技術を使うのと同様に記事を整理していきたいのです。

カテゴリを2つ指定できるのだから単純なディレクトリ構成よりは幅を持たせられますが、ここはもう一歩踏み込んで最低3つ、できれば5つかそれ以上のカテゴリを指定できるようにしてほしいです。

ですが、こういう使い方をすると現在のアサブロのインターフェースではカテゴリの一覧が膨れ上がってしまう恐れがあります。私が参考にしたいと思っているのはねこめしにっきのジャンル分けなのですが、ここまでやってしまうととてもカテゴリの部分にそのまま納めることはできません。

だからやるとしてもそれよりは簡単な構成になってしまうでしょうが、それでも今のままではカバーしたいキーワードをカバーしきれないかもしれないので指定できる数を増やしてほしいところです。(なんだかんだ言ってこのままでも使っているうちに慣れてしまいそうな気もしますが……)

アサブロでのレイアウト崩れ2005年05月14日 01時34分

さて、このブログ、スタイルが選択できるとのことで用意されたスタイルを見ていたのですが、いくつかレイアウトが崩れるものがあります。具体的には、本文とツールバーが横に並ぶような設定になっているにもかかわらず、両者が縦に並んで表示されてしまいます。

ツールバーを本文の右側に置く設定ならば本文のあとにツールバーが表示されるのでまだいいのですが、左側に置く設定になっていると本文がツールバーの下にもぐってしまうため、本来本文のあるべき場所に空白が表示され、スクロールしないと本文が読めなくなってしまいます。

私の使っているFirefox 1.0.3 (1.0.4にアップデートしないとな……)ではビジネス、クール、標準、シーズンの各スタイルでこの現象が起こるのですが、調べてみたところこれらのスタイルでは本文とツールバーを囲むボックス(body要素またはidがcontainerであるdiv要素)の幅が指定されていないのが原因のようです。

このブログのスタイルではブラウザウィンドウの横幅が760px以上であることを前提としているようですが、それが明示されていないのでその幅以下の環境ではレイアウトが崩れてしまったのでしょう。ためしにブラウザウィンドウを最大化してやるときれいに横に並びました。とりあえずの解決策としてはスタイルシートで以下のように幅を指定してやることでしょうか。

#container { width: 760px; }

なお、クールについては以下のように一見幅が指定してあるように見えますが……よく見ると直前の行でセミコロンが抜けていますね。

#container {
	margin: 0;
	padding: 0;
	background-color: #B9B9B9;
	background-image: url(bg760.gif);
	background-repeat:repeat
	width: 760px;
}

また、Safariでレイアウトが崩れる(レイアウト: akiblo asablo)という話があるようですが、これもおそらくは上記と同じ原因ではないでしょうか。