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は難しいのかと思ってました。
