BloggerのCSSの設定して見出しやコードを見やすくする話

Markdownで記事を書けるようになったが

---

StackEditでMarkdownからHTMLに
変換はうまくいってたものの、
厄介な現象にぶち当たった。

hタグの大きさ

<h1>から数が大きくなるにつれ
文字が小さくなるものだと
過信していました。

実際は結構バラバラで、
<h2>が妙に小さかったりしました。

埋め込んだコードが見づらい

いわゆる<pre>や<code>タグで
囲まれたコードの部分の背景が
他の箇所とおなじ色で見にくかったり、
長いコードが改行されずに、
レイアウトの端を突き抜けてたり。

CSSの設定

---

もうやってられん。
ちょっとググったところ、
CSSをいじると良さそうなので
いろいろいじってみました。

見出しを綺麗に

こんな感じで、それぞれのタグの
文字サイズを相対的に指定しました。

.post-body h1 {
  font-size: 2.0em;
}

.post-body h2 {
  font-size: 1.5em;
}

.post-body h3 {
  font-size: 1.25em;
}

.post-body h4 {
  font-size: 1.0em;
}

.post-bodyと指定することで、
ブログの記事の部分だけにこの設定が
有効になるようにして、他の部分への
影響を最小限にしています。

コードの部分

ごめんなさい、まんまコピペです。

pre {
  padding: 1em;
  margin-left: 20px;
  color: #666666;
  background-color: #eeeeee;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: pre-wrap;      /* CSS3 */
  word-wrap: break-word;      /* IE 5.5+ */
}

code {
  font-family: monospace;
  font-weight: normal;
  line-height: 150%;
  text-align: left;
  margin-bottom: 10px;
}

はみ出さないように改行する部分は
ブラウザ差分があって指定が面倒…。

でも、全体的に意外と簡単。
もっとCSSは難しいのかと思ってました。