cherenkov's暗中模索blog: このブログのデザインメモ

あまりカスタマイズせず、気に入ったデザインを適用する方針。
なお、以下の設定はテンプレートを変更するとリセットされてしまうので注意。

Bloggerテンプレートデザイナーでぽちぽち調整していく。

"テンプレートデザイナー"への行き方は、設定 - テンプレート - "カスタマイズ"
テンプレート：エスィリアルの水色ベースを選択。
背景："お祝い"カテゴリから緑のクローバーを選択。
レイアウト：サイドバーの位置が右で一列のものを選択。
幅を調整：レイアウトを変更してから、"幅を調整"に移動して"デフォルトにリセット"をクリックして、ブログ全体：960px。サイドバー：310px。
アドバンス：

Background：メインの背景を#ffffffに変更。
投稿タイトル："B"ボタンをクリックしてBoldを有効化。

カスタムCSS：画像の影、角丸

.post-body img {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5) !important;
  padding: 10px !important;
  border-radius: 8px;
}

ソースコードをシンタックスハイライトさせる Syntax Highlighter を組み込む準備。

Syntax Highlighter Scripts Generator を使うと便利。ホスティングされているファイルを読み込むコードを生成してくれる。
テーマと言語を気軽に選ぶ。必要になったら後から足す。

Generateボタンを押すと以下の様なコードが表示されるのでコピー。

<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'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

テンプレートを編集する。
- 設定 - テンプレート - "HTMLの編集" - "続行" と進むとテンプレートのソースコードが表示される。
- </head> の前にコードを貼り付けて保存。

以上でシンタックスハイライト導入完了。使い方は、HTML編集モードで、

<pre class="brush: css;">
コード
なお、シンタックスハイライト部分のHTMLタグなどの<は&lt;に書き換える必要がある。
</pre>

参考： @minorut blog: Blogger にシンタックスハイライト JavaScript ライブラリSyntaxHighlighter を導入するには

AutoPagerizeされてもシンタックスハイライトが効くようにする。ついでにjQueryを使えるようにしておく。

Syntax Highlighterを導入した要領で以下のコードをテンプレートの </head> 前に追加する。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
var InsertNode = function(evt) {
   SyntaxHighlighter.highlight();
};
jQuery(document).ready(function($){
(function() {
  $(document).bind('AutoPagerize_DOMNodeInserted AutoPagerAfterInsert', InsertNode);
  if (window.addEventListener) { 
    window.addEventListener('AutoPatchWork.DOMNodeInserted', InsertNode, false);
  }
})();
});
//]]>
</script>

テンプレートにJavaScriptを書く場合は正しく解釈させるために //<![CDATA[ が必須。（保存後シングルクォーテーションが文字実体参照に変換されたりした。）
jQuery読み込み後、すぐにjQuery.noConflict() してjQueryが持つ$関数を封印して、すでに定義されている$関数との衝突を避ける（合ってるよね？）。jQuery(document).ready(function($){ のようにすれば中で $が使える。それ以外はjQuery.find( のように$ではなくjQueryを使う。
無名関数(function(){で括ったのは、機能ごとのブロックにしておいたほうが後から見やすいと思ったから。
参考：

ページタイトルをブログ名が後ろにくるようにテンプレートを修正。「ブログ名: エントリータイトル」→「エントリータイトル - ブログ名」

    <b:if cond='data:blog.pageType == "index"'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>
    <!--<title><data:blog.pageTitle/></title>-->

cherenkov's暗中模索blog

ページ

2012-05-05

このブログのデザインメモ

0 件のコメント:

コメントを投稿