Blog 内の Code へ背景色をつける

この Blog 内に、ごく稀に現れる code 片。記事の中に埋もれて、少し見にくかったので、背景色を付けるようにしてみました。

変更した点は以下の通りです。template HTMLをいじりますので、もし試される場合には、是非是非バックアップを適切に行った上で、自己責任でお願いします。

1) Bloggerに「ログイン」し、「設定」「レイアウト」「HTMLの編集」と手繰ります。

2) 「テンプレートをすべてダウンロード」リンクを手繰り、現在のテンプレートを保存します。失敗したときに大変なことになりますので、これは、絶対に必須です。

3) 「テンプレートを編集」にあるテキストボックスの「/* Variable definitions」と書かれた周辺に、以下の行を追加します。

 <Variable name="codeBgColor" description="Code Background Color"
           type="color" default="#F7F7F7" value="#F7F7F7">
 <Variable name="codeBorderColor" description="Code Border Color"
           type="color" default="#C0C0C0" value="#C0C0C0">

4) 同じくテンプレートの「/* Content」周辺に以下の行を追加します。

pre code {
  overflow:auto;
  background: $codeBgColor;
  border: 1px solid $codeBorderColor;
  padding: 5px 10px;
  display: block;
  white-space: pre;
  text-align: left;
}

5) 「テンプレートを保存」を選択。

以上でテンプレートの変更はおしまいです。後は、記事中に code を貼り付けた場合、そのコードを、

<pre>
<code>
...
</code>
</pre>

で囲めばコードの背景に色が付きます。もし背景の色を変更したい場合には、「設定」の「フォントと色」から「Code Background Color」を、枠線の色を変更したい場合には「Code Border Color」を、それぞれいじってください。

Bloggerは、こういう変更が自由に出来る点が、嬉しいですね。