[SyntaxHighlighter] bloggerに整形済みテキスト、プログラムソースコードなどを載せるには

色々調べた結果、SyntaxHighlighterが一番好みだったので、導入方法メモ。

こんな感じになる。

 
hello, world.

1. bloggerのデザインからHTMLの編集を選択

2. 以下を</head>の前にコピペ（必要なものが欠けていれば適宜追加）

<!--ここからsyntaxHighlighterをコピペした-->
<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/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.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/shBrushJava.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/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.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/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!--ここまでsyntaxHighlighterをコピペした-->

3. 次の様に整形済みテキストを記入

<pre class="brush: ***">
hogefuga
</pre>

***の部分にはbashやらcppを指定すれば、各言語に対応した色付けをしてくれる。他にはこんな言語をサポート。

[twitterfeed] bloggerの更新情報をtwitterに流す

ブログ用twitterアカウントを取って、ブログの更新情報をそこに流そうと思ったけど、bloggerにはそういう機能がデフォルトで無いそうな。なのでtwitterfeedを使ってみた。設定はこちらやこちらを参考にさせていただきました。更新情報を流すだけなら特に難しい設定は無かった。

本ブログのtwitterアカウントは@seijis_ohacoです。

[blogger] ブログタイトルの日本語フォントの変更

bloggerを使ってみた。

デザインはある程度変更できていい感じ。フォントも「デザイン」→「テンプレートデザイナー」→「アドバンス」で色々変えられるんだけど、「seiji's 十八番」のように、ブログタイトルにアルファベットと日本語を混ぜて使ってると、seiji'sは変更できても十八番がデフォルトのまま（Sans-serif、ゴシック系？）でなんだかバランスが悪い。

結局はタイトル用の画像を用意したんだけど、一応HTMLを編集してフォントを変える方法を調べたのでメモ。参考

1. 「デザイン」→「HTMLの編集」
2. <Group description="Blog Title" selector=".header h1"> の行を探す
3. 2行くらい下にある"default=", "value=" タブ内の最後の引数（Sans-serifやらUnkemptやら）を好きなフォントに変更すればok

ただやっぱりWebで使う日本語のフォントって少ないよね。アルファベットにはおしゃれなやつがたくさんあるのに。ちなみにブログタイトルの画像のフォントは海沿いカリグラ邸！さんの「アームドバナナ」を使わせていただいています。ありがとうございます。