!変更したかったデザインテーマを変更しました。ブログを一度作り込んだ後のテーマ変更は、荷が重いというか、面倒なイメージがありますよね。私もずっと後回しにしておりました。何よりせっかく時間を掛けて作り込んだデザイン(CSS)をやり直すのは、勿体無いという気にもなります。今回は、初心者向け+備忘録としてデザインテーマの変更手順と、作り込んだデザインCSSの復元方法をご紹介します。手順1:デザインCSSのバックアップ作成デザインテーマを変更する前に、まずデザインCSSのバックアップを作成しておきましょう。テーマを変更すると、せっかく作り込んだデザインCSSの中身は消滅してしまうので、変更前に必ずバックアップを取りましょう。デザイン-カスタマイズ(スパナマーク)のデザインCSS内の記述をコピーし、メモ帳にでも貼り付けて保存しておきます。フッタ』に記述してあるhtmlは残ります。(こちらもついでにバックアップを取っておく事を、おススメします。></system>の貼り付けは不要です!ブログ記事のバックアップ方法については、こちらをご覧下さい。ひか☆ログ手順2:テスト用に「新しいブログを作成」おすすめの方法として、新しいテーマでのデザイン確認の為に、はてなブログで「新しいブログを作成」しましょう。※テスト用なのでブログの公開範囲は、「自分のみ」を選択します。新しいブログにバックアップした記事をインポート作成したら、デザインの確認に少し記事が作成してあった方が良いですよね。ここで役立つのがバックアップした記事です!ダッシュボード-インポートからバックアップファイルを選択します。はてなブログでバックアップしたファイルは文字コードがutf-8のようなので、文字化けしていない事を確認してインポートします。その他、現行のデザインをある程度踏襲したい場合は、設定-詳細設定の中身も現行と合わせておくと良いでしょう。手順3:新しいブログにデザインテーマのインストール新しいブログにバックアップした記事をインポートすれば、テスト用ブログで実際のテーマ変更後イメージを確認する事が出来ます。気に入るデザインテーマが決まるまでは、テスト用のブログでじっくり確認をしましょう。デザインテーマは、デザイン-デザインテーマからインストール!今回、私は半月さんの『Innocent』にしました。moonnote.hateblo.jpテーマ変更中はデザインが崩れている部分がどうしても発生すると思います。微修正で済めばいいですが、極力崩れている状態の公開時間が短くなるように、非公開のテスト用ブログで整えておきましょう。手順4:新しいブログにデザインCSSを貼り付けバックアップを取っておいたデザインCSSを、新しいブログのデザインCSSに貼り付けます。インストールしたデザインCSSに記述されている文の下に貼り付けます。></system>の貼り付けは不要です!その後、見出しなどテーマに合ったデザインに微修正を行います。していたデザインテーマの、ナビゲーションメニューなどを使っていた場合、ヘッダなどに記述してあるhtmlが使用出来ません。html文の中に以前のテーマを使用している記述がないか確認しておきましょう。大変なのは手順4までで、テスト用ブログでデザインが整えば本番はそれほど時間は掛かりません。以下STEP12で終了です。STEP1:デザインテーマを変更STEP2:テスト用でバックアップしておいたデザインCSSを貼り付け現行のデザインCSSを継承したい方は、現行のデザインCSSのバックアップを取り、コピペする事で復元出来ます。人によってはもっと修正箇所が多くなるかもしれませんが、基本的にはこれで終了。まとめ私の場合『ZENO-TEAL』→『Innocent』への変更でしたが、テーマ変更自体初めて行いました。テーマ探しからだったので、正味2~3時間は掛かったでしょうか。効率の良い変更手順があるかもしれませんが、手間はそれなりに掛かるのであまりやりたくはない作業ですね。今回テーマ変更した理由は、ZENO-TEALのキャッチ画像縛りから解放されたいというのが一番の理由ですが、Innocentを選んだ理由としてはシンプル・レスポンシブ・カスタマイズ性の高さです。現状、けっこう気に入っております。これからテーマ変更をお考えの方に、参考になれば幸いです。19:00関連記事2019-07-23ツイッターやブログ用のイラストアイコンをiPadで作成する方法!私は、前々から吹き出しを入れているブログ記事を見かけては秘...2019-06-30『はてなブログと画像のバックアップ作成方法』引越しや万一への備えこんにちは、ひかるです。パスポートの取り方こんにちは、ひかるです。実はこの度、40歳にして初めて海外旅...2019-05-14小学校でプログラミング教育が必修化!その目的と楽しく学ぶ方法とは2020年小学校でプログラミング教育がl必修化されます。はてなブログPro『ひか☆ログ』にご訪問頂き、ありがとうございます。詳しいプロフィールはこちら。二児(娘2人)の育児に奮闘中のアラフォーパパ。日中はサラリーマン、ブログは子供が寝たあとで。子育て・ビジネス・エンタメを中心に、生活をちょっと豊かにするタメになる情報を配信。スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。