BloggerでjQuery・CSSを効率良く管理したい

• JavaScriptとCSSを一箇所にまとめて効率良く編集したい。
• SyntaxHighlighter用コードと小さなスクリプトを同じ場所に。
• ファイルは一つにまとめたい。
• jQueryを使ったスクリプトを書きたい。
• AutoPagerize対応用コードも。

効率良く編集

設定画面からBloggerテンプレートデザイナーや直接テンプレートのHTMLを編集するのはめんどくさい。一箇所に埋め込んでおいて、自分のエディタから入力したいのでDropboxを使う作戦でいってみる。

埋め込み場所

BloggerでJavaScript・CSSを埋め込む方法は、テンプレートのHTML編集かレイアウトのガジェット（HTML/JavaScriptモジュール）のどちらか。

始めにサイドバーのガジェットに入れてみたが、cssの適用が遅いので却下。
「テンプレートデザイナー - アドバンス - Add CSS」はJSの埋め込み場所とバラけるので使わない方針で。

結局テンプレート側にまとめて書くようにした。head閉じタグの手前に挿入。

<!-- SyntaxHighlighter start -->
<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<style type='text/css'>
/* SyntaxHighlighter: adjustment for chrome */
.syntaxhighlighter .gutter .line {
  word-wrap: normal;
}
.syntaxhighlighter .code {
  word-wrap: normal;
}
.syntaxhighlighter .toolbar {
  display: none;
}
</style>
<!-- SyntaxHighlighter end -->

<!-- MyScripts start -->
<link href='https://dl.dropbox.com/u/1058440/misc/makev.blogspot/che.css' rel='stylesheet' type='text/css'/>
<script src="https://dl.dropbox.com/u/1058440/misc/makev.blogspot/che.js"></script>
<!-- MyScripts end -->

結果

Dropboxで共有しているファイルを書き換えて数秒後に反映されるのでわりと快適になった。

付録

Dropboxに置いたファイル内容も一応貼り付けておく。CSSのfont-sizeをどうするべきか揺れている。

che.js：小さなスクリプトはここに書く。

var jqscript = document.createElement('script');
jqscript.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js';
jqscript.charset = 'UTF-8';
document.getElementsByTagName('head')[0].appendChild(jqscript);
var t = setInterval(function() {
  if (window.jQuery) {
    clearInterval(t);
    //ここにjQueryロード後実行したいコードを書く
    myFunc();
  }
}, 100);

function myFunc() {
  jQuery(function($) {
    // AutoPagerizeされたときに実行したいものはここに。
    var InsertNode = function(evt) {
      // SyntaxHighlighter
      SyntaxHighlighter.highlight();
    };
    $(document).bind('AutoPagerize_DOMNodeInserted AutoPagerAfterInsert', InsertNode);
    if (window.addEventListener) { 
      window.addEventListener('AutoPatchWork.DOMNodeInserted', InsertNode, false);
    }

    // 投稿画面にあるwysiwygエディタのフォントサイズ指定「小(x-small)」が
    // 小さすぎるので、動的にsmallに変更。「最小(xx-small)」も含む。
    $('.post-body [style*="x-small"], .entry-content [style*="x-small"]').each(function() {
      $(this).css('font-size', 'small');
    });
  });
}
 

che.css：テンプレートを修正したい場合に使う。

body {
  font-size: 85%;
  /*font-size: 15px;*/
}
pre {
  background-color: #F8F8F8;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  padding: 6px 10px;
  overflow: auto;
}
code {
  background-color: #F8F8F8;
  border: 1px solid #EAEAEA;
  border-radius: 3px;
  margin: 0 2px;
  padding: 0 5px;
  overflow: auto;
}
pre, code, tt {
  font-family: Consolas,"Liberation Mono",Courier,monospace;
}
blockquote {
  border-left: 5px solid #dddddd;
  color: #777777;
  padding: 0 15px;
}
::selection {
  background-color: pink;
}
::-moz-selection {
  background-color: pink;
}
h2 {
  /*font-size: 25px;*/
  font-size: 140%;
  text-transform: none;
  margin: 0;
}
h3 {
  /*font-size: 20px;*/
  font-size: 130%;
}
h3 {
  font-size: 120%;
}
h3.post-title,
h3.entry-title {
  font-size: 160%;
}
.sidebar h2 {
  font-size: 13px;
  margin-bottom: 10px;
}
.date-header span {
  font-size: 15px;
  font-weight: normal;
}