THE THOR デザイン着せ替え方法 | デモサイトをカスタマイズ

この記事では THE THOR のデザイン着せ替え機能の使い方を解説します。

ブログを開設したら、誰でもデザインをおしゃれにしたいですよね。 とはいえ、 HTML や CSS などコードの設定がわからないと、デザインを変更するのもかなりの時間と労力がかかります。

WordPress テーマの THE THOR(ザ・トール)を使用すれば、初心者でも3分でおしゃれなブログデザインにカスタマイズすることができますよ!

▼おしゃれ&サイト高速化テーマ▼

THE THOR

当サイト独自特典
『記事作成10の手順』付き

>> THE THOR 評判・口コミの記事はこちら

タップできる目次

THE THOR デザイン着せ替え方法

THE THOR のデザイン着せ替え方法は、以上の4ステップで進めます。

スムーズにいけば3分程度で終わります。

ステップ①: Customizer Export / Import をインストールする

まずは、 WordPress プラグイン Customizer Export / Import をインストールします。

STEP
[ プラグイン ] > [ 新規追加 ] をクリック
プラグインの新規追加項目
プラグインの新規追加項目
STEP
[ Customizer Export / Import ] をインストール > [ 有効化 ]
Customizer Export/Importのダウンロード
Customizer Export / Import のダウンロード

以上で、 Customizer Export / Import のインストールは完了です。

ステップ②:着せ替えるスタイルをダウンロードする

次に、着せ替えたいスタイルをダウンロードします。

STEP
THE THORのデモサイト一覧
THE THOR のデモサイト一覧
STEP
着せ替えたいスタイルをダウンロード
THE THORのデモデザインをダウンロード
THE THOR のデモデザインをダウンロード

※例として『02』をダウンロードします

STEP
ダウンロードが完了
THE THORデモデザインのZIPファイル
THE THOR デモデザインの ZIP ファイル

以上で、スタイルのダウンロードは完了です。

ステップ③:圧縮ファイルを解凍する

先ほどダウンロードした Zip ファイルを解凍します。

圧縮ファイルのままだと WordPress にスタイルをインストールできなので、必ず解凍してください。

STEP
Zip ファイル名を確認
THE THORのデモデザインZIPファイル名
THE THOR のデモデザイン ZIP ファイル名
STEP
Zip ファイルを解凍
THE THORのデモデザインZIPファイルの解凍
THE THOR のデモデザイン ZIP ファイルの解凍

これで、デモデザインの Zip ファイルの解凍までは完了しました。

あとは、ブログにデモデザインのスタイルを実装するだけです。

ステップ④:解凍したファイルをインポートする

最後に、解凍したファイルを WordPress にインストールします。

STEP
[ 外観 ] > [ カスタマイズ ] をクリック
THE THORの管理画面
THE THOR の管理画面
STEP
[ エクスポート/インポート ] をクリック
THE THORデモデザインのエクスポート/インポート
THE THOR デモデザインのエクスポート/インポート
STEP
ファイルをインポート
デモデザインのファイルをインポートする
デモデザインのファイルをインポートする
インポートの手順
  1. [ ファイルを選択 ] をクリックして、解凍したファイルを選択する
  2. チェックしてもしなくても、どちらでも構わない
  3. [ インポート ] をクリックする
STEP
トップページの表示確認

画像ファイルもインポートした場合

THE THORのデモデザイン設定後のトップページ
THE THOR のデモデザイン設定後のトップページ(画像ファイルあり)

画像ファイルをインポートしない場合

THE THORのデモデザイン設定後のトップページ(画像ファイルなし)
THE THOR のデモデザイン設定後のトップページ(画像ファイルなし)

上の画像のようになっていればインポート完了です。

ここまでデザイン着せ替え設定方法を解説しましたが、いくつかの注意点があるので解説します。

THE THOR のデザイン着せ替え注意点

THE THOR のデザインを着せ替えには、このような注意点が3つあります。

それぞれの注意点を説明しますね。

デザイン着せ替えで設定がリセットされる

デザイン着せ替えをすると、これまで行っていたカスタマイズ設定がすべてリセットされます。

リセットされる項目例
  • アクセス解析ツールの設定
  • アドセンス広告コード
  • HTML / CSS などのカスタマイズなど

このように、手間ひまかけて行った設定がすべてリセットされてしまいます。

THE THOR のデザイン着せ替え機能を設定する場合は、テーマ導入後すぐに行いましょう。

他テーマから THE THOR に変更して、デザイン着せ替えを行う場合は事前にバックアップを取っておくと安心です。

デザイン着せ替え後に初期設定が必要

デザイン着せ替え後に初期設定が必要です。

デザイン着せ替えで、ブログデザインの大枠はできますが中身はあなたのブログ固有に設定しないといけません。設定したサイトは以下のようになります。

THE THORのデザイン着せ替え後の画面
THE THOR のデザイン着せ替え後の画面

※画像もダウンロードした場合

デザイン着せ替え直後は、『 THE THOR 』の画像や設定が使用されます。

デモサイトそのままのデザインになるため、デザイン着せ替えを行ったらあなたのサイトに合わせた設定にする必要があります。

デザインを再設定する場合は1度リセットする

「デモ01をダウンロードしたけど、やっぱりデモ02に変更したい」などデザインを再設定したい場合は、最初に設定したデザインを1度リセットする必要があります。

デフォルトに戻さずデザインを変更すると不具合が起こる場合があり、 THE THOR 公式ページでも1度設定をリセットするように推奨しています。

デザイン設定をリセットする方法は、次の項で解説します。

THE THOR のデザイン着せ替えをリセットする方法

THE THORのデザイン着せ替えをリセットする方法
THE THOR のデザイン着せ替えをリセットする方法

「 THE THOR のデザインを着せ替えたけど、やっぱり元の状態に戻したい」という方もいると思うので、デザイン着せ替えをリセットする方法を紹介します。

デフォルト用のスタイルをダウンロードする以外は、デザイン着せ替え方法と同じです。

STEP
THE THOR マニュアルサイト からデフォルト用のスタイルをダウンロード
THE THORのデフォルトスタイルをダウンロード
THE THOR のデフォルトスタイルをダウンロード
STEP
ファイルをインポートする
デフォルトデザインのインポート
デフォルトデザインのインポート
インポートの手順
  1. [ ファイルを選択 ]をクリックして、解凍したファイルを選択する
  2. チェックしないでOK
  3. [ インポート ] をクリックする

以上で、デザイン着せ替えの設定はリセットされます。

トップページに戻り、デザイン着せ替え前の状態に戻ったか確認してください。

THE THOR のデザイン着せ替えまとめ

THE THORのデザイン着せ替えまとめ
THE THOR のデザイン着せ替えまとめ

THE THOR のデザイン着せ替えを利用することで、ブログ初心者でもおしゃれなサイトをかんたんに作ることができます。

ただし、デザインを着せ替えるとカスタマイズがリセットされます。

デザイン着せ替え機能は他テーマから THE THOR に変更後すぐ、あるいはブログ開設後すぐに THE THOR を導入してデザインを着せ替えるとスムーズですよ!

さて、デザインの着せ替えができたら次は各種プラグインを設定しましょう。

>> THE THOR プラグイン設定ガイド|必須・不要・相性悪い・おすすめはこちら

役に立った!と思ったら他の人にシェアしよう
  • URLをコピーしました!

記事の内容についてご意見をお聞かせください

コメントする

このコメントを送信することにより、当サイトの個人情報保護方針に同意したことになります。

タップできる目次