こんにちは、ひかるです！
ついに、ついに 、ついに！
変更したかったデザインテーマを変更しました。
ブログを一度作り込んだ後のテーマ変更は、荷が重いというか、面倒なイメージがありますよね。
私もずっと後回しにしておりました。
何よりせっかく時間を掛けて作り込んだデザイン（CSS）をやり直すのは、勿体無いという気にもなります。
今回は、初心者向け＋備忘録としてデザインテーマの変更手順と、作り込んだデザインCSSの復元方法をご紹介します。
はてなブログのデザインテーマ変更手順
手順１：デザインCSSのバックアップ作成
デザインテーマを変更する前に、まずデザインCSSのバックアップを作成しておきましょう。
テーマを変更すると、せっかく作り込んだデザインCSSの中身は消滅してしまうので、変更前に必ずバックアップを取りましょう。
デザイン-カスタマイズ（スパナマーク）のデザインCSS内の記述をコピーし、メモ帳にでも貼り付けて保存しておきます。
ちなみに、『（ヘッダ）タイトル下』『（記事）記事上・記事下』『フッタ』に記述してあるhtmlは残ります。
（こちらもついでにバックアップを取っておく事を、おススメします。）
※テーマ変更後に保存したデザインCSSを貼り付ける際は、頭に記述されている
/* <system ~ ></system>の貼り付けは不要です！
ブログ記事のバックアップ方法については、こちらをご覧下さい。
『はてなブログと画像のバックアップ作成方法』引越しや万一への備え - ひか☆ログ
手順２：テスト用に「新しいブログを作成」
おすすめの方法として、新しいテーマでのデザイン確認の為に、はてなブログで「新しいブログを作成」しましょう。
※テスト用なのでブログの公開範囲は、「自分のみ」を選択します。
新しいブログにバックアップした記事をインポート
作成したら、デザインの確認に少し記事が作成してあった方が良いですよね。
ここで役立つのがバックアップした記事です！
ダッシュボード-インポートからバックアップファイルを選択します。
はてなブログでバックアップしたファイルは文字コードがutf-8のようなので、文字化けしていない事を確認してインポートします。
その他、現行のデザインをある程度踏襲したい場合は、設定-詳細設定の中身も現行と合わせておくと良いでしょう。
手順３：新しいブログにデザインテーマのインストール
新しいブログにバックアップした記事をインポートすれば、テスト用ブログで実際のテーマ変更後イメージを確認する事が出来ます。
気に入るデザインテーマが決まるまでは、テスト用のブログでじっくり確認をしましょう。
デザインテーマは、デザイン-デザインテーマからインストール！
今回、私は半月さんの『Innocent』にしました。
テーマ変更中はデザインが崩れている部分がどうしても発生すると思います。微修正で済めばいいですが、極力崩れている状態の公開時間が短くなるように、非公開のテスト用ブログで整えておきましょう。
手順４：新しいブログにデザインCSSを貼り付け
バックアップを取っておいたデザインCSSを、新しいブログのデザインCSSに貼り付けます。
インストールしたデザインCSSに記述されている文の下に貼り付けます。
上記にも記載しましたが、
※テーマ変更後に保存したデザインCSSを貼り付ける際は、頭に記述されている
/* <system ~ ></system>の貼り付けは不要です！
その後、見出しなどテーマに合ったデザインに微修正を行います。
そしてまた、修正したデザインCSSをバックアップ（本番用）しておきます。
注意点
以前使用していたデザインテーマの、ナビゲーションメニューなどを使っていた場合、ヘッダなどに記述してあるhtmlが使用出来ません。
html文の中に以前のテーマを使用している記述がないか確認しておきましょう。
手順５：ブログのデザインテーマを変更
大変なのは手順４までで、テスト用ブログでデザインが整えば本番はそれほど時間は掛かりません。以下STEP①②で終了です。
STEP①：デザインテーマを変更
STEP②：テスト用でバックアップしておいたデザインCSSを貼り付け
現行のデザインCSSを継承したい方は、現行のデザインCSSのバックアップを取り、コピペする事で復元出来ます。
人によってはもっと修正箇所が多くなるかもしれませんが、基本的にはこれで終了。
まとめ
私の場合『ZENO-TEAL』→『Innocent』への変更でしたが、テーマ変更自体初めて行いました。
テーマ探しからだったので、正味２～３時間は掛かったでしょうか。
もっと効率の良い変更手順があるかもしれませんが、手間はそれなりに掛かるのであまりやりたくはない作業ですね。
今回テーマ変更した理由は、ZENO-TEALのキャッチ画像縛りから解放されたいというのが一番の理由ですが、Innocentを選んだ理由としてはシンプル・レスポンシブ・カスタマイズ性の高さです。
現状、けっこう気に入っております。
これからテーマ変更をお考えの方に、参考になれば幸いです。