KtJ Dragon

どうも見出しがみづらい、ということで、 昨日に引き続き ploneCustom.cssを修正してみる。

div.section {
  margin-left: 0.7em;
}

h3 {
  font-family: sans-serid;
  text-decoration: none;
}

h4 {
  font-family: serif;
  text-decoration: none;
}

h5 {
  font-family: sans-serif;
  text-decoration: none;
}

h6 {
  font-family: sans-serif;
  text-decoration: underline;
}

div.section>a {
  text-decoration: none;
  color: gray;
}

PloneでreStructuredTextを処理する場合、デフォルトでは最上位の見出しはh3となり、以下h4, h5, h6と続く。その下のレベルの見出しはclass属性に"section"が指定されたdiv要素の直下にa要素が置かれるようになっている。このdiv要素は見出しとその後ろのブロック要素を、同一又は上位の見出しがでるまで囲むようになっている。(ISO HTML的な文法ですな)

なんで、div.sectionに左マージンをとって、見出しが1レベル深くなるごとに、見出しとその後のブロックが0.7文字分右にずれるようにしてみた。他の修正点は以下の通り。

• 2レベル目の見出し(h4)をセリフにした。

• 4レベル目の見出し(h6)にアンダーラインを入れた。(3レベル目と識別しやすくするため)

• 5レベル目の見出しのフォントの色を灰色にした。(通常のリンク色だとちと違和感があるため)