Blogger サイトデザイン（テンプレート）変更手順 ~ rteak

Photo by Clark Tibbs on Unsplash

※実行に際しては自己責任でお願いします。

サイトデザインを変更したときの手順をまとめた。

お気に入りのテンプレートを探す

Blogger 向けのテンプレートは次のサイトで取り扱っている。

探すポイントを予め決めておく。

例えば、

デザインがよい（色彩、レイアウト、フォント等）
SEO 対策がされている
軽量

等。

お気に入りのテンプレートが決まったらダウンロードする。

バックアップを取っておく

元に戻せるようにバックアップを取っておく。

Blogger で CSS を追加する方法

テーマのバックアップ

次の手順でテーマ（デザイン部分）のバックアップを取る。

Blogger を開き、左側のメニューから「テーマ」を選択する。
「カスタマイズ」から「バックアップ」を選択する。
ダウンロード先に「theme-xxxxxxxxxxxxxxxxxxx.xml」というファイルができる。
「xxxxxxxxxxxxxxxxxxx」はブログ ID 。
元に戻す場合は、「カスタマイズ」から「元に戻す」を選択し、このファイルをアップロードすればよい。

HTML コードを保存しておく

目次や関連記事等を表示するために外部からコードを取り込んでいる場合は HTMLコード全体をテキストファイルに保存しておくと復元しやすい。

Blogger を開き、左側のメニューから「テーマ」を選択する。
「カスタマイズ」から「HTML を編集」を選択する。
表示されたコードを全体をコピーし、メモ帳などに貼り付けて保存する。

HTMLコード全体をコピーするのは、取り込んだコードの配置場所を特定するため。
予め取り込んだコードにわかりやすいコメントを入れておくと探しやすい。

コンテンツのバックアップ

次の手順でコンテンツ（投稿、ページ、コメント）のバックアップを取る。

Blogger を開き、左側のメニューから「設定」を選択する。
「ブログの管理」から「コンテンツをバックアップ」を選択する。
ダウンロード先に「blog-mm-dd-yyyy.xml」というファイルができる。
元に戻す場合は、「ブログの管理」から「コンテンツをインポート」を選択し、このファイルをアップロードすればよい。

テスト用サイトで試す

いきなり新しいテンプレートを適用するのはリスクが高い。
まずはテスト用サイトを作成し、そこで新しいテンプレートを試してみる。

テスト用サイトを作成する

Blogger を開き、左側メニューの最上部にあるブログ選択プルダウンメニューから「新しいブログ…」を選択する。
テスト用サイトの名前を入れて新しいブログを作成する。

テスト用サイトに現在のテーマとコンテンツを適用する

いきなり新しいテンプレートを適用してもよいが、極力本番サイトと同じ条件にしておくことが望ましいので、上記のテーマとコンテンツのバックアップをテスト用サイトに適用する。

Blogger を開き、左側のメニューから「テーマ」を選択する。
「カスタマイズ」から「元に戻す」を選択し、バックアップファイルをアップロードする。
左側のメニューから「設定」を選択する。
「ブログの管理」から「コンテンツをインポート」を選択する。

テスト用サイトに新しいテーマを適用する

新しいテーマをテスト用サイトに適用し、見栄えなどを確認する。

Blogger を開き、左側のメニューから「テーマ」を選択する。
「カスタマイズ」から「元に戻す」を選択し、テンプレートサイトからダウンロードしたファイル（拡張子「.xml」）をアップロードする。
左側のメニューから「レイアウト」を選択し、ガジェットの配置を整える。

本番サイトのデザインを変える

テスト用サイトで新しいテーマを確認して問題がなければ本番サイトに適用する。

本番サイトに新しいテーマを適用する

テスト用サイトで行った手順にならって、本番サイトに新しいテーマを適用する。

Blogger を開き、左側のメニューの最上部にあるブログ選択プルダウンメニューから本番ブログを選択する。
左側のメニューから「テーマ」を選択する。
「カスタマイズ」から「元に戻す」を選択し、テンプレートサイトからダウンロードしたファイル（拡張子「.xml」）をアップロードする。
左側のメニューから「レイアウト」を選択し、ガジェットの配置を整える。

デザインを整える

フォント、フォントサイズ、背景色、テキスト色、線の種類、線の太さ等、気になるところを CSS で調整する。

Blogger を開き、左側のメニューから「テーマ」を選択する。
「カスタマイズ」から「HTML を編集」を選択する。
該当の CSS 定義を変更して保存する。
本番サイトを開き、意図したとおり表示されていることを確認する。

外部から取り込んだコードを適用する

目次や関連記事等を表示するために外部からコードを取り込んでいる場合は HTMLコードを編集してそれらを復旧する。

Blogger を開き、左側のメニューから「テーマ」を選択する。
「カスタマイズ」から「HTML を編集」を選択する。
保存した HTMLコードの中から外部のコードをコピーし、新しいテンプレートの該当箇所に貼り付けて保存する。
本番サイトを表示し、外部から取り込んだコードが正しく適用されていることを確認する。

その他の確認

本番サイトを巡回し、問題があれば都度修正する。

この作業がサイトの品質を高めることになる。

まとめ

サイトの改造は楽しい。

問題が生じても調べながら解決していくことはスキルアップにつながる。

期待どおりに改造できれば気分も盛り上がる。

ただし、これまで問題なく表示できていたものが表示できなくなる等のリスクはある。

あくまでも自己責任で。

rteak

return to experience and knowledge

Menu

Blogger サイトデザイン（テンプレート）変更手順