バトン用のスタイルつくってみたよ

バトン用のスタイルを作ってみました。
使ってみたい方はご自由にどうぞー。テンプレートによっては表示がびみょーになるかも。テンプレートとの相性もあったりするので、確実な表示というのは保証はできません。

一応白地だとこういうような表示になります。


このスタイルは質問文or回答文が二行以上になった場合でもある程度見た目を整えてくれる、というのを一番に考えて作ってます。
どういうことかというと、普通は、

A1　こういうように二行になると、番号の部分が普通の
文章に紛れてなんか見にくい（気がする）

こんな感じになっちゃうのを、無理矢理防いでます。
多分やり方としてはスマートじゃ無いと思いますが、まぁ、気にせず。

以下、スタイル。スタイルシートに追加して試してみてください。
11/27更新。

/* バトン用スタイル：ver.0.2 */
p.baton_title {
  margin : 1em 0;
  border-bottom : 1px dotted #777;
  font-weight : bold;
}
p.baton_title a {
  text-decoration : none;
}


dl.blog_baton ,
dl.blog_baton dt ,
dl.blog_baton dd {
/*すでにバトン用スタイルが記述されているテンプレートに対して
スタイルを使用する場合、干渉を起こさないようにしてます。
（あんまり意味ないかも）*/
  margin : 0;
  padding : 0;
  border : none;
}
dl.blog_baton {
  margin : 0 1em;
  line-height : 1.4;
}
dl.blog_baton dt {
  margin : 0;
  padding : 0.2em 0 0.2em 0.5em;
  /* ※1 */
  border-left : 4em solid #666;
  /* ↑ここで指定した色が質問番号(Q1など)の背景色になります。*/
  border-bottom : none;
  font-weight : bold;
  position : relative;
}
dl.blog_baton dd {
  margin : 1px 0 1em 0;
  padding : 0.2em 0 0.2em 0.5em;
  /* ※2 */
  border-left : 4em solid #444;
  /* ↑ここで指定した色が回答番号(A1など)の背景色になります*/
  border-bottom : none;
  position : relative;
}
dl.blog_baton span.q_number ,
dl.blog_baton span.a_number {
  position : absolute;

  display : block;
  text-align : center;
  color : #f5f5f5;
  font-weight : bold;
  line-height : 1.2;
  vertical-align : middle;
  /* ※3 */
  width : 4em;
  
  /* ↑の値を変えたときは、負の数値を下に入れる。*/
  left : -4em;
  
  /* IE6用記述。上の値よりさらに-0.5したものを入れる。*/
  _left : -4.5em;
}