会話っぽいもの記法

HTMLやCSS知ってる方には今さらなものですが、下の例やこの記事みたいに、会話を書くときに使ってるHTMLとCSSをご紹介します。レポとかラジオの文字起こしとか書く時に参考にしてもらえれば。

あ〜

あ〜ちゃんです！

かし

かしゆかです！

のち

のっちです！

3人

3人あわせてPerfumeです!!

へたれコーダーゆえ、いろいろツッコミどころも多いと思いますので、おかしなところはご教授願います。あと解説用にうちで実際に使ってるのとは微妙に書き方を変えてますのであしからず。

まず、管理→左メニュー「デザイン」で「詳細」タブを選んで、一番下の「スタイルシート」のとこに以下を追加。

/* 会話っぽくする */

/* 発言者 */
dl.kaiwa dt{
	position: absolute;
	width: 6em;
	margin: 0;
	padding: 0.3em 0;
	color: #f6cbc2; /* 文字の色 */
	font-weight: bold; /* 文字を太字にする ←お好みで。 */
	line-height: 130%;
	}

/* 発言 */
dl.kaiwa dd{
	margin: 0;
	padding-top: 0.3em;
	padding-right: 0;
	padding-bottom: 0.3em;
	padding-left: 6em;
	border-bottom: dotted 1px #7599a8; /* 次の会話との区切り線。左から線の種類・太さ・色 */
	line-height: 130%;
}

次の会話との区切り線は、上記では点線になってます。実線がよければ「solid」、破線がよければ「dashed」、二重線がよければ「double」とかご自由に。
あと文字色も好きな色に変えてください。
発言者の文字幅は上記では5〜6文字相当になっています。変えたい時は、「dl.kaiwa dt」の「width」と、「dl.kaiwa dd」の「padding-left」の数値を変えてください。この2つは必ず同じ数値で。ここポイント。

んで、ダイアリーの本文書くところには、以下のHTMLを貼付け。

<dl class="kaiwa">
<dt>発言者1</dt>
<dd>発言</dd>
<dt>発言者2</dt>
<dd>発言</dd>
</dl>

発言を増やす時は<dt></dt><dd></dd>の数を手動で増やしてください…。はてな、会話記法作ってくれんかなぁ。

ちゃんとした解説などは、下記の記事や本をご覧ください。

dt と dd を横並び - lucky bag

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips