THE THORデザインの着せ替え紹介♪簡単にサイトを魅力的に!

THE THORは、デザイン性の高いカスタマイズが初心者でも簡単にできるWordPressテーマとして人気ですよね。

この記事では、THE THORのデザインを初めて着せ替えする方に向けて、THE THORのデザインスタイル9個それぞれのTOPページと記事ページ、そしてデモとして私が作成したサイトが着せ替えでどう見え方が変わるか(TOPページのみ)着せ替えについてをわかりやすく解説していきます。

 

 
sora
デザインの着せ替えは5分もかからず完了するくらい手軽にできます。

 

本記事の内容

  1. THE THOR着せ替えスタイルそれぞれの特徴
  2. THE THOR着せ替えの注意点
  3.  THE THOR着せ替えの手順紹介

 

 

THE THOR(ザトール)着せ替えの基本

 

 

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

引用元:「ザ・トール」のデモサイト一覧

 

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

 

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

 

 

 

 

THE THORの着せ替えどれにしようか迷いますよね。ここではでそれぞれのスタイルを画像たっぷりで紹介していきます。

適当に5記事作成してあるデモサイトを使用し、着せ替えでパッとどれだけ違いが出るかを眺めてみてください。

 

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

 

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

 

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

 

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

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

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

 

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

 

 

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

 

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

 

 

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

 

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

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

 

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

 

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

 

 

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

 

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

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

 

 

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

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

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

 

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

 

 

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

 

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

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

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

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

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

 

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

 

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

 

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

 

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

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

 

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

 

 

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

 

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

 

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

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

 

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

 

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

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

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

 

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

 

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

 

 

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

 

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

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

◆THE THOR(ザトール)着せ替えスタイル09のTOPページと記事ページ

 

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

 

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

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

 

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

 

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

 

 

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

 

着せ替え後に設定をカスタマイズしすぎると私のサイトのように見る影もなくなりますので、カスタマイズの際は注意してください。

 

又、THE THOR(ザ・トール)のデザインを着せ替えると、前着せ替え前に設定していた情報が上書きされますので、着せ替えの際はバックアップを取ることをお勧めします。

 

 

THE THORの購入からインストールまでの詳細な手順を紹介していますので、購入がまだの方はこちらの記事を参考にしてみてください。

>>>wordpress有料テーマ♪THE THORの購入とインストール手順

 

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

 

  1. THE THORにWordPressのプラグイン「Customizer Export/Import」を入れ有効化する。

     

  2. THE THORのデモサイトからスタイルをダウンロードしてくる

     

  3. ダウンロードしてきたファイルを任意の場所に解凍する。

     

  4. 3で解凍されたフォルダの中にあるファイルを「外観」→「カスタマイズ」→「エクスポート/インポート」で展開したデータをインポートする。


初めてブログをする初心者の方向けに着せ替えの手順を下の記事で丁寧に解説しています。

 

>>>THE THOR初心者向けデザインの簡単着せ替え設定手順♪

 

THE THORデザインの着せ替え紹介♪簡単にサイトを魅力的に! まとめ

 

デモサイトのスタイル。

 

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

 

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

 

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

 

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

 

最後まで読んでいただきありがとうございました。

 

追記

 

記事中にはリンクを紹介しましたが、着せ替えの詳しい手順は別ページに移動させました。