【Blogger】お勧めの海外製テンプレート『canvas』を日本語化する

今回はBloggerのテンプレート『canvas』を日本語化します。
現在Blogger標準の『Contempo』というテンプレートをカスタマイズして使用しているこのブログですが、左カラムの使い勝手が悪いことが大きな欠点でした。
これをどうにか解消したくて様々なテンプレートを探し、見つけたのがフリーの海外製のテンプレート『canvas』です。

『canvas』のスクリーンショット。非常にシンプルです。

今回はこのテンプレートを日本語に合うようにします。
日本語化で問題になる文字列の行間を広げ、フォントをサンセリフ中心に、デザインや色も味気ないので変更、これを全てCSSの追記で処理しています。
作業後のイメージが、下記スクリーンショットとなります。

元の状態から配色とデザインを一部変更しています。
メインメニュー内にあった検索は使い勝手がイマイチだったのでCSSで非表示にし、
標準の検索ガジェットを使用しています。

『canvas』とCSSカスタマイズを適応したサンプルブログ

これからその手順を紹介していくのですが、注意点がいくつかあるので先に挙げていきます。

1. 事前に、現在使用しているテンプレートをバックアップしておいて下さい。

1. Bloggerのダッシュボードの左側にあるテーマを選択し、
右上のバックアップ／復元をクリック。
(C) Google

↓

2. 表示されたウインドウ内、テーマをダウンロードをクリックすると、
現在ブログに使用されているテーマのダウンロードが始まります。
(C) Google

2. 途中でHTMLを直接書き換える工程があるので、作業は慎重に行ってください。
3. 作業に自信が無い方は、練習用のブログを作成し、そのブログ上で作業を練習して下さい。
4. 全ての作業は自己責任にて行って下さい。

注意点は以上です。次に事前準備です。

事前準備1. 現在のブログの固定ページ名と主要タグ名、それぞれのアドレスを控える

『canvas』には2つのメニューバーが備わっていますが、共にBlogger標準のページガジェットは使われていません。ここを編集するにはHTMLコードを直接書き換える必要があるので、事前にメニューに反映したい固定ページ名とメニュー化したい主要ブログタグ名、そしてそれぞれのアドレスを控えておいてください。

赤枠で囲った2つのメニューを編集するには、HTMLを直接書き換える必要があります。
上の黒いメニューは固定ページメニュー、グレーのメインメニューにはホームと主要タグのメニュー化というように、
使い分けができます。

事前準備2. 『canvas』テンプレートを適応させる前に、ページ上の主要なガジェットは削除する

使用中のブログに『canvas』を適応させると、使用中のガジェットが全てタイトルの位置に移動してしまいます。移動してしまったガジェットを配置し直すのは面倒なので、事前に削除して、テンプレート適応後に再配置したほうがベターです。

『canvas』のレイアウト画面。既存のブログに『canvas』のテンプレートを適応させると、
先に配置してあった全てのガジェットが赤枠の位置にずらりと並びます。
これをドラッグで移動させるのは面倒なので、ガジェットを削除してから配置しなおしてください、
(C) Google

以下、日本語化の実際の手順となります。

手順1. 海外のサイトから『canvas』をダウンロードする

下記リンクから『canvas』のページに移動し、緑のダウンロードボタンからテンプレートをダウンロードして下さい。

Canvas Blogger Template

赤枠で囲ったグリーンのボタンをクリックすると、テンプレートのダウンロードが始まります。

ダウンロードされた『canvas.zip』ファイルを解凍し、フォルダの中を確認してください。

ダウンロードした『canvas.zip』とフォルダとその中身。
使用するのは赤枠で囲った『canvas.xml』です（Macの画面）。

手順2. 『canvas.xml』をアップロードして、テンプレートを適応させる

Bloggerのダッシュボード、左側のメニューのテーマをクリックし、右上の「バックアップ／復元ボタン」を押したあと表示されるウィンドウで「ファイルを選択」をクリックし、ダウンロードした『canvas.xml』を選択。その後「アップロードボタン」をクリックしてください。

ダウンロードした『canvas.xml』をアップロードします。
(C) Google

手順3. HTLMを編集して、メニューを書き換える

HTMLを編集して、2つあるメニューを事前に準備した内容に書き換えます。

#は未設定リンクを表す文字なので、ここを固定ページ又はタグのアドレスに変更し、その後ろの文字（Blog等）を対応する固定ページ名又はタグ名に変更してください。

左にあるダッシュボードのメニュー、テーマをクリックし、HTMLを編集をクリック。
(C) Google

↓

「Top Menu」を編集します。ここは固定ページをメニュー化するのが良いと思います。
(C) Google

↓

続けて「Main Men」を編集します。ここは各タグをメニュー化するのが良いと思います。
途中のulタグはドロップダウンメニューです。
ドロップダウンメニューを使用しない場合は「Shop」や「Couses」等の文字を削除してください。
(C) Google

HTMLを編集したら、コードのウィンドウの上にあるテーマをプレビューをクリックし、変更を確認してください。確認が終わったらコードのウィンドウの上にあるテーマを保存をクリックしてください。

手順4. CSSを追加する

下記リンクをクリックして、表示されたCSSを全てクリップボードにコピーしてください。

canvas_カスタマイズ_CSS

Bloggerのダッシュボードのテーマからカスタマイズをクリックし、Bloggerテーマデザイナーを開きます。

左のメニューにあるテーマをクリックし、カスタマイズをクリックしてください。
(C) Google

上級者向けをクリックし、枠内に先ほどのCSSをペーストしてください。ペーストし終わったら、右上のブログに適応をクリックしてください。

CSSを枠内にペーストしてブログに適応させてください。
(C) Google

作業としては以上です。

CSSにはカスタマイズしやすいようにコメントを加えているので、変更も容易にできると思います。

注意点として、CSSをペーストした後にHTMLの保存を行うと、枠内にあったCSSは消えてしまいます（HTMLコード内にはあります）。
これ以上CSSを変更しない場合は問題ありませんが、再度CSSを編集する際はHTMLコードからCSSを編集をしてください。

※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。