ココログブログの見栄え向上

当ブログのフォントやソースコード表示など見栄えの改善を行いました。備忘録も兼ねて、今回行ったことを記載します。ココログに特化した部分が多いですがご容赦下さい。

ブログの共通設定を変えることになりますので、お試しをされる方は自己責任でお願いします。事前にブログ内容のバックアップを取るなどした方がよいかと思います。

Windows Live Writerの導入

以前にも書きましたが、Windows 7への移行にあわせて、Live Writerを使い始めました。これまでは、ブラウザーからココログにログインして、ブラウザー上の画面を使って編集を行っていましたが（以後オンライン編集と記載）、作業性が結構向上します。またLive Writerは、以下のようにココログとの連携に加えて、オンライン編集ではできなかった書式指定が可能です：

• オフラインで作成した記事の投稿（サーバーへのアップロード）、PingサーバーへのPing通知
• 作成済み記事を読み込んで編集。Live Writerで作成していない記事も選択可能（取り出せるのは過去の500件まで）
• 実際のブログテンプレートを使ったプレビューが投稿前に可能
• ハイパーリンクで、「新しいウインドウで開く」オプションが指定可能（オンライン編集では実はできないのです）
• 画像の挿入オプションが多彩。こちらも「新しいウインドウで開く」オプションが指定可能。まだ使っていませんが、 画像のトリミング、明るさ調整といった 画像編集も可能
• 表の挿入。オンライン編集でもHTMLタグをゴリゴリ書き込めば可能ですが、エクセルのような感じで編集ができるため楽ちんです
• プラグインを使って、プログラムコードを整形して挿入（キーワードのハイライト化など） → 後ほど詳細を記載します

以下は、気になる点です。

• スペルチェックがダメ
  自動スペルチェックを有効にすると、日本語部分がすべてエラーになってしまいます（正しいスペルの英単語だけが赤くならない、、）。FireFoxのスペルチェック機能の方がよっぽど賢いです
• 箇条書き指定を行うと、勝手に色指定のHTMLタグ（<font color="#000000">）が挿入されることがある
• スタイルシートを埋め込んだり、フォント指定を行うと、オンラインで再編集した際に書式が崩れる。こちらはLive Writerの問題というより、ココログとの相性問題と言うべきですが、、、

マイクロソフト製品なので、Windows Liveのブログにのみ対応かと思ったのですがさにあらずで、メジャーなブログエンジンには対応しているようです（ココログはTypePadです）。おかげでLive Writerは結構重宝しています。

メイリオフォントの指定

ココログのテンプレートはデフォルトでMS Pゴシックを使っていますが、Vistaから使えるようになったメイリオフォントやMACに比べると見栄えがよくない（読みづらい）です。そのため、メイリオフォントを使えるようにしました。

当初はLive Writerのフォント指定機能を使おうとしたのですが、各段落にフォント指定のHTMLタグが埋め込まれてソースが汚くなること、オンラインで編集を行うと書式が大きく乱れてしまう（書式指定の取り消しかつ、各行に改行が追加されるなど）ことから、スタイルシートをいじることにしました。CSSの構造はまったく分かっておらず、先人の成果を拝借しております。

私はココログの出来合いテンプレート（リッチテンプレート）を使っているため、CSSの編集はできません。そのため、「きたへいの悠々自適」さんの記事を参考にし、ブログサブタイトルにカスタムCSSファイルへのリンクを書くことでフォント指定ができるようになりました。手順を以下に示します。

1) トップページのソースから、読み込んでいるスタイルシート(style.cssファイル他）を探して、個別にダウンロード

2)フォント指定部分を取り出しメイリオを追加し、適当な名前をつけてローカルに保存（mystyles.cssなど）
自分の場合は、以下の内容です。

body {
    font-family: 'メイリオ', 'Meiryo','MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
    }

textarea {
    font-family: 'メイリオ', 'Meiryo','MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
    width: 100%;
    }

3)上記のファイルをblogスペースにアップロードする。私は以下のようにしました

• 管理ページトップ > コントロールパネル > ファイルマネージャー  に移動
• ホーム配下にStylesフォルダを作成し、作成したcssファイル(mystyles.css)をアップロード

4)ブログサブタイトルにアップロードしたcssファイルへのリンクを追加する

• 管理ページトップ > ブログ一覧 > [対象ブログ] > 設定 > ブログの基本情報  に移動
• ブログのサブタイトル（キャッチフレーズ）ボックスに以下のコードを追加

<link type="text/css" rel="stylesheet" href="http://todotani.cocolog-nifty.com/Styles/mystyles.css"/>

5)変更を保存

ソースコードの挿入

SyntaxHighlighterというJavaScriptベースのツールを使いました。Live WriterでSyntaxHighlighterを使うためのプラグインとして、SyntaxHighlighter for Windows Live Writerがあります。こちらは、プレビューでの確認や投稿後の再編集におけるブログとの連携に優れており、当初はこのプラグインを使い始めたのですが一点問題がありました。

SyntaxHighlighterはVersion 2.xに移行しているのですが、プラグインはVersion 1.5対応となっており、SyntaxHighlighter Version 2.xが使えません。1.5では、IEを使った際に、折り返しや横スクロールの表示がうまくできませんでした（FireFoxなら問題はなかったのですが）。2.xなら改善されていそうなので、なんとか2.xを使えないかと思い他のプラグインを探したところ、PreCode Snippetを発見しました。こちらは2.x専用だったりしますがPreCodeを使用することにしました。

SyntaxHighlighterを使うためには、ブログサーバーにJavaScriptやスタイルシート(cssファイル）を登録しスクリプトを動かすための設定が必要になります。先ずはその手順を示します。

1)SyntaxHighlighterをダウンロード

• ダウンロードページからファイルを落とします（執筆時点の最新版は2.1.364）

2)ブログサーバーにスクリプトファイルフォルダーを作成

• ホーム配下にScripts2フォルダを作ります（名前は任意です）

3)ブログサーバーにJavaScriptファイルをアップロード

• ダウンロードしたzipファイルのscriptsフォルダーから以下のファイルをアップロード
• shCore.js（必須）
• clipboard.swf（行番号を除いたソースをクリップボードにコピーするために必要）
• shBrushCpp.js（C/C++ソースの整形を行うために必要）
• shBrushXml.js（HTML/XMLの整形）
• shBrushPlain.js（Plain Textの整形）
• その他、Java/Rubyなど、必要に応じて整形用のshBrushXXX.jsファイルをアップ

4)スタイルシートのアップロード

• ダウンロードしたzipファイルのstylesフォルダーから以下のファイルをサーバーにアップ
• shCore.css
• shThemeDefault.css
• xxx.pngファイル（全部）

5)ブラウザーでJavaScriptを起動するためのコードの埋め込み

• メイリオフォントの指定に加えて、ブログサブタイトルに以下のコードを追加

<link type="text/css" rel="stylesheet" href="http://todotani.cocolog-nifty.com/Styles/mystyles.css"/>
<link type="text/css" rel="stylesheet" href="http://todotani.cocolog-nifty.com/Styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://todotani.cocolog-nifty.com/Styles/shThemeDefault.css" />
<script type="text/javascript" src="http://todotani.cocolog-nifty.com/Scripts2/shCore.js"></script>
<script type="text/javascript" src="http://todotani.cocolog-nifty.com/Scripts2/shBrushCpp.js"></script>
<script type="text/javascript" src="http://todotani.cocolog-nifty.com/Scripts2/shBrushXml.js"></script>
<script type="text/javascript" src="http://todotani.cocolog-nifty.com/Scripts2/shBrushPlain.js"></script>
<script type="text/javascript">
   SyntaxHighlighter.config.clipboardSwf = 'http://todotani.cocolog-nifty.com/Scripts2/clipboard.swf';
   SyntaxHighlighter.all();
</script>

• 変更を保存
• Live Writerの ブログ > ブログ設定の編集メニューから アカウント設定の更新を実行

6)PreCodeプラグインをインストール

• ダウンロードページからプラグインをダウンロードしてインストールします。
• Live Writerの ツール > オプション > プラグイン メニューを開き、プラグインを有効化
• Live Writerのソース画面を開く（編集画面ではありません）
• 挿入ツールバーからPreCodeプラグインを起動
• テキストボックスに整形したいコードを貼り付け
• プラグイン画面右側にあるコード種別やオプションを選択
• Html Encodeを選択します
• OKボタンを押すと、ソースウインドウにコードが挿入されます

PreCodeプラグインを起動している画面イメージは以下です。

埋め込まれるコードの例は以下です。C++のコードとHTMLタグが混在しているため、Plaine Text形式を指定してあります（cpp形式だと、<p>などのHTMLタグが誤って表示されてしまいます）。
2009/11/4追記： cpp (C/C++)形式を指定しても正常に動作するようになりました。なぜだろう？

<pre class="brush: cpp; auto-links: false;">
#include "stdafx.h"
#include <iostream>

int _tmain(int argc, _TCHAR* argv[])
{
    std::cout << "Hello C++\n";

    return 0;
}
</pre>

要はソースコードの開始～終了部分を、<PRE>～</PRE>タグでくくるという単純なものです。開始タグの中に追加属性を書き込むことによって、書式の拡張が可能です。

7)注意点
SyntaxHighlighterはソースを<PRE>タグ（Preformatted Textタグ）で囲むことによって、ソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。編集画面にPreCodeプラグインが生成したコードを貼り付けると、スペースが”&nbsp;”に置き換わってしまいます。これでもブラウザ上の表示は正しく行われるのですが、コードをクリップボードにコピーすると、スペースの代わりに”&nbsp;”が入ってしまいます。これではコードの再利用ができません。プラグインの出力をソース画面に貼り付けるとスペースコードが変換されることなく入力ができます。

SyntaxHighlighterを使うと、スペースコードがらみで一点制約が生じてしまいます。ブラウザからオンライン編集を行うと、スペースコードが”&nbsp;”に置き換わってしまいます。ブログファイルを開く時点で自動的に変換されてしまうようです。この問題を回避するためには、SyntaxHighlighterを使ったブログページに関しては、オンライン編集をあきらめて、常にLive Writerにページを読み込んでから編集・アップロードを行う必要があります。

どこからでも編集できる利便性がなくなったのは残念ですが、出先からブログを編集することはないのでよしとしました。普段使うノートPCにLive Writerをインストールしておけば多くの場合は出先からも編集ができますし。

2009/11/4追記： 残課題
一行の文字数が多いソースコードの表示は現状折り返し表示になっています。以下のように折り返し解除の指定を行うと、demoのように横スクロールバーが表示されるはずなのですがうまく動いてくれません（スクロールバーが表示されず、右端が切れてしまう）。

<pre class="brush: cpp; wrap-lines: false; ">

FireFoxだとちゃんと横スクロールバーが表示されますが、IE8だとNGです。IE8でもdemoのように正しく表示されるサイトもあるため、単なる相性問題でもなさそう（ココログのスタイルシートもからんでいるか）。

2010/11/3追記：
SyntaxHighlighter 3.0の使用法を投稿しました。