『THE THOR（ザ・トール）』にはデザイン着せ替え機能という素晴らしいサービスがあります。この機能を使えば、デモサイトのようなカッコイイデザインを、一瞬で自分のサイトに設定することができるのです。
しかし！
着せ替え機能を使って設定しただけでは、ただのデモサイトのままです。デザイン以外の項目を設定することで、自分のサイトとして公開することができます。
そこで、そこはちょっと放置したままじゃまずいよーっていう設定項目を抜き出しましたので、参考にしてみてください。着せ替えても、実はやることが多いんです。
今回は、Demo01についてお伝えします。（https://thor-demo01.fit-theme.com/）
Demo01は、ファッションをテーマにしたサイトイメージですね。メインビジュアルの動画がとても印象的です。
このデザインを設定するうえで、用意すべき画像は以下のとおりです。（W×H）内はDemo01で使用されている画像サイズです。（とりあえず用意の画像です。各機能を利用する予定がなければ不要です。）
・メインビジュアル用YouTube動画
・メインビジュアルを読み込む間の静止画像（1920×1280、.jpg）
・フッターCTA背景画像（1920×1152、.jpg）
・フッターアイキャッチ画像（1920×1280、.jpg）
・AMPロゴ画像（推奨サイズ：縦60×横600px以下）
・PWAアイコン用画像３種類（72×72、192×192、512×512、.png）
TOPページ（ヘッダー・メインビジュアル）
1.注目キーワード（検索機能）
デフォルトでは、検索キーワードの入力枠下に表示される注目キーワード「ファッション」「デザイン」「流行」が設定されています。これらの言葉は、「SEARCH」アイコンをクリックした時に表示される検索パネル内や、ウィジェットで設置した検索枠の下に表示されます。
変更は、基本設定 ＞ 検索機能設定 ＞注目キーワードを設定から行うことができます。
※非表示にしたい場合は、注目キーワード入力欄を空欄にすると表示されません。
2.サイトロゴ
画像も一緒にインポートしている場合は、「THE THOR DEMO01」という画像が設定されています。
ロゴの変更は、基本設定 ＞サイトロゴの設定 ＞ロゴ画像の設定から行うことができます。
画像が用意できていない場合は、設定されている画像を削除すれば、テキストでサイト名が表示されます。
Demo01で使われているサイトロゴのサイズは？
表示されているサイズは、高さ40px、幅200pxです。実際に使われている画像サイズは、高さ80px、幅400pxです。（ブラウザ：Chrome 全画面表示時）
高さが40pxに設定されているので、高さがそれ以上ある場合、縦横比を維持したまま縮小されるようです。
3.注目ボタン（メニューパネル内）
メニューアイコンをクリックすると、メニューパネルが表示されます。そのパネル内に注目ボタン表示されるようにDemo01では設定されています。
この設定は、共通エリア設定 ＞ ヘッダーエリア設定 ＞ サブメニュー設定から行うことができます。
設定すべき項目は・・・
注目ボタンのテキストを入力
「DOWNLOAD」と設定されています。
ボタンのリンク先URLを入力
ザ・トール公式サイトのURLが設定されています。
※注目ボタンを表示したくない場合は、文字とURLを消すと表示されません。
4.ヘッダーお知らせ
設定した文章が流れるお知らせヘッダー機能です。この機能の設定は、共通エリア設定 ＞ ヘッダーボトムエリア設定 ＞ ヘッダーお知らせの表示設定から行うことができます。
設定すべき項目・・・
お知らせとして表示する文章を入力
「ブロガー/アフィリエイター向けWPテーマ「THE THOR」の購入ページはこちら」という文章が設定されています。
リンク先URLの入力
ザ・トール公式サイトURLが設定されています。
5.メインビジュアル
デモサイト01では、魅力的な動画が設定されていますね。この動画には、YouTubeが使われています。変更は、TOPページ設定 ＞ メインビジュアル設定 ＞ YouTube背景動画の設定から行うことができます。
設定すべき項目は・・・
動画再生前に表示する画像を登録
画像もインポートした場合は、女性モデル二人が写った静止画像が設定されています。
YouTube動画IDを入力
女性モデルのYouTube動画URLが設定されています。変更する場合は、動画URLがhttps://www.youtube.com/watch?v=***********の場合、「***********」部分だけを入力します。
タイトルを入力
「THE THOR」と設定されています。
サブタイトルを入力
「結果へ導く次世代WordPressテーマ「ザ・トール」」と設定されています。
※タイトルとサブタイトルを入力している場合、YouTube動画の上に表示されます。
6.メインビジュアル下注目エリア
メインビジュアル下注目エリアは、メインビジュアルを「表示」に設定している場合にのみ使うことができる機能です。設定は、TOPページ設定 ＞ メインビジュアル下お知らせ設定から行うことができます。
設定すべき項目は・・・
キャッチコピーを入力
「SEOに最適化し、超高速表示を実現した国内トップクラスのブロガー/アフィリエイター向けWPテーマ」と設定されています。
ボタンのテキストとリンク先URL
「DOWNLOAD」のテキストとザ・トール公式サイトURLが設定されています。
TOPページ（メインエリア）
ピックアップ記事や、アーカイブ記事などが表示されるエリアです。
ピックアップ3記事
ピックアップ表示したい記事IDとして、1番目から3番目までの入力欄に「１」が設定されています。そのため、１～３まで同じ記事が表示されます。ID「１」の記事が、自分のWordPress内になければ、No Imageと表示されます。（『THE THOR』ではNo Imageを任意の画像に設定することができます。）
設定を変更するには、TOPページ設定 ＞ピックアップ3記事設定から行うことができます。
設定すべき項目は・・・
記事IDを入力
1～3番目の記事ＩＤが設定されています。自分の投稿記事ＩＤを指定しましょう。空欄にすると、最新記事が表示されます。
コントローラー
アーカイブページには、コントローラーという機能が装備されています。サイト訪問者がアーカイブのデザインや、記事の並び順などを変更することができます。
設定は、アーカイブ設定 ＞ コントローラー設定から行うことができます。
設定すべき項目・・・
表示するカテゴリＩＤを入力
カテゴリＩＤに「１」が設定されてます。
レイアウト切り替えボタンの設定
上の画像がレイアウト切り替えボタンです。このボタンを押すことでアーカイブ記事の表示を訪問者が変更することができます。しかし、この設定を「表示」にしておくと、アーカイブページにインサート広告が表示されません。広告を表示したい場合は、「非表示」にしておく必要があります。
TOPページ（フッターエリア）
Demo01では、フッターエリアにCTAが設置されています。しかし、自サイトのものではなく、『THE THOR』の案内が表示されているので、変更する必要があります。
1.フッターCTA
設定は、共通エリア設定 ＞ フッタートップエリア設定［CTA］ ＞ CTAの表示設定から行うことができます。
CTAはすぐに必要ないという方は、「フッターCTAを表示するか選択」を非表示にしておけば、他の項目が入力されていても表示されません。
設定すべき項目・・・
見出しを入力
最強のWordPressテーマ「THE THOR」」と設定されています。
本文を入力
「本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております！ 日本国内のテーマでナンバー1を目指しております。どうか皆様のお力をお貸しください。よろしくおねがいいたします。」と設定されています。
アイキャッチ画像を登録
画像もインポートした場合は、アイキャッチに表示される画像が設定されています。
ボタンテキスト・リンク先URLを入力
ボタンテキストを入力に「THEME DOWNLOAD」、ボタンリンク先URLにザ・トール公式サイトURLが設定されています。
2.コピーライト設定
『LION MEDIA』や『LION BLOG』でも、テーマの制作会社名やWordPressという表示を消すことができました。ザ・トールにも同じ機能が備わっています。（急ぐ必要ではないので、後回しでもOKです。）
設定は、共通エリア設定 ＞ フッターエリア設定 ＞ コピーライトの設定から行うことができます。
「非表示」にすれば消すことができます。
スマホ用固定フッター
スマホでサイトが表示されたときに、固定フッターが表示されるように設定されています。設定の変更は、共通エリア設定 ＞ 固定フッターエリア設定［スマホ用］から行うことができます。
設定すべき項目・・・
項目２の設定
すべてのシェアボタン（Facebook、Twitter、Google+、はてぶ、Pocket、LINE、Linkedln、Pinterest）が表示されるよう設定されています。不要なものがあればチェックを外しておきましょう。
項目4の設定
電話番号が表示されるように設定されています。「電話番号を入力」欄にもダミーの番号（080-0000-0000）が登録されています。
スマホ用固定フッターの表示が不要であれば、「スマホ用固定フッター表示するか選択」を非表示にしておきましょう。
不要な項目のみ表示しないのであれば、各項目の「表示する項目を選択」で自由選択リンクボタンを選び、リンクボタン欄を空欄にしておくと表示されません。
投稿ページ
シェアボタンの設定、フォローボタンの設定、記事下CTAの設定が必要です。
シェアボタンの表示設定
設定の変更は、投稿ページ設定 ＞ シェアボタン設定 ＞ シェアボタンの表示／非表示から行います。
先程のスマホ用固定フッターのシェアボタン設定と同じように、すべての項目にチェックが入っています。不要なものは、チェックを外しましょう。
フォローボタン設定
設定の変更は、投稿ページ設定 ＞ フォローボタン設定 ＞ フォローボタンの表示／非表示から行います。
不要な場合は「表示しない」に設定しましょう。
記事下CTA設定
設定の変更は、投稿ページ設定 ＞ 記事下CTA設定から行います。
記事下CTAは、ダッシュボード ＞ CTA管理でコンテンツを作成してからでないと使えません。作成するまでは「表示しない」にしておいてもいいでしょう。
CTAコンテンツを表示させる場合は、「デフォルトCTAコンテンツ設定」にCTAのＩＤを入力します。（デフォルトでは「１」と設定されています。
きちんと設定をすると、Demoサイトのような表示になります。
SNS設定
SNSフォローアイコンの表示設定をしていても、きちんと自分のURLを設定しておかないと意味がありませんよね。
Follow設定
URLの設定は、SNS設定 ＞ Follow設定から行います。
設定できるSNSは、Facebook、Instagram、Twitter、Google+、YouTubeチャンネル、Linkedln、Pinterest、RSSです。項目ごとに、URLの入力欄とHeader・Footerの表示設定があります。
RSS以外の全てのURL欄に「examples」が設定されていますので、変更をしておきましょう。また同じように、全てのSNSにおいて、「Header、Footerでフォローアイコンを表示する」にチェックが入っていますので、不要なものはチェックを外しましょう。（ここでいうHeader、Footerは、TOPページの表示を指しています。）
FacebookのユーザーID
設定は、SNS設定 ＞ OGP設定から行います。
OGP画像は、デモ画像がセットされていないので、後から設定してもOKですが、FacebookのAPPIDには、デモIDが登録されています。APPIDを持っていない場合は、削除しておきましょう。（現在は仮IDは設定されておらず、空欄になっています。）
ユーザーIDを持っている方は、FacebookのユーザーID欄で設定をします。
FacebookのApp ID（アプリID）は、OGPの設定やFacebook用のアプリを作成する時に必要なIDです。
PWA機能
PWA機能設定では、アイコン下テキストとアイコン画像の設定が必要です。
そもそもPWAってなぁに？
PWAとは「Progressive Web Apps」の略です。
モバイル向けのサイトを、スマートフォンのアプリのように使える仕組みのことです。PWAを実装することで、プッシュ通知やホーム画面へアイコンを追加したりすることができ、アプリのような機能をWebサイトに持たせることができるのです。
（参考サイト：SEO HACKS https://www.seohacks.net/basic/terms/pwa/）
アイコン下テキスト
設定は、PWA設定 ＞ PWA機能設定から行います。
ホーム画面のアイコン下テキストを入力に「THE THOR」と設定されていますので、変更の必要があります。
PWAアイコンの設定
設定は、PWA設定 ＞ PWAアイコン設定から行います。
３サイズの画像の用意が必要です。
・72×72
・192×192
・512×512
以上で、Demo01の「とりあえずココだけ設定！」は終わりです。
着せ替えが終わっても、いろいろとやることがありましたね。使い方もわからない状態で探すのって、本当に大変だったので、記事にしてみました。
とりあえず、これさえ読めばサイトの公開まで持っていくことができます。公開さえできれば、サイトのテーマカラーや、各パーツのカラー設定、デザインの細かな設定などは、じっくりと考えながら行うことができるかと思います。みなさん、頑張ってみてください。
最後までお付き合いありがとうございました。お疲れさまです。