FC2→Bloggerに移行する際にやったこと

※以下の設定メモは2012/12/09時点です。Bloggerがバージョンアップすれば手順が変わる可能性があります。

• FC2からブログ記事をBloggerにインポートする

以下のサイトの手順で問題なく移行可能
http://ss117935.blogspot.jp/2012/05/fc2-blogger.html

• デザインテンプレートを設定する

Blogger Templatesのページから好きなテンプレートをダウンロードし、以下の手順でBloggerに設定する。

1. ダウンロードしたページを解凍し、“テンプレート名.xml” ができる
2. Bloggerの管理ダッシュボード→「テンプレート」→「バックアップ/復元」をクリック
3. 「ファイルを選択」をクリックし、Bloggerに、“テンプレート名.xml”をアップロードする

• Google Code Prettifyを導入してコードのシンタックスハイライトをする

Bloggerの管理ダッシュボード→「テンプレート」→「HTMLの編集」を開き、以下のコードをheadタグ内のどこかに挿入する。すると、GoogleのCDNからjquery, prettifyを取得して<pre class=”prettyprint”></pre>内のコードをシンタックスハイライトしてくれる。

<!-- jquery 1.7.2 -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<!-- Google Prettify -->
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
  prettyPrint();
});
</script>
</head>

• table要素のスタイルを設定する

Bloggerの管理ダッシュボード→「テンプレート」→「カスタマイズ」→「アドバンス」→「CSSを追加」をクリックし、以下のコードを追加する

table {
    border: 1px #E3E3E3 solid;
    border-collapse: collapse;
    border-spacing: 0;
}

table th {
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
table td {
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
}

参考にさせて頂いたページ

クリボウのBlogger Tips
http://www.kuribo.info/