THE THOR(ザトール)着せ替えの特徴と設定♪着せ替え前と後

• THE THOR（ザ・トール）の着せ替えパターンそれぞれの特徴が知りたい
• wordpressの知識ゼロでも着せ替えは簡単にできるの？
• THE THORの着せ替え方法は？

こういった疑問にブログ初心者がTHE THOR（ザ・トール）を２年使った体験談(笑)を交えながら答えたいと思います

　本記事の内容

私の体験談の前にTHE THOR（ザ・トール）のテーマの構成の紹介と、着せ替えの手順と特徴を簡単に紹介します♪
THE THOR（ザ・トール）を親テーマ、子テーマとインストールした後、スタイルを選んで着せ替えします！

wordpress有料テーマ「THE THOR」の購入方法＆インストール方法とテーマを有効化にする詳しい手順は↓の記事で紹介しています。

>>>wordpress有料テーマ【ザ・トール】でブログ♪購入からインストール手順の説明

簡単な記事を作成してデモサイトの9パターンで着せ替えすると、サイトの見た目がどう変わるかを確かめてください。

それぞれのスタイルの特徴と共に比べてみてみてください(^^♪

THE THOR（ザトール）着せ替えるのは子テーマ「01」

引用元：他を圧倒する「ザ・トール」のデモサイト一覧

【ＴＨＥ ＴＨＯＲ】を購入して「親テーマ」と「子テーマ」をインストールすると、設定されているデザインは「01」になります。

【ＴＨＥ ＴＨＯＲ】の着せ替えで変わっていくのは「子テーマ」の設定です。

＜ PR ＞

デモサイトで使用している画像もインストールする方法

上の画像の場所にチェックを入れてインポートをすると画像も一緒に、インストール（インポート）されます。
このスタイルのインストールについては記事下部で詳しく紹介しています♪

THE THOR（ザトール）着せ替えても表示は「子テーマ01」♪

着せ替え後に「外観」→「テーマ」で一覧を表示させたときに、子テーマが「01」と表示されていても気にしないでください。

そこは着せ替えても「01」表示のままです(￣▽￣;)

何しろパーツの表示/非表示の設定が変わるだけなので(笑)

＞＞＞ＴＨＥ ＴＨＯＲ(ザ・トール）公式ページははこちら

＜ PR ＞

THE THOR（ザトール）デモサイト着せ替え♪スタイル設定

THE THOR（ザ・トール）の着せ替えというのは、パーツの表示/非表示を選択し変更して作られています。

デモサイトからデザインを選んで着せ替えすれば、ブログのデザインが簡単にガラッと変わります(^^♪

私のサイトは「09」の着せ変えをした後に、設定を変えたり、CSS追加したり、親テーマいじったりしたので原型をとどめていません(;^ω^)

THE THOR（ザトール）の構成を紹介

着せ替え後に設定を変更する時の為に、THE THOR（ザ・トール）の構成を紹介します。

• ヘッダーエリア(固定を選択できる）
• ヘッダーボトムエリア（表示/非表示を選択できる）
• メインビジュアルエリア（表示/非表示を選択できる）
• メインビジュアル下（表示/非表示を選択できる）
• カルーセルスライダー（表示/非表示を選択できる）
• サイドカラムエリア（表示/非表示を選択できる）
• メインカラムエリア
• フッタートップエリア（表示/非表示を選択できる）
• フッターエリア

この構成を、表示させたり非表示にしたりしながら着せ替えが構成されています。

THE THOR（ザトール）ヘッダーボトムエリア

この２つを表示させるか選択できます。

THE THOR（ザトール）ブログのカラムの話

カラムのはサイトの骨格になります。

３カラムのレイアウト

Yahooのトップページが3カラムです。

２カラムのレイアウト

記事ページで私が使用しているカラムになります。

このカラムをどう選択しているかで着せ替えのデザインが変わってきます。

1カラムのレイアウト

ここは画像を省きました(;^_^A
私のトップページが１カラムになります。

サイドに何もない状態のページです。

THE THOR（ザトール）着せ替えパターンおすすめ♪

着せ替えは、使用されている画像、そして設定の違いで見た目を変えています。
この細かな設定を簡単に一括でしてしまおうというのが、着せ替え機能です。

これからスタイルでどう変わるのかを紹介していくのですが、自分のブログで使いたい設定が多いなと感じる着せ替えのスタイルを選ぶことをオススメします(^^)/

THETHOR(ザトール)着せ替えスタイル01の紹介

THE THOR(ザトール)着せ替えスタイル01のTOPページ

引用元：他を圧倒する「ザ・トール」のデモサイト一覧

THE THOR(ザトール)着せ替えスタイル0１に着せ替え後

THE THOR(ザトール)着せ替えスタイル01のおすすめな特徴

ビジュアルアリアの画像にマスクがかかっています。

＞＞＞ＴＨＥ ＴＨＯＲ(ザ・トール）公式ページははこちら

THETHOR(ザトール)着せ替えスタイル02の紹介

この着せ替えスタイルは、ヘッダーのメニューバーが非表示設定になっています。

メニューを表示させたい場合は、設定を変更しましょう(^^♪

THE THOR(ザトール)着せ替えスタイル0２のTOPページ

引用元：他を圧倒する「ザ・トール」のデモサイト一覧

THE THOR(ザトール)着せ替えスタイル0２に着せ替え後

THE THOR(ザトール)着せ替えスタイル２のおすすめな特徴

ＴＯＰページのカラムが1カラムで、サイドエリアが非表示なっています。

＞＞＞ＴＨＥ ＴＨＯＲ(ザ・トール）公式ページははこちら

THETHOR(ザトール)着せ替えスタイル03の紹介

THE THOR(ザトール)着せ替えスタイル0３のTOPページ

引用元：他を圧倒する「ザ・トール」のデモサイト一覧

THE THOR(ザトール)着せ替えスタイル0３に着せ替え後

THE THOR(ザトール)着せ替えスタイル0３のおすすめな特徴

＞＞＞ＴＨＥ ＴＨＯＲ(ザ・トール）公式ページははこちら

THETHOR(ザトール)着せ替えスタイル04の紹介

この着せ替えスタイルは、ヘッダーのメニューバーが非表示設定になっています。

メニューを表示させたい場合は、設定を変更しましょう(^^♪

THE THOR(ザトール)着せ替えスタイル0４のTOPページ

引用元：他を圧倒する「ザ・トール」のデモサイト一覧

THE THOR(ザトール)着せ替えスタイル0４に着せ替え後

THE THOR(ザトール)着せ替えスタイル0４のおすすめな特徴

このデモサイトの着せ替えの画像がすごい・・・。

ＴＯＰページの全部の画像にマスクがかかってる。

＞＞＞ＴＨＥ ＴＨＯＲ(ザ・トール）公式ページははこちら

THETHOR(ザトール)着せ替えスタイル05の紹介

THE THOR(ザトール)着せ替えスタイル0５のTOPページ

引用元：他を圧倒する「ザ・トール」のデモサイト一覧

THE THOR(ザトール)着せ替えスタイル0５に着せ替え後

THE THOR(ザトール)着せ替えスタイル0５のおすすめな特徴

ＴＯＰページのカラムが1カラムで、サイドエリアが非表示なっています。

＞＞＞ＴＨＥ ＴＨＯＲ(ザ・トール）公式ページははこちら

THETHOR(ザトール)着せ替えスタイル06の紹介

この着せ替えスタイルは、ヘッダーのメニューバーが非表示設定になっています。

メニューを表示させたい場合は、設定を変更しましょう(^^♪

THE THOR(ザトール)着せ替えスタイル0６のTOPページ

引用元：他を圧倒する「ザ・トール」のデモサイト一覧

THE THOR(ザトール)着せ替えスタイル0６に着せ替え後

THE THOR(ザトール)着せ替えスタイル0６のおすすめな特徴

画像にマスクがかかっています。

＞＞＞ＴＨＥ ＴＨＯＲ(ザ・トール）公式ページははこちら

THETHOR(ザトール)着せ替えスタイル07の紹介

この着せ替えスタイルは、ヘッダーのメニューバーが非表示設定になっています。

メニューを表示させたい場合は、設定を変更しましょう(^^♪

THE THOR(ザトール)着せ替えスタイル0７のTOPページ

引用元：他を圧倒する「ザ・トール」のデモサイト一覧

THE THOR(ザトール)着せ替えスタイル0７に着せ替え後

THE THOR(ザトール)着せ替えスタイル0７のおすすめな特徴

着せ替えでテーマを上書きしているはずなのに、前の設定が残っているのか、ヘッダーエリアの背景が黒に・・・

＞＞＞ＴＨＥ ＴＨＯＲ(ザ・トール）公式ページははこちら

THETHOR(ザトール)着せ替えスタイル08の紹介

この着せ替えスタイルは、ヘッダーのメニューバーが非表示設定になっています。

メニューを表示させたい場合は、設定を変更しましょう(^^♪

THE THOR(ザトール)着せ替えスタイル0８のTOPページ

引用元：他を圧倒する「ザ・トール」のデモサイト一覧

THE THOR(ザトール)着せ替えスタイル0８に着せ替え後

デモサイトの見本と全然違う見た目になったので驚きました(￣▽￣;)

THE THOR(ザトール)着せ替えスタイル0８のおすすめな特徴

メインビジュアルが非表示設定になっていたので、大きな画像はないです。

デモにあった便利そうな検索はどこへいったのでしょうか・・・消えています。

自分で設定して表示させるしかないですね(;^_^A

＞＞＞ＴＨＥ ＴＨＯＲ(ザ・トール）公式ページははこちら

THETHOR(ザトール)着せ替えスタイル09の紹介

私のサイトで使用した着せ替えになります。
面影が残っていないなぁ・・

THE THOR(ザトール)着せ替えスタイル９のTOPページ

引用元：他を圧倒する「ザ・トール」のデモサイト一覧

THE THOR(ザトール)着せ替えスタイル0９に着せ替え後

THETHOR(ザトール)着せ替えスタイル0９のおすすめな特徴

ヘッダーエリアの背景色が水色になっているのが不思議？？

選択していないのだけれど・・・

上書きの弊害でしょうか？？

＞＞＞ＴＨＥ ＴＨＯＲ(ザ・トール）公式ページははこちら

wordpressの知識ゼロでもTHE THOR(ザトール)着せ替えが簡単にできる理由

「着せ替え難しそう」と思うかもしれませんが、とっても簡単なんです。

着せ替えにかかる時間は・・・5分もかかりません。

デモサイトから「スタイルシート」を自分のPCダウンロードしてきて、「外観」→「カスタマイズ」でインポートすれば出来ちゃいます。

そして、着せ替えの事についてもそうなのですが、自分がわからない事があれば、会員フォーラムで調べることが出来ます。

しかも今では検索サイトで検索すれば、色々なサイトが説明をしてくれています。
それでもわからないことがあれば、会員フォーラムに投稿して聞くこともできます。

着せ替えの前♪wordpress有料テーマ「THE THOR」購入とインストール

着せ替えの前にwordpress有料テーマ「THE THOR」の購入とインストール、そして「外観」＞「テーマ」で「THE THOR」が「有効化」された状態になっていることを確認してから作業をはじめます。

THE THORの購入とインストールが終わっていない場合は下の記事を参考にどうぞ♪

>>>wordpress有料テーマ【ザ・トール】でブログ♪購入からインストール手順の説明

THE THOR(ザトール)デモサイトからのスタイル着せ替えの手順紹介

着せ替えは、デモサイトからスタイルのデータをダウンロードして使用します。

1. THE THORにプラグインを入れる
2. THE THORのデモサイトからスタイルをダウンロードしてくる
3. ダウンロードしてきたファイルを解凍する。
4. THE THORにスタイルの解凍したファイルをアップロードする

THE THOR（ザ・トール）デザイン着せ替え前に気を付ける事

THE THOR（ザ・トール）のデザインを着せ替えると、前着せ替え前に設定していた情報が上書きされます。
そらロゴのサイズの設定していても、新しいデザインの着せ替えをした時点で　デモサイトの選んだスタイルに設定されているロゴサイズにに自動的に上書きされてしまうのです。

そら ロゴのサイズの設定していても、新しいデザインの着せ替えをした時点で　デモサイトの選んだスタイルに設定されているロゴサイズにに自動的に上書きされてしまいます。

デザイン着せ替えの準備のプラグインをインストール

デザイン着せ替えの前にWordPressのプラグイン「Customizer Export/Import」をインストールして有効化します。

画面左側のコンセントマークの「プラグイン」→「新規追加」をクリックしてください。

プラグインの検索の所に「Customizer Export/Import」と入力して検索してください。

プラグイン「Customizer Export/Import」の有効化～♪

「今すぐインストール」をクリック　→　「有効化ボ」タンクリックしてプラグインの準備は完了です。

もし、詳しく画像付きでという方は下のリンクで飛んで、使い方10を読んでください。

>>>THE THOR【ザ・トール】で簡単にブログ♪使い方＆記事の書き方を初心者に説明

THE THOR（ザ・トール）のデモサイトへ

これは公式サイトから、好みの着せ替えのデザインをダウンロードしてきます。

>>>THE THOR（ザ・トール）公式サイト

上記のサイトに9個の着せ替えのデザインがあります。

THE THOR（ザ・トール）着せ替えのデザインを選ぶ

「デモサイト」をクリックしてそれぞれのの雰囲気を確かめながら、ダウンロードする着せ替えのデザインを探します(^^♪

①着せ替えのデザインが決まったら、着せ替えのデザインの「スタイルダウンロード」ボタンをクリックします。

私は着せ替えデザイン「09」を選択したので、それを例にしますね。

THE THOR（ザ・トール）着せ替えのデザインをダウンロード

②「the-thor-child-export-demo09.zip」というzip形式の圧縮ファイルがダウンロードされるので、これを任意の場所保存してください。

③保存したスタイルの着せ替えのファイルを、またもや任意の場所に解凍してください。

拡張子が表示されていない場合

ファイルの拡張子が表示されていない場合は、エクスプローラーの「表示」タブをクリックして、その中の「ファイル名拡張子」にチェックを入れてください。

THE THOR（ザ・トール）着せ替えのデザインのzipファイルを解凍

任意の場所に保存した 「the-thor-child-export-demo09.zip」ファイル の上で右クリックして「すべて展開」をクリックします。

好きな場所を選択して「展開」をクリックしてください。

④自分が選択した場所に「the-thor-child-export-demo09」という着せ替えのスタイルの情報が入ったフォルダができます。

その中にある「the-thor-child-export-demo09.dat」というファイルが、使用する着せ替えのスタイルの大事な情報ファイルとなります。

THE THOR（ザ・トール）デザイン着せ替えの前にバックアップ

色々カスタマイズしていくとスタイルが崩れていく場合がありますのでバックアップをおすすめします。

画面左側の刷毛マークの「外観」→「カスタマイズ」をクリックしてください。

①「エクスポート/インポート」をクリック　→　②「書き出し」をクリックしてください。
そら任意のフォルダを作って保存してください。
ファイル名は「the-thor-export.dat」となっています。

これでスタイルの着せ替えで上手く行かなかった場合でも元の状態に戻せるようになります(^^♪

③画像では「公開済み」ボタンになっていますが、「公開」ボタンが表示されていると思いますのでクリックしてください。

これでスタイルのエクスポートが完了しました。

THE THOR（ザ・トール）デザイン着せ替えをする

スタイルのバックアップが終わりましたので、着せ替えのスタイルに変更していきます。

①「エクスポート/インポート」をクリックしてください。

②「選択」ボタンをクリックして、「 THE THOR（ザ・トール）着せ替えのデザインのzipファイルを解凍 」の④で保存しておいた着せ替えのスタイルの大事な情報ファイルの「the-thor-child-export-demo09.dat」を選択します。

　THE THOR（ザ・トール）デモサイトのデザインで使用している画像も一緒に選択

③次に「画像ファイルをダウンロードしてインポートしますか？」にチェックを入れて、「インポート」ボタンをクリックしてください。

これで着せ替えのスタイルに変更が完了です！

THE THORで使用している画像を、海外の商用OKの無料画像のサイトで見つけた時は驚きました・・・(￣▽￣;)

エラー：その設定は現在のテーマ用ではありません

「設定のインポート中にエラーが発生しました。その設定は現在のテーマ用ではありません。」
インポートをしている時にこのエラーが表示された場合は、どのテーマが有効になっているか確認して下さい。
「THE THOR」の「子テーマ」が有効になっていない場合に、私はこのエラーが出ました。

エラー：カスタマイザーのエクスポートファイルを確認してください

「設定のインポート中にエラーが発生しました。アップロードしたカスタマイザーのエクスポートファイルを確認してください。」

このエラーは、デモサイト一覧からスタイルをダウンロード後、「 the-thor-child-export-demo09.zip 」を解凍（展開）せずにエクスポートした場合に私はこのエラーが出ました。
このエラーが出た時は、アップロードしようとしたファイルが、解凍されたファイルである「 the-thor-child-export-demo09.dat 」を選択できているかを確認してみてください。

THE THOR(ザトール)着せ替えの特徴と設定♪着せ替え前と後　まとめ

デモサイトのスタイル。

どれに着せ替えにしようか迷いまいますよね。

この記事を書くにあたって、デモサイトの着せ替えを改めた見てみたら、やっぱりＷＥＢデザイナーさんが作っただけあって本格的だなぁと思いました。

設定をいじりすぎると、カッコよさが消えていく。

自分のサイトを改めて見て思いました(笑)