この記事では THE THOR のデザイン着せ替え機能の使い方を解説します。
ブログを開設したら、誰でもデザインをおしゃれにしたいですよね。 とはいえ、 HTML や CSS などコードの設定がわからないと、デザインを変更するのもかなりの時間と労力がかかります。
WordPress テーマの THE THOR(ザ・トール)を使用すれば、初心者でも3分でおしゃれなブログデザインにカスタマイズすることができますよ!
THE THOR デザイン着せ替え方法
THE THOR のデザイン着せ替え方法は、以上の4ステップで進めます。
スムーズにいけば3分程度で終わります。
ステップ①: Customizer Export / Import をインストールする
まずは、 WordPress プラグイン Customizer Export / Import をインストールします。
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 2 プラグインの新規追加項目](https://image.chiyo-blog.com/wp-content/uploads/2020/04/aa2ebd6f5117b552093f84609edf7c9c-1.png)
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 3 Customizer Export/Importのダウンロード](https://image.chiyo-blog.com/wp-content/uploads/2020/04/4f246136beee8b273f4074a9008e715e-1.png)
以上で、 Customizer Export / Import のインストールは完了です。
ステップ②:着せ替えるスタイルをダウンロードする
次に、着せ替えたいスタイルをダウンロードします。
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 5 THE THORのデモデザインをダウンロード](https://image.chiyo-blog.com/wp-content/uploads/2020/04/ce15b75b0fb143253efa9ae0b6020b68-1.png)
※例として『02』をダウンロードします
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 6 THE THORデモデザインのZIPファイル](https://image.chiyo-blog.com/wp-content/uploads/2020/04/ea50857b218af0c7846cb2af9faa7426-1.png)
以上で、スタイルのダウンロードは完了です。
ステップ③:圧縮ファイルを解凍する
先ほどダウンロードした Zip ファイルを解凍します。
圧縮ファイルのままだと WordPress にスタイルをインストールできなので、必ず解凍してください。
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 7 THE THORのデモデザインZIPファイル名](https://image.chiyo-blog.com/wp-content/uploads/2020/04/4da2b71a16529fb10b47a6ba7cdec2af-1.png)
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 8 THE THORのデモデザインZIPファイルの解凍](https://image.chiyo-blog.com/wp-content/uploads/2020/04/dae7e9839d652efd4f192dd86b56fff9-1.png)
これで、デモデザインの Zip ファイルの解凍までは完了しました。
あとは、ブログにデモデザインのスタイルを実装するだけです。
ステップ④:解凍したファイルをインポートする
最後に、解凍したファイルを WordPress にインストールします。
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 9 THE THORの管理画面](https://image.chiyo-blog.com/wp-content/uploads/2020/04/51795993e447ef9d0cdc2758dcc4c063-1.png)
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 10 THE THORデモデザインのエクスポート/インポート](https://image.chiyo-blog.com/wp-content/uploads/2020/04/b53ef81eb5d4ba1557910dc19c1a4d0e-1.png)
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 11 デモデザインのファイルをインポートする](https://image.chiyo-blog.com/wp-content/uploads/2020/04/74514643c5395ef6a3c4852526cee05a-1.png)
- [ ファイルを選択 ] をクリックして、解凍したファイルを選択する
- チェックしてもしなくても、どちらでも構わない
- [ インポート ] をクリックする
画像ファイルもインポートした場合
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 12 THE THORのデモデザイン設定後のトップページ](https://image.chiyo-blog.com/wp-content/uploads/2020/04/1c1778ca6e2ed426058aaaee4b73abd6-1.png)
画像ファイルをインポートしない場合
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 13 THE THORのデモデザイン設定後のトップページ(画像ファイルなし)](https://image.chiyo-blog.com/wp-content/uploads/2020/04/93885f2da97af9277f76849e3277d4a3-1.png)
上の画像のようになっていればインポート完了です。
ここまでデザイン着せ替え設定方法を解説しましたが、いくつかの注意点があるので解説します。
THE THOR のデザイン着せ替え注意点
THE THOR のデザインを着せ替えには、このような注意点が3つあります。
それぞれの注意点を説明しますね。
デザイン着せ替えで設定がリセットされる
デザイン着せ替えをすると、これまで行っていたカスタマイズ設定がすべてリセットされます。
- アクセス解析ツールの設定
- アドセンス広告コード
- HTML / CSS などのカスタマイズなど
このように、手間ひまかけて行った設定がすべてリセットされてしまいます。
THE THOR のデザイン着せ替え機能を設定する場合は、テーマ導入後すぐに行いましょう。
他テーマから THE THOR に変更して、デザイン着せ替えを行う場合は事前にバックアップを取っておくと安心です。
デザイン着せ替え後に初期設定が必要
デザイン着せ替え後に初期設定が必要です。
デザイン着せ替えで、ブログデザインの大枠はできますが中身はあなたのブログ固有に設定しないといけません。設定したサイトは以下のようになります。
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 14 THE THORのデザイン着せ替え後の画面](https://image.chiyo-blog.com/wp-content/uploads/2020/04/3f9d05c84b4db185ce8d76250805c131-1.png)
※画像もダウンロードした場合
デザイン着せ替え直後は、『 THE THOR 』の画像や設定が使用されます。
デモサイトそのままのデザインになるため、デザイン着せ替えを行ったらあなたのサイトに合わせた設定にする必要があります。
デザインを再設定する場合は1度リセットする
「デモ01をダウンロードしたけど、やっぱりデモ02に変更したい」などデザインを再設定したい場合は、最初に設定したデザインを1度リセットする必要があります。
デフォルトに戻さずデザインを変更すると不具合が起こる場合があり、 THE THOR 公式ページでも1度設定をリセットするように推奨しています。
デザイン設定をリセットする方法は、次の項で解説します。
THE THOR のデザイン着せ替えをリセットする方法
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 15 THE THORのデザイン着せ替えをリセットする方法](https://chiyo-blog.com/wp-content/uploads/2020/04/415-648x432.png)
「 THE THOR のデザインを着せ替えたけど、やっぱり元の状態に戻したい」という方もいると思うので、デザイン着せ替えをリセットする方法を紹介します。
デフォルト用のスタイルをダウンロードする以外は、デザイン着せ替え方法と同じです。
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 17 デフォルトデザインのインポート](https://image.chiyo-blog.com/wp-content/uploads/2020/04/b7d4e7434a542f5572aa9df4266566ee-1.png)
- [ ファイルを選択 ]をクリックして、解凍したファイルを選択する
- チェックしないでOK
- [ インポート ] をクリックする
以上で、デザイン着せ替えの設定はリセットされます。
トップページに戻り、デザイン着せ替え前の状態に戻ったか確認してください。
THE THOR のデザイン着せ替えまとめ
![THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ 18 THE THORのデザイン着せ替えまとめ](https://chiyo-blog.com/wp-content/uploads/2020/04/935-1-1-648x432.jpg)
THE THOR のデザイン着せ替えを利用することで、ブログ初心者でもおしゃれなサイトをかんたんに作ることができます。
ただし、デザインを着せ替えるとカスタマイズがリセットされます。
デザイン着せ替え機能は他テーマから THE THOR に変更後すぐ、あるいはブログ開設後すぐに THE THOR を導入してデザインを着せ替えるとスムーズですよ!
さて、デザインの着せ替えができたら次は各種プラグインを設定しましょう。
記事の内容についてご意見をお聞かせください