Bloggerで記事にコードを綺麗に貼り付ける方法：Bloggerでスタイルを設定する

Bloggerのブログの中でjavascriptやphp、htmlのコードなどを綺麗に貼り付けるにはどうしたらよいのか、ちょっと戸惑ったので、メモ的にエントリー。

◆実体参照（実体参照についてはこちら）
これは簡単です。Bloggerのエディタで、作成モードにし、投稿設定のオプションの「構成モード」で「HTMLコードを表示」を選択します。

こうしてあげれば、作成モードでエディタにペースト（スタイルなし）するだけで< >などを自動で変換してくれます。
（ただ、<br />タグも挿入されるので不要であれば消す必要があります。）

◆CSSの追加
僕の場合は、コードを<pre><code></code></pre>タグで囲んでいます。
なので<code>タグにスタイルを設定すると、貼りつけたコードの表示をコントロールすることができます。

BloggerでCSSを追加するには、ブログのダッシュボードの左側にあるテンプレートを選択し、カスタマイズボタンを押します。

「アドバンス」→「CSSを追加」と選択すると、カスタムCSSを追加するフォームが現れますので、ここにスタイルを設定しましょう。下にプレビューが表示されるので、予め該当の記事を書いてからここでスタイルを設定すると楽です。最後に右上の「ブログに適用」ボタンをクリックで完了です。

ちなみに僕は次のようにスタイルを設定しています。

code{
 display:block;
 background : #D8D8D8;
 color : #444;
 font-size : 1em;
 margin  : 1em;
 padding : 0.5em;
 border  : 1px solid #888;
 width   : 90%;
 overflow : scroll;
}

あまりコードを書く人ではないので使う機会は少ないのですけれどね。