『THE THOR（ザ・トール）』にはデザイン着せ替え機能という素晴らしいサービスがあります。この機能を使えば、デモサイトのようなカッコイイデザインを、一瞬で自分のサイトに設定することができるのです。
しかし！
着せ替え機能を使って設定しただけでは、ただのデモサイトのままです。デザイン以外の項目を設定することで、自分のサイトとして公開することができます。
そこで、そこはちょっと放置したままじゃまずいよーっていう設定項目を抜き出しましたので、参考にしてみてください。着せ替えても、実はやることが多いんです。
今回は、デモサイト02についてお伝えします。（https://thor-demo02.fit-theme.com/）
デモサイト02は、メインに静止画像が使われ落ち着いた雰囲気です。サイドカラムがなく、アーカイブ記事が3カラム表示になっているのが特徴的ですね。無駄を取り除いたシンプルなサイトです。
このデザインを設定するうえで、とりあえず用意すべき画像（差し替えが必要な画像）は以下のとおりです。（W×H）内はデモサイト02で使用されている画像サイズです。（とりあえず用意の画像です。各機能を利用する予定がなければ不要です。）
・AMPロゴ画像（375×60、.png：推奨サイズ600×60以下）
・PWAアイコン用画像３種類（75×75、192×192、512×512、.png）
TOPページ（タイトル）
ここは重要！ですよね。自分のサイトタイトルですもん。放置できません！
デモサイト02では、トップページタイトルが「My WordPress Blog│THE THOR」と設定されています。放置するとこのまま表示されます。まずい、まずい・・・。
変更は、SEO設定 ＞ TOPページ設定 ＞ TOPページの＜title＞から行うことができます。
TOPページ（ヘッダー・メインビジュアル）
1.注目キーワード（検索機能）
デフォルトでは、注目キーワードに「デザイン」「表示速度」「SEO」「AMP」「PWA」が設定されています。これらの言葉は、「SEARCH」アイコンをクリックした時に表示される検索パネル内や、ウィジェットで設置した検索枠の下、ヘッダーボトム（サイトロゴの下）エリアに検索窓を設置した場合に表示されます。
変更は、基本設定 ＞ 検索機能設定 ＞注目キーワードを設定から行うことができます。
※検索パネル内、ウィジェットの検索窓下に表示される注目キーワードを非表示にしたい場合は、注目キーワード欄を空欄にすれば表示されません。
※ヘッダーボトムの注目キーワード表示を非表示にしたい場合は、共通エリア設定 ＞ ヘッダーボトムエリア設定［検索窓・お知らせ］ ＞ ヘッダー検索窓の表示設定にある「注目キーワードを表示するか選択」を非表示にする必要があります。
この部分のことです
2.サイトロゴ
画像も一緒にインポートしている場合は、「THE THOR DEMO02」という画像が設定されています。
ロゴの変更は、基本設定 ＞サイトロゴの設定 ＞ロゴ画像の設定から行うことができます。
画像が用意できていない場合は、設定されている画像を削除すれば、テキストでサイト名が表示されます。
デモサイト02で使われているサイトロゴのサイズは？
表示されているサイズは、高さ40px、幅205pxです。実際に使われている画像サイズは、高さ80px、幅410pxです。（ブラウザ：Chrome 全画面表示時）
高さが40pxに設定されているので、高さがそれ以上ある場合、縦横比を維持したまま縮小されるようです。
3.メインビジュアル
画像の変更は、TOPページ設定 ＞ メインビジュアル設定 ＞ 静止画時の設定から行うことができます。
ちなみにデモサイト02で表示されているメイン画像上の文字（THE THOR by FIT-Web Create.）は、画像上に加工されています。後乗せではありません。
後乗せにしたい場合は、静止画時の設定にあるタイトル、サブタイトルを入力欄を設定すると、画像中央に文字を表示することができます。
TOPページ（フッターエリア）
2.コピーライト設定
『LION MEDIA』や『LION BLOG』でも、テーマの制作会社名やWordPressという表示を消すことができました。ザ・トールにも同じ機能が備わっています。（急ぐ必要ではないので、後回しでもOKです。）
設定は、共通エリア設定 ＞ フッターエリア設定 ＞ コピーライトの設定から行うことができます。
「非表示」にすれば消すことができますよ。
投稿ページ
シェアボタンの設定、記事下CTAの設定が必要です。
シェアボタンの表示設定
設定の変更は、投稿ページ設定 ＞ シェアボタン設定 ＞ シェアボタンの表示／非表示から行います。
デモサイト02では、Facebook、Twitter、Google+、はてぶ、LINEの５つを「表示する」にチェックが入っています。必要の有無を確認しましょう。
記事下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の表示設定があります。
すべてのSNSにおいて、「Headerでフォローアイコンを表示する」にチェックが入っています。また、Facebook、Twitter、YouTubeチャンネルのURL欄には、Demo用URLが設定されていますので、変更をしておきましょう。
ここでいうHeader、Footerは、TOPページの表示を指しています。
FacebookのAPPID
設定は、SNS設定 ＞ OGP設定から行います。
OGP画像は、デモ画像がセットされていないので、後から設定してもOKですが、FacebookのAPPIDには、デモIDが登録されています。APPIDを持っていない場合は、削除しておきましょう。
ユーザーIDを持っている方は、FacebookのユーザーID欄で設定をします。
FacebookのApp ID（アプリID）は、OGPの設定やFacebook用のアプリを作成する時に必要なIDです。
AMP設定
デモサイト02では、AMP機能が有効になっているため、AMP用のロゴ画像を設定する必要があります。設定は、AMP設定 ＞ AMPロゴの設定から行います。（機能は有効になっていますが、デモサイト用AMPロゴは設定されていないので空欄になっています。）
これはデモサイト01の例です
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アイコン設定から行います。
下の画像は、デモサイト01で着せ替えたときにセットされていたものです。デモサイト02では、PWA機能が有効になっているものの、アイコンはセットされていませんでした。
３サイズの画像の用意が必要です。
・72×72
・192×192
・512×512
その他
機能が有効になっていないものの、カスタマイザー上ではデモ用の設定がされている項目をピックアップしました。
注目ボタン（メニューパネル内）
デモサイト02では、メニューパネルを表示するボタンが非表示設定になっています。
しかし、カスタマイザー上ではTHOR公式サイトのURLが設定されています。
削除したい場合は、共通エリア設定 ＞ ヘッダーエリア設定 ＞ サブメニュー設定から行うことができます。
ヘッダーお知らせ
設定した文章が流れるお知らせヘッダー機能です。デモサイト02では非表示設定になっていますが、文章とURLが設定されています。
削除したい場合は、共通エリア設定 ＞ ヘッダーボトムエリア設定 ＞ ヘッダーお知らせの表示設定から行うことができます。
以上で、デモサイト02の「とりあえずココだけ設定！」は終わりです。
デモサイト01より、設定すべき項目が少なめです。シンプルなサイトになっているので、必要なものを後から追加するといい感じに仕上がるのではないかと思います。
着せ替え作業が終わっても、いろいろとやるべきことがありますよね。そして、使い方もわからない状態で設定箇所を探すのって、本当に大変だったので、記事にしてみました。
とりあえず、これさえ読めばサイトの公開まで持っていくことができます。公開さえできれば、サイトのテーマカラーや、各パーツのカラー設定、デザインの細かな設定などは、じっくりと考えながら行うことができるかと思います。
最後までお付き合いありがとうございました。お疲れさまです。