『THE THOR（ザ・トール）』にはデザイン着せ替え機能という素晴らしいサービスがあります。この機能を使えば、デモサイトのようなカッコイイデザインを、一瞬で自分のサイトに設定することができるのです。
しかし！
着せ替え機能を使って設定しただけでは、ただのデモサイトのままです。デザイン以外の項目を設定することで、自分のサイトとして公開することができます。
そこで、そこはちょっと放置したままじゃまずいよーっていう設定項目を抜き出しましたので、参考にしてみてください。着せ替えても、実はやることが多いんです。
今回は、デモサイト04についてお伝えします。（https://thor-demo04.fit-theme.com/）
デモサイト04は、アーカイブ記事やカテゴリー別最新記事などのアイキャッチが、正方形で表示されるのが特徴的です。
このデザインを設定するうえで、用意すべき画像は以下のとおりです。（W×H）内はDemo01で使用されている画像サイズです。（とりあえず用意の画像です。各機能を利用する予定がなければ不要です。）
・メインビジュアル用静止画像（1920×918、.jpg）
・フッターCTA背景画像（1920×1152、.jpg）
・フッターアイキャッチ画像（1280×853、.jpg）
・AMPロゴ画像（375×60、.png：推奨サイズ600×60以下）
TOPページ（タイトル）
ここは重要！ですよね。自分のサイトタイトルですもん。放置できません！
デモサイト04では、トップページタイトルが「My WordPress Blog│THE THOR」と設定されています。放置するとこのまま表示されます。まずい、まずい・・・。
変更は、SEO設定 ＞ TOPページ設定 ＞ TOPページの＜title＞から行うことができます。
TOPページ（ヘッダー・メインビジュアル）
1.サイトロゴ
画像も一緒にインポートしている場合は、「THE THOR DEMO04」という画像が設定されています。
ロゴの変更は、基本設定 ＞サイトロゴの設定 ＞ロゴ画像の設定から行うことができます。
画像が用意できていない場合は、設定されている画像を削除すれば、テキストでサイト名が表示されます。
3.注目ボタン（SNSアイコン左）
デモサイト03では、SNSアイコンの左側に示されているのが注目ボタンです。
この変更は、共通エリア設定 ＞ ヘッダーエリア設定 ＞ サブメニュー設定から行うことができます。
設定すべき項目は・・・
注目ボタンのテキストを入力
「テーマをダウンロード」と設定されています。
ボタンのリンク先URLを入力
ザ・トール公式サイトのURLが設定されています。
※注目ボタンを表示したくない場合は、文字とURLを消すと表示されません。
3.メインビジュアル
デモサイト04では、静止画像が設定されています。変更は、TOPページ設定 ＞ メインビジュアル設定 ＞ 静止画時の設定から行うことができます。
設定すべき項目は・・・
画像を登録
画像も一緒にインポートした場合は、デモサイト用の画像が登録されています。
タイトルを入力
「＜img src=”https://thor-demo04.fit-theme.com/wp-content/uploads/2018/09/big_logo.png” alt=”IMAGE”＞」と画像のURLが設定されています。
タグを入力することで、メインビジュアルの上にロゴ画像を表示することができます。
サブタイトルを入力
「結果へ導く次世代WordPressテーマ「ザ・トール」」と設定されています。
※タイトルとサブタイトルを入力している場合、画像の上に表示されます。
TOPページ（フッターエリア）
デモサイト04では、フッターエリアにCTAが設置されています。しかし、自サイトのものではなく、『THE THOR』の案内が表示されているので、変更する必要があります。
1.フッターCTA
設定は、共通エリア設定 ＞ フッタートップエリア設定［CTA］ ＞ CTAの表示設定から行うことができます。
CTAはすぐに必要ないという方は、「フッターCTAを表示するか選択」を非表示にしておけば、他の項目が入力されていても表示されません。
設定すべき項目・・・
見出しを入力
「最強のWordPressテーマ「THE THOR」」と設定されています。
本文を入力
「本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております！ 日本国内のテーマでナンバー1を目指しております。どうか皆様のお力をお貸しください。よろしくおねがいいたします。」と設定されています。
アイキャッチ画像を登録
画像もインポートした場合は、アイキャッチに表示される画像が設定されています。
ボタンテキスト・リンク先URLを入力
ボタンテキストを入力に「テーマをダウンロード」、ボタンリンク先URLにザ・トール公式サイトURLが設定されています。
2.コピーライト設定
『LION MEDIA』や『LION BLOG』でも、テーマの制作会社名やWordPressという表示を消すことができました。ザ・トールにも同じ機能が備わっています。（急ぐ必要ではないので、後回しでもOKです。）
設定は、共通エリア設定 ＞ フッターエリア設定 ＞ コピーライトの設定から行うことができます。
「非表示」にすれば消すことができます。
スマホ用固定フッター
スマホでサイトが表示されたときに、固定フッターが表示されるように設定されています。設定の変更は、共通エリア設定 ＞ 固定フッターエリア設定［スマホ用］から行うことができます。
設定すべき項目・・・
項目２の設定
シェアボタンが表示されるように設定されていますが、各項目（Facebook、Twitter、Google+、はてぶ、Pocket、LINE、Linkedln、Pinterest）にはチェックが入っていません。表示したい項目にチェックを入れましょう。
項目4の設定
電話番号が表示されるように設定されています。上の画像はデモサイト01のものですが、04でも同じように「電話番号を入力」欄に（03-0000-0000）が登録されています。
スマホ用固定フッターの表示が不要であれば、「スマホ用固定フッター表示するか選択」を非表示にしておきましょう。
不要な項目のみ表示しないのであれば、各項目の「表示する項目を選択」で自由選択リンクボタンを選び、リンクボタン欄を空欄にしておくと表示されません。
投稿ページ
シェアボタンの設定、フォローボタンの設定、記事下CTAの設定が必要です。
シェアボタンの表示設定
投稿ページの上下別に表示設定が行えます。設定の変更は、投稿ページ設定 ＞ シェアボタン設定 ＞ シェアボタンの表示／非表示からです。
デモサイト04では、Facebook、Twitter、Google+、はてぶを表示するようにチェックが入っています。
フォローボタン設定
設定の変更は、投稿ページ設定 ＞ フォローボタン設定 ＞ フォローボタンの表示／非表示から行います。
不要な場合は「表示しない」に設定しましょう。
記事下CTA設定
設定の変更は、投稿ページ設定 ＞ 記事下CTA設定から行います。
記事下CTAは、ダッシュボード ＞ CTA管理でコンテンツを作成してからでないと使えません。作成するまでは「表示しない」にしておいてもいいでしょう。
CTAコンテンツを表示させる場合は、「デフォルトCTAコンテンツ設定」にCTAのＩＤを入力します。（デフォルトでは175と設定されています。
きちんと設定をすると、デモサイトのような表示になります。
SNS設定
SNSフォローアイコンの表示設定をしていても、きちんと自分のURLを設定しておかないと意味がありませんよね。
Follow設定
URLの設定は、SNS設定 ＞ Follow設定から行います。
設定できるSNSは、Facebook、Instagram、Twitter、Google+、YouTubeチャンネル、Linkedln、Pinterest、RSSです。項目ごとに、URLの入力欄とHeader・Footerの表示設定があります。
デモサイト03では、FaceBook、Twitter、Google+においてURL欄にDemo-URLが設定されていますので、変更をしておきましょう。また同じように、上記３つとRSSの「Header、Footerでフォローアイコンを表示する」にチェックが入っていますので、不要なものはチェックを外しましょう。（ここでいうHeader、Footerは、TOPページの表示を指しています。）
AMP設定
デモサイト04では、AMPページを表示する設定になっています。AMPロゴ画像が必要になるので用意しましょう。設定は、AMP設定 ＞ AMPロゴの設定から行います。
デモサイト01での設定例
PWA機能
デモサイト04では、PWA機能は無効になっていますが、アイコン下テキストが設定されています。
そもそもPWAってなぁに？
PWAとは「Progressive Web Apps」の略です。
モバイル向けのサイトを、スマートフォンのアプリのように使える仕組みのことです。PWAを実装することで、プッシュ通知やホーム画面へアイコンを追加したりすることができ、アプリのような機能をWebサイトに持たせることができるのです。
（参考サイト：SEO HACKS https://www.seohacks.net/basic/terms/pwa/）
アイコン下テキスト
設定は、PWA設定 ＞ PWA機能設定から行います。
ホーム画面のアイコン下テキストを入力に「THE THOR」と設定されていますので、変更の必要があります。
以上で、デモサイト04の「とりあえずココだけ設定！」は終わりです。デモサイト01に比べると「とりあえずココだけ設定」は少なめでした。
着せ替えた後も、いろいろとやることはあります。使い方もわからない状態でカスタマイザー内を探すのって、本当に大変だったので、記事にしてみました。
とりあえず、これさえ読めばサイトの公開まで持っていくことができます。公開さえできれば、サイトのテーマカラーや、各パーツのカラー設定、デザインの細かな設定などは、じっくりと考えながら行うことができるかと思います。
最後までお付き合いありがとうございました。お疲れさまでした。