THE THOR(ザ・トール)デモサイトの着せ替え前と後を詳しく紹介♪

THE THOR(ザ・トール)のデモサイトの着せ替えについて まとめました。

着せ替えパターンそれぞれの特徴が知りたい
wordpressの知識ゼロでも着せ替えは簡単にできるの?

こういった疑問にそらが、体験談をまじえて答えたいと思います。

 本記事の内容

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

THE THOR(ザ・トール)のテーマの構成の紹介と、着せ替えの特徴を紹介します♪

それぞれのパターンで着せ替えすると、どう変わるかを比較してみました(^^♪

THE THOR(ザ・トール)デモサイト着せ替えパターンそれぞれの特徴

THE THORデモサイト一覧

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

インストールすると表示されるデザインは「01」です。

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

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

こんな感じにしたいな・・と思った時。

自分で設定を探すのは時間がかかります。

着せ替えしてしまえば、大まかな設定が完了です(^^♪

パーツの表示/非表示など自分で変更できますので、自分の好みに設定していきます。

THE THOR(ザ・トール)の構成

THE THORの構成を紹介します。
THE THORのエリア構成

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

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

ヘッダーボトムエリア

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

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

カラムの話

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

3カラムのレイアウト

THE THOR3カラムのレイアウト紹介

2カラムのレイアウト

THE THOR2カラムのレイアウト紹介

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

THE THOR(ザトール)デモサイト01の紹介

デモサイト01のTOPページ

 

THE THORデモサイト01

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

デモサイト01に着せ替えてみた

THE THORデモサイト01着せ替え後

デモサイト01の特徴

購入すると同時にインストールしてあるのは、このデモサイトになります。

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

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

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

THE THOR(ザトール)デモサイト02の紹介

デモサイト02のTOPページ

THE THORデモサイト02

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

デモサイト02に着せ替えてみた

THE THORデモサイト02着せ替え後

デモサイト02の特徴

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

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

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

THE THOR(ザトール)デモサイト03の紹介

デモサイト03のTOPページ

THE THORデモサイト03

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

デモサイト03に着せ替えてみた

THE THORデモサイト03着せ替え後

デモサイト03の特徴

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

THE THOR(ザトール)デモサイト04の紹介

デモサイト04のTOPページ

THE THORデモサイト04

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

デモサイト04に着せ替えてみた

THE THORデモサイト04着せ替え後

デモサイト04の特徴

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

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

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

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

THE THOR(ザトール)デモサイト05の紹介

デモサイト05のTOPページ

THE THORデモサイト05

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

デモサイト05に着せ替えてみた

THE THORデモサイト05着せ替え後

デモサイト05の特徴

ヘッダーエリア 固定しない
ヘッダーボトムエリア
「検索キーワード」
 

表示

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

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

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

THE THOR(ザトール)デモサイト06の紹介

デモサイト06のTOPページ

THE THORデモサイト06

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

デモサイト06に着せ替えてみた

THE THORデモサイト06着せ替え後

デモサイト06の特徴

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

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

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

THE THOR(ザトール)デモサイト07の紹介

デモサイト07のTOPページ

THE THORデモサイト07

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

デモサイト07に着せ替えてみた

THE THORデモサイト07着せ替え後

デモサイト07の特徴

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

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

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

THE THOR(ザトール)デモサイト08の紹介

デモサイト08のTOPページ

THE THORデモサイト08

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

デモサイト08に着せ替えてみた

THE THORデモサイト08着せ替え後

デモサイト08の特徴

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

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

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

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

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

THE THOR(ザトール)デモサイト09の紹介

デモサイト09のTOPページ

THE THORデモサイト09

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

デモサイト09に着せ替えてみた

THE THORデモサイト09着せ替え後

デモサイト09の特徴

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

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

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

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

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

THE THOR(ザ・トール)着せ替えの手順

デモサイトの「スタイルダウンロード」をクリックすると、圧縮ファイルがダウンロードされます。

任意のフォルダーに解凍して使用します。

着せ替えの詳しい手順は下の記事で紹介してます♪

>>プラグイン【ザ・トール】デザインの着せ替え&バックアップの説明♪

THE THOR(ザ・トール)着せ替えをする時の注意点

THE THOR(ザ・トール)のデータが上書きされることを考えて、データはバックアップを取ってから着せ替えをする。

もしバックアップから復旧までをしたことがなければ、1度バックアップから復旧までのテストをしてみることをオススメします。

THE THOR(ザ・トール)の会員IDや、Googleアナリティクスのトラッキングコード等をメモを取る。

これらの対策をしておくことをオススメします。

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

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

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

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

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

しかも今では検索サイトで検索すれば、色々なサイトが説明をしてくれています。

それでもわからないことがあれば、会員フォーラムに投稿して聞くこともできます。

THE THOR(ザ・トール)のデモサイトの着せ替えを詳しく紹介♪まとめ

私はデモサイトの「09」に着せ替えをして使用しています。

設定を変更すればTOPページの記事レイアウトで、画像は表示されます。

デモサイトのどの着せ替えにしようか迷いまいますよね。

 

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

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

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

 

THE THOR(ザ・トール)の購入手順はこちらに紹介しています♪

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

/そらのまなびぶろぐ/

 

最新情報をチェックしよう!