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

THE THOR(ザ・トール)の9個ある着せ替えスタイルを詳しく紹介しています。

THE THOR(ザ・トール)の着せ替えってどうなんだろうって考えますよね?

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

こういった疑問にTHE THOR(ザ・トール)を1年間使った体験談をまじえて答えたいと思います。

 本記事の内容

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

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

THE THOR(ザ・トール)を親テーマ、子テーマとインストールした後、スタイルを選んで着せ替えをしましょう!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ヘッダーボトムエリア

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

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

ブログのカラムの話

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

3カラムのレイアウト

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

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

2カラムのレイアウト

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

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

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

1カラムのレイアウト

ここは画像を省きました(;^_^A

私のトップページが1カラムになります。

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

THE THOR(ザ・トール)デモサイト着せ替えパターンおすすめ♪

おすすめするなら、画像をあまり使用していない「07」か「09」でしょうか。

画像多用している着せ替えのパターンは、表示速度が遅くなるのであまりお勧めしません。

画像が多いと見た目はいいのですが、画像が多い為に表示速度が遅くなります。

表示速度が遅いと、検索順位にかかわってきます。

使う画像は、ファイルサイズをなるべく小さく。

そして、表示させるサイズの画像ファイルを準備することをおすすめします。

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

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

 

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

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

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

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

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

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

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

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

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

THE THOR(ザトール)着せ替えスタイル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(ザ・トール)公式ページははこちら

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

THE THOR(ザトール)着せ替えスタイル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(ザ・トール)公式ページははこちら

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プラグイン「Customizer Export/Import」をインストールして有効化してください。

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

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

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

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

THE THOR(ザ・トール)デモサイトからのスタイル着せ替えの注意点

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

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

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

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

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

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

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

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

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

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

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

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

デモサイトのスタイル。

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

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

 

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

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

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

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪
 ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪ 人気ブログランキング

私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。

もしもからの申請も保険と思ってしておきましょう♪

物販ならアソシエイトに応募と同時に(保険として)もしもからも申請することをお勧めします♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。

ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

A8.netにとうろくして、無料の初心者用のアフィリエイトブログ作成の無料セミナーの参加をオススメします!

/ブログを装飾/初心者向けTHE THOR初期設定/便利なサイト&ツール/

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

そら

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

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


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