Blogger カスタム方法

企業ブログにおすすめ！広告なしの無料ブログサービス「Blogger」の始め方
http://webcommu.net/blogger-startup/

記事を読んで試しています。レイアウト等思い通りにならない部分がいくつかあるのでhtmlタグやcssを利用してカスタマイズしました。

Blogger テンプレート デザイナーへは[カスタム CSS を追加]を用いて一部レイアウトの修正

/* タイトル文字の上下幅を縮める */
.header-inner .Header .titlewrapper {
    padding: 0px 0 !important;
}
/* 左右の間仕切りを引き締める */
.content-inner {
 border-left: 2px solid  #aaaaaa ;
 border-right: 2px solid  #aaaaaa ;}

/* 日付表示 */
h2.date-header {
    border-top: 2px solid  #dddddd ;
}

コードを綺麗に表示できるように SyntaxHighlighterを導入。
head部へは

<!-- syntax追加ここから -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<!-- syntax追加ここまで -->

bodyを閉じる直前に

<!-- syntax追加ここから -->
<script type='text/javascript'>
    SyntaxHighlighter.all()
</script>
<!-- syntax追加ここまで -->

BloggerでSyntaxHighlighterを使用する方法を参考にしました。

<pre class="brush: js"></pre>
または
<script type="syntaxhighlighter" class="brush: js"><![CDATA[]]></script>
で囲ったコードが ハイライト表示できます。
原理上後者のcdata内部への入力を利用した方がタグを直接変換せずに入力可能ですが、保守を考えて、実用上はpreタグでの使い方の方がベターかと思います。