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

THE THOR(ザ・トール)の9個ある着せ替えスタイルを詳しく紹介しています。
  • THE THOR(ザ・トール)の着せ替えパターンそれぞれの特徴が知りたい
  • wordpressの知識ゼロでも着せ替えは簡単にできるの?
  • THE THORの着せ替え方法は?

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

 本記事の内容

  1. THE THOR着せ替えパターンそれぞれの特徴
  2. THE THOR着せ替えのやり方まとめ
  3.  THE THOR着せ替えをする時の注意点

私の体験談の前にTHE THOR(ザ・トール)のテーマの構成の紹介と、着せ替えの手順と特徴を簡単に紹介します♪
THE THOR(ザ・トール)を親テーマ、子テーマとインストールした後、スタイルを選んで着せ替えします!
このインストールの方法などの詳しい手順は↓の記事で紹介していますので、興味がある方は参考にしてみてください。

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

簡単な記事を作成してデモサイトの9パターンで着せ替えすると、どう変わるかをスクショしてあります。
それぞれのスタイルの特徴と共に比べてみてみてください(^^♪

THE THOR(ザトール)着せ替えられるのは子テーマ「01」

THE THORデモサイトの着せ替えは9個あります

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

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

【THE THOR】の着せ替えで変わっていくのは「子テーマ」の設定です。

選択すれば着せ替えのスタイルに使っている画像もインストールできます

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

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

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

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

>>>THE THOR(ザ・トール)公式ページははこちら

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

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

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

着せ替えた後に、設定をいじっていけばデモサイトとは違う感じになっていきます(笑)

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

THE THOR(ザトール)の構成を紹介

THE THORのエリア構成は10個あります。

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

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

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

THE THOR(ザトール)ヘッダーボトムエリア

  • ヘッダー検索窓の表示設定
  • ヘッダーお知らせの表示設定

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

THE THOR(ザトール)ブログのカラムの話

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

3カラムのレイアウト

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

3カラムのレイアウトだとメインエリアが狭くなります。

2カラムのレイアウト

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

2カラムのレイアウトはメインエリアとサイドエリアがあるタイプです。

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

1カラムのレイアウト

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

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

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

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

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

着せ替えをした後に、自分の好みに設定を変えていく時間が短縮されます♪

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

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

THE THOR(ザ・トール)デモサイトのスタイル【01】の着せ替え

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

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

THE THOR(ザ・トール)デモサイトのスタイル【01】の着せ替え後

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

ヘッダーエリア固定しない
ヘッダーボトムエリア
「お知らせ」
表示
メインビジュアル下
注目エリア設定
表示
カルーセルスライダー表示
TOPページの記事レイアウトカードレイアウト
ピックアップ3記事表示
カラム2
記事ランキング表示
カテゴリ最新記事表示
フッタートップエリア表示

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

>>>THE THOR(ザ・トール)公式ページははこちら

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

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

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

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

THE THOR(ザ・トール)デモサイトのスタイル【02】の着せ替え

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

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

THE THOR(ザ・トール)デモサイトのスタイル【02】の着せ替え後

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

ヘッダーエリア固定しない
ヘッダーボトムエリア
「キーワード検索」
表示
メインビジュアル下
注目エリア設定
カルーセルスライダー
TOPページの記事レイアウトカードレイアウト
ピックアップ3記事
カラム1(TOPページのみ)
記事ランキング無
カテゴリ最新記事
フッタートップエリア

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

>>>THE THOR(ザ・トール)公式ページははこちら

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

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

THE THOR(ザ・トール)デモサイトのスタイル【03】の着せ替え

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

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

THE THOR(ザ・トール)デモサイトのスタイル【03】の着せ替え後

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

ヘッダーエリア固定しない
ヘッダーボトムエリア
「お知らせ」
メインビジュアル下
注目エリア設定
カルーセルスライダー
TOPページの記事レイアウトアイキャッチ画像の横に紹介文
ピックアップ3記事
カラム2
記事ランキング
カテゴリ最新記事
フッタートップエリア
>>>THE THOR(ザ・トール)公式ページははこちら

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

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

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

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

THE THOR(ザ・トール)デモサイトのスタイル【04】の着せ替え

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

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

THE THOR(ザ・トール)デモサイトのスタイル【04】の着せ替え後

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

ヘッダーエリア固定
ヘッダーボトムエリア
「お知らせ」
メインビジュアル下
注目エリア設定
カルーセルスライダー表示
TOPページの記事レイアウトアイキャッチ画像の横に紹介文
ピックアップ3記事
カラム2
記事ランキング
カテゴリ最新記事表示
フッタートップエリア表示

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

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

>>>THE THOR(ザ・トール)公式ページははこちら

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

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

THE THOR(ザ・トール)デモサイトのスタイル【05】の着せ替え

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

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

THE THOR(ザ・トール)デモサイトのスタイル【05】の着せ替え後

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

ヘッダーエリア固定しない
ヘッダーボトムエリア
「検索キーワード」
表示
メインビジュアル下
注目エリア設定
表示
カルーセルスライダー
TOPページの記事レイアウトカードレイアウト
ピックアップ3記事
カラム1(TOPページのみ)
記事ランキング
カテゴリ最新記事
フッタートップエリア

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

>>>THE THOR(ザ・トール)公式ページははこちら

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

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

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

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

THE THOR(ザ・トール)デモサイトのスタイル【06】の着せ替え

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

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

THE THOR(ザ・トール)デモサイトのスタイル【06】の着せ替え後

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

ヘッダーエリア固定しない
ヘッダーボトムエリア
「お知らせ」
表示
メインビジュアル下
注目エリア設定
カルーセルスライダー表示
TOPページの記事レイアウトアイキャッチ画像の下に紹介文
ピックアップ3記事
カラム2
記事ランキング
カテゴリ最新記事
フッタートップエリア表示

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

>>>THE THOR(ザ・トール)公式ページははこちら

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

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

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

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

THE THOR(ザ・トール)デモサイトのスタイル【07】の着せ替え

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

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

THE THOR(ザ・トール)デモサイトのスタイル【07】の着せ替え後

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

ヘッダーエリア固定しない
ヘッダーボトムエリア
「お知らせ」
メインビジュアル下
注目エリア設定
カルーセルスライダー
TOPページの記事レイアウト紹介文のみ(アイキャッチ画像非表示)
ピックアップ3記事
カラム2
記事ランキング表示(アイキャッチ画像非表示)
カテゴリ最新記事
フッタートップエリア

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

>>>THE THOR(ザ・トール)公式ページははこちら

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

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

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

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

THE THOR(ザ・トール)デモサイトのスタイル【08】の着せ替え

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

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

THE THOR(ザ・トール)デモサイトのスタイル【08】の着せ替え後

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

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

ヘッダーエリア固定
ヘッダーボトムエリア
「お知らせ」
メインビジュアル下
注目エリア設定
カルーセルスライダー
TOPページの記事レイアウト紹介文のみ(アイキャッチ画像非表示)
ピックアップ3記事
カラム2
記事ランキング
カテゴリ最新記事
フッタートップエリア

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

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

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

>>>THE THOR(ザ・トール)公式ページははこちら

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

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

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

THE THOR(ザ・トール)デモサイトのスタイル【09】の着せ替え

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

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

THE THOR(ザ・トール)デモサイトのスタイル【09】の着せ替え後

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

ヘッダーエリア固定しない
ヘッダーボトムエリア
「お知らせ」
メインビジュアル下
注目エリア設定
カルーセルスライダー
TOPページの記事レイアウト 紹介文のみ(アイキャッチ画像非表示)
ピックアップ3記事
カラム2
記事ランキング
カテゴリ最新記事
フッタートップエリア

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

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

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

>>>THE THOR(ザ・トール)公式ページははこちら

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

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

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

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

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

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

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(ザ・トール)着せ替えのデザインを選ぶ

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(ザ・トール)のスタイルのインポートの紹介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デモサイトのスタイル。

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

そらはCSSもPHPもいじりたくなるのです。

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

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

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

THE THOR(ザ・トール)の9個ある着せ替えスタイルを詳しく紹介しています。
最新情報をチェックしよう!
>

sora

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。