186::Beta 旧「はてなダイアリーへの要望」を淡々と記録するよ@beta

2004-10-07

[][] http://d.hatena.ne.jp/mohri/20041007

:aboutページのHTML構造1 ―― 不具合報告

昨日、公開されたばかり「プロフィール機能(d:id:hatenadiary:20041006#1097059958)」をさっそく試してみたのだが、なんか変な風に表示されてしまう(→d:id:mohri:about)。

具体的に言うと、2番目の見出しの「プロフィール」だけが罫線で囲まれて、そのプロフィールの内容が分離独立させられて、また罫線で囲まれる。これはオレがスタイルシートで

div.section {
  border-color: #aaa #fff #fff #aaa;
  border-style: solid;
  border-width: 1px;
}

を指定しているからで、たぶん同じようにdiv.sectionをborderで囲っている人のプロフィールは、同じように罫囲みによって2つに分断されているはずだと思った。

そこで、即レス風味で

プロフィールページの「div.section」が

<div class="section"><h3 class="subtitle">プロフィール</h3></div>
<div class="section">……プロフィールの内容……</div>

と<h3>タグの直後でいったん閉じて生成されているんですが、おかしくないでしょうか?

http://d.hatena.ne.jp/hatenadiary/20041006#c

とコメントを付けてみた(d:id:hatenadiary:20041006#c)のだが、その原因がいま分かった気がした。

というのは、プロフィール設定ページには

詳細プロフィールでは日記の記法を使うことができます。

と書かれており、つまりこの詳細プロフィールの中で「*」を使って、<h3>要素の見出しを立てることができるので、その前後をdiv.sectionで囲ってあるのだが、その前後の「一行紹介」とか「プロフィール」といった見出しも同様に<h3>要素なので、<h3>要素の中に<h3>要素が含まれるという構造になってしまっているから、div.sectionが連発されていておかしいのだと思った。

だから、改良点としては、「一行紹介」とか「プロフィール」といった見出しは<h2>要素に格上げする。ということで対応できるのではないかと思った。

:aboutページのHTML構造2 ―― 改良の提案

ということで修正案です。

現在のプロフィールページのHTMLは次のような構造になっています。

<h1>日記のタイトル</h1>
<div class="hatena-body">

  <div class="day">
    <h2><span class="title">id</span></h2>
    <div class="body">

      <div class="section">
        <img src="写真.jpg" alt="id" class="photo" />
        <h3 class="subtitle">一行紹介</h3>
          <p>一行紹介欄のテキスト</p>
      </div>

      <div class="section"><h3 class="subtitle">プロフィール</h3></div>

      <div class="section">
        詳細なプロフィール欄のテキスト
      </div>

      <div class="section">
        <h3 class="subtitle">はてなダイアリー登録情報</h3>
          <p>ユーザー登録日時:200x-xx-xx xx:xx:xx</p>
          <p>ユーザー登録から本日までに日記をつけた日数:xx日</p>
          <p>本日までの最終更新日:200x-xx-xx</p>
          <p>はてなダイアリー市民:XXX</p>
          <p>有料オプション:XX</p>
       </div>
    </div>
  </div>

  <div class="footer">Copyright ……</div>
</div>

これを、以下のようなHTML構造に直すといいんじゃないでしょうか。

<h1>日記のタイトル</h1>
<div class="hatena-body">

  <div class="day">
    <h2><span class="title">id</span></h2>
    <div class="body">
      <p>一行紹介欄のテキスト</p>
    </div>
  </div>

  <div class="day">
    <h2><span class="title">プロフィール</span></h2>
    <div class="body">
      <img src="写真.jpg" alt="id" class="photo" />
      <div class="section">
        詳細なプロフィール欄のテキスト
      </div>
    </div>
  </div>

  <div class="day">
    <h2><span class="title">はてなダイアリー登録情報</span></h2>
    <div class="body">
      <div class="section">
        <dl>
          <dt>ユーザー登録日時</dt><dd>200x-xx-xx xx:xx:xx</dd>
          <dt>ユーザー登録から本日までに日記をつけた日数</dt><dd>xx日</dd>
          <dt>本日までの最終更新日</dt><dd>200x-xx-xx</dd>
          <dt>はてなダイアリー市民</dt><dd>XXX</dd>
          <dt>有料オプション</dt><dd>XX</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

ひょっとしたらどっかにタグの閉じ忘れとかミスがあるかもしれないけど、修正点の中で肝心なのは次の点なので、これだけは落とさないで見てくれれば嬉しいと思った。

  • 「プロフィール」などのシステムが付ける見出しを<h2>要素に格上げ。
  • そうすると「一行紹介」と「id名の見出し」が連続して<h2>要素になるので、これをひとつにまとめてしまって、「一行紹介」という見出しを捨てる。

あと、ついでに上の改良案では以下の3点も修正してます。

  • 画像の場所を「一行紹介」から「プロフィール」の中に移した。
    • その方が見栄えがいい(プロフィール欄の方が広いから)
  • 「はてなダイアリー登録情報」を定義リストにした。
  • プロフィールはユーザーが書いてるので、フッタの「(c) hatena」を外した。

というようなことをはてなダイアリーへの要望として挙げさせていただきます。

ご検討ください>d:id:hatenadiaryさま

http://d.hatena.ne.jp/mohri/20041007

kanosekanose2004/10/08 18:42あのあと、AWSみたいなものがないからできないのかな?とか考えていたんですが、Amazonとの規約が問題だったとは。

2004-10-06

[][] http://d.hatena.ne.jp/another/20041006#1097070688

aboutページに関するはてなダイアリーへの要望

aboutページに<追加>自動的に</追加>キーワードリンクがつかないのがちょっと残念です。個人的にはキーワードリンクがついてほしいです。でもこれは、つけて欲しくないという人の方が多いかもしれませんね。

aboutページのいちばん下に

Copyright (C) 2002-2004 hatena. All Rights Reserved.

という表示が出ているのがちょっと気になりました。というのも、普通の日記のページにはこれが出てこないので。

http://d.hatena.ne.jp/another/20041006#1097070688

takeshoutakeshou2004/10/08 13:25RSSの<dc:date>についてはてなに要望を出していたのですが、今日10月8日に、メールが来て、対応していただいたとの事だったので、報告させていただきます。

2004-03-16

[][][] http://d.hatena.ne.jp/alcus/20040316#p5

はてなダイアリーへの要望

about画面*1に使用しているテーマ(自分で作っている人は「なし」とか)が表示されると、「あ、このデザイン好き!」というときに便利かもです。

http://d.hatena.ne.jp/alcus/20040316#p5