Personal tools
You are here: Home KtJ's Blog 見出しのスタイルをいじる

見出しのスタイルをいじる

by ktj posted at 2008-02-28 07:48 last modified 2010-07-22 07:09

どうも見出しがみづらい、ということで、 昨日に引き続き 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レベル目の見出しのフォントの色を灰色にした。(通常のリンク色だとちと違和感があるため)
Add comment

You can add a comment by filling out the form below. Plain text formatting.

(Required)
(Required)
(Required)
(Required)
(Required)


Powered by Plone CMS, the Open Source Content Management System

This site conforms to the following standards: