Bloggerのデザインのカスタマイズ

Bloggerはレイアウトがいろいろ選択できたり、ガジェットを配置できたりしてなかなか便利なのだが、いかんせん本文のカスタマイズ要素が少ない。

ここはいろいろコードを書くことが多くなりそうなのだが、コードを書くのに適した装飾がデフォルトではないので自分で用意するしかなかったので、忘れないうちにメモっておこう。

テンプレート＞カスタマイズ＞アドバンス＞CSSの追加

ここでページにCSSを追加できる。
codeタグを使うことにしてスタイルを設定しようと思ったのだが、
codeタグを使うと、空白が &nbsp; になったり、改行が <br />になったりとかして
HTMLで見たときに見にくくなってしないのでpreタグを使うことにした。

意味的にはcode要素を使うべきなのだが、深く考えたら負けな気がする。

で、追加したCSSはこんな感じ。

.code {clear:both;display:block;overflow:auto;border:1px 
solid #000000;
margin:0.5em 20px;padding:4px 10px;
width:auto;border-radius:5px;
}
.code {background:#333333}

で、コードを書くときには、HTMLビューで、
<pre class="code">
ここにコード
</pre>
みたいな感じで。
「<」とかは自分で &lt; とかに変換しないといけないがそれくらいはやむなしということで。