『THE THOR（ザ・トール）』にはデザイン着せ替え機能という初心者にも優しいサービスが提供されています。この機能を使えば、デモサイトのようなデザイン構成のサイトを、一瞬で設定することができるのです。
しかし！
着せ替えただけでは、まだ公開はできません。
なぜなら、サイト名が『THE THOR』になっていたり、URLが『THE THOR』の公式サイトになっていたりするので、オリジナルサイトとして公開するには厳しいのです。ポチッと押して、はい終わりではないのです。
『THE THOR』【デザイン着せ替え機能】の使い方と注意点
せっかくの便利な機能が提供されているので、初心者の方がここで挫折してしまわないように、デモサイトについて調査してみました。
今回は、アフィリエイターの方や、これから副業を始めようと思われている方が気になっているであろうデモサイト08について、解説していきたいと思います。（https://thor-demo08.fit-theme.com/）
『THE THOR（ザ・トール）』デザイン着せ替え機能の設定方法まとめ
デモサイト08の特徴
デモサイト08は、例として、ウォーターサーバーのランキングサイトに設定されています。デモサイトだとわかっていても、ウォーターサーバーのことが気になったのは私だけでしょうか？（笑）
私の話はさておき、このサイトの特徴は、ほとんどウィジェットの配置だけ！で構成されている。ということは、ウィジェットの設定をしないとこのようなサイトデザインにはなりません。
着せ替え直後のデモサイト08
着せ替え直後はこんな感じ。思っていたのとは全然違いますよね。
では、どのような設定になっているのか、見ていきましょう。
ヘッダー
ヘッダーには、【サイトロゴ】と【注目ボタン】が設定されています。
サイトロゴ
サイトロゴには、800×80px の png画像が使用されています。ロゴの変更は、基本設定[THE] ＞ サイトロゴの設定 ＞ ロゴ画像の設定 から行います。
注目ボタン
注目ボタンには「当サイトイチオシのウォーターサーバーは？」というテキスト表示されています。このテキストの変更は、共通エリア設定[THE] ＞ ヘッダーエリア設定 ＞ サブメニュー設定 ＞ ■注目ボタンのテキスト入力で行います。
サイドカラムエリア
サイドバーには、まずバナー広告が３つ設置されています。そして、様々な角度から検索できるようなウィジェットの配置になっています。
ウィジェットの見出し設定
デフォルトでは「角丸」に設定されているので、ボーダーラインの見出しにしたい場合は変更が必要です。
変更は、共通エリア設定[THE] ＞ サイドカラムエリア設定 ＞ ウィジェット見出しデザイン設定 で行います。見出しデザインで「ボトムボーダー」を選択すると同じデザインになります。（すぐにデザインが反映されない場合は、キャッシュが邪魔している可能性があるので一度クリアにしてみましょう）
バナー広告
バナー広告の配置には、『THE THOR』オリジナルの【[THE]スタイルテキスト】（投稿ページと同じスタイルが利用できるテキスト）ウィジェットが使われています。
投稿ページと同じスタイルとは、ビジュアルエディタに設定されているスタイルを利用できるということです。
ただ、ウィジェット編集時に投稿ページのようなビジュアルエディタは使用できないので、自分でタグを記述する必要があります。専門知識がない初心者の方には少々ハードルが高めかな。
デモサイトで指定されていたのは、スタイルボックス、センタリング、背景の色でした。（<div class=”ep-box es-center bgc-VPsky”>）
検索
検索窓は、WordPress標準装備の検索ウィジェットが使用されています。
宅配エリアから探す
ここは、【カテゴリー】ウィジェットが使用されています。ウォーターサーバーの会社が、宅配エリアによりカテゴリー分けされているということですね。
ウィジェットの設定
・タイトル：宅配エリアから探す
・投稿数を表示：チェックする
こだわりの条件から探す
ここでは、【タグクラウド】ウィジェットが使用されています。
ウィジェットの設定
・タイトル：こだわりの条件から探す
・タグの数を表示：チェックする
メインカラムエリア
メインカラムエリアの構成は、サイトイメージ画像、検索、ランキングとなっています。そして、他のサイトと大きく異なるのは、トップページに固定ページが設定されていることです。
トップページに固定ページを表示する設定は、カスタマイザーからでも行うことができます。
外観 ＞ カスタマイズ ＞ ホームページ設定
・「ホームーページの表示」で固定ページを選択。
・「ホームページ」で表示する固定ページを選択する。（表示する固定ページを作成していない場合は、プルダウン下の「+新規固定ページを追加」で空のページを作成しておきます。）
では、表示順に解説していきますね。
サイトイメージ画像
デモサイト08では、このメイン画像が使用されていますね。この画像は、固定ページで設定されているのではなく、さきほどサイドカラムにバナー広告を設置した【[THE]スタイルテキスト】が使われています。
ちなみに使われている画像は、758×240px の jpgです。
検索
メイン画像下の検索エリア。こちらは、【[THE]絞込検索】ウィジェットが使用されています。ウィジェットの設定は、タイトルに「ウォーターサーバー絞り込み検索」と入れるだけ。
「宅配エリア」「こだわりの条件」などのテキスト変更は、基本設定[THE] ＞ 検索機能設定 ＞ 検索項目見出し設定 で行えます。
ランキング
ランキングは、『THE THOR』に搭載されている【タグ管理】【タグランキング】機能を使って作られています。
【タグ管理】機能とは、その名のとおり、アフィリエイト広告用のタグを管理する機能です。タグを登録するとショートコードが発行されるので、投稿ページや固定ページにそのコードを貼り付けるだけで、広告を表示することができるのです。
手順は、
１．【タグ管理】で広告の詳細情報を登録
２．【タグランキング】でランキングを作成
３．固定ページにショートコードを貼り付ける
です。
バナー広告下に表示されている詳細項目の見出しやボタンカラーの変更は、
基本設定[THE] ＞ タグ管理設定 から行うことができます。
商品詳細ページ
商品の詳細ページは、投稿ページで作成されています。
『THE THOR』にはレビューボックスや、口コミボックスが搭載されているので、一からフォーマットを作る必要もなし。
ビジュアルエディタの【プリセットパーツ】から選び、テキストを入力するのみ。簡単です。
・見出し２＜お客様レビュー＞
・プリセットパーツ＜レビューボックス＞挿入
・見出し２＜話題の口コミ＞
・プリセットパーツ＜口コミボックス＞挿入
以上が、デモサイト08の設定内容です。
あとは、必要な情報を集め、記事を書いていけば、ちゃんとしたランキングサイトになりそうですね。
THE THOR（ザ・トール）
プラグインなしでSEOにも対応したWordPressのテーマです。初めての方でもサポート付きなので安心です。
「デザイン着せ替え機能」を使えば、気に入ったデモサイトのスタイルを、あなたのサイトにワンクリックでコピーできますよ。
お気に入りのスタイルをダウンロードして、「THE THOR ザ・トール」を始めてみませんか？
当サイトからご購入の方には特典付き！