THE THOR（ザ・トール）デモサイトは設定しないと使えない。カスタム設定講座

 

こんなことになる前に、この記事を読んでおきましょう。

 

 

ですが、、、！

 

この「着せ替え機能」は、インストールしただけでは全く使えません！！

デザインは確かにかっこいいけど、そのまま使うと恥ずかしいブログになってしまいます。

 

今回は、ここまで設定しとけば、すぐに記事を書き始めても大丈夫！ってところまで解説しています。

画像を付けて解説しますので、サイトを見ながら参考にしてください。

 

デモサイトと同じにしたいなら、画像の用意が必要

Demo01はメインのYouTube動画が目を引く、インパクトのあるファッションをテーマにしたサイト構成です。

 

このデザインをあなたのブログで使う場合、以下のサイズの画像が必要になります。

（各機能を使う予定がなければ不要です。また、一時的に非表示にすることも可能ですので、まずは設定してしまいましょう。）

 

それではさっそく設定していきましょう。

 

TOPページ（タイトル変更）

まず最初にやるべきことは、あなたのサイトタイトルの変更です。

demoサイトをインストールする前に設定していても、インストールした時点で全てリセットされます。

 

この時点でトップページのタイトルは「My WordPress Blog | THE THOR」と設定されています。

「外観」⇒「カスタマイズ」⇒「SEO設定」⇒「TOPページ設定」⇒「トップページの＜title＞」から変更しましょう。

 

この先は常にカスタマイズから設定を変更します。

 

TOPページ（ヘッダー周辺）

 

①検索機能：注目キーワードを消去・変更設定

demo設定では、検索キーワードの枠下に表示されている注目キーワードが「ファッション」「デザイン」「流行」に設定されています。これらは、「SEARCH虫眼鏡アイコン」をクリックした時に表示されます。これらは、あとから追加した検索ウェジットなどにも表示されます。

 

変更は、「基本設定」⇒「検索機能設定」⇒「注目キーワード」から変更設定できます。

非表示にしたい場合は「ファッション」「デザイン」「流行」の文字を消すだけです。

 

②サイトロゴ変更設定

demo設定では「THE THOR DEMO1」の画像が設定されています。

 

 

ロゴ変更は、「基本設定」⇒「サイトロゴの設定」⇒「ロゴ画像の設定」から変更設定できます。

画像を用意していない場合は、上記画像を削除することで、テキストで、ブログ・サイト名が表示されます。

③メニューパネル内の注目ボタン変更・削除設定

メニューアイコンをクリックすると（メニューアイコンは左上の三本線です）、メニューパネルが開きます。そのパネル内に「DOWNLOAD」注目ボタンがあります。DEMO1設定ではクリックすると「THE THOR販売サイト」に飛ぶ設定です。

 

ボタン削除変更は、「共通エリア設定」⇒「ヘッダーエリア設定」⇒「サブメニュー設定」から変更・削除できます。

設定項目は下記画像の赤枠部分の変更・削除です。

 

注目ボタンは文字とURLを削除することで非表示になります。

 

④流れるヘッダーお知らせ設定

DEMO1設定では流れるヘッダーお知らせは、「THE THORの販売サイト」に飛びます。この機能の設定は「共通エリア設定」⇒「ヘッダーボトムエリア設定」⇒「ヘッダーお知らせ」から設定できます。

 

 

流れるヘッダーお知らせは表示・非表示で簡単に消すことができます。

流れるお知らせは、さりげなく読者に訴えかけることができるので、あなたのおススメするアフィリリンクを貼るのが効果的です。

 

DEMO1設定の文字とURLは忘れずに変更するか、削除しておきましょう。

 

⑤メインビジュアル（youtube背景動画）変更設定

DEMO1設定では、ステキなユーザーの目を引きつけるYouTube動画が使われています。プラグインなしでYouTube動画が埋め込めるところは「THE THOR（ザ・トール）」が秀逸です。

 

YouTube背景動画の変更は「TOPページ設定」⇒「メインビジュアル設定」⇒「YouTube背景動画」の設定から変更・削除できます。

 

 

⑥メインビジュアル下の注目エリア設定

メインビジュアル下の注目エリアは、メインビジュアルを「表示」に設定している場合に使うことができる機能です。設定は、「TOPページ設定」⇒「メインビジュアル下お知らせ設定」から設定できます。

 

このエリアも読者の目につくエリアですので、欲求をくすぐるキャッチコピーで読者の動線を作りましょう。

TOPページ（メインエリア）

ピックアップ記事や、アーカイブ記事などの設定エリアです。

ピックアップ3記事設定

ピックアップ3記事は読者に特にアピールしたい記事や、まとめ記事、ブログコンセプト、サイト紹介など、使い方は無限です。記事が増えてくれば記事ランキングとしても使えますし、商品のランキングとしても使えます。

DEMO1をインストールした状態では画像が無いっていないためNo Imageと表示されていますが、入れる画像によってもブログ・サイトのイメージはがらりと変わるでしょう。

 

 

ピックアップ3記事の設定変更・削除は「TOPページ設定」⇒「ピックアップ3記事設定」から設定しましょう。

 

ピックアップ3記事も表示・非表示でトップページから消すことができるので、今すぐ使わない・使えないなら非表示にしておくのがいいでしょう。

設定を残しておいた方が、次回使うときに直感的に使えるので。

 

投稿したい記事IDを最後の項目に記入するだけですぐ使えるので非常に便利です。他の設定も画面を見ながらすれば、問題ありません。（記事IDは画像では１です）

 

コントローラー設定

アーカイブページには、読者がブログ・サイトを自分が見やすいように設定できる「コントローラー」という機能があります。

アーカイブページとは、ある条件をもとに1つ以上の投稿を集めて表示するページのことです。 たとえば特定のカテゴリーに属する記事を集めたカテゴリーアーカイブや、ある月に投稿された記事を集めた日付アーカイブなどが該当します。

 

しかし、このコントローラー機能の「レイアウト切替ボタン」を使うとアーカイブページにアドセンスなどのインフィード広告が表示されません。アドセンスアフィリエイトをするなら致命的です。

 

インフィード広告を使わないのであれば関係ありませんが、必要がなければ「非表示」にした方がいいでしょう。

 

ちなみに私は使っていません。赤枠部分がコントローラーで右端が「レイアウト切替ボタン」です。

 

コントローラー設定は、「アーカイブ設定」⇒「コントローラ設定」から変更できます。

 

 

上記画像は私の設定です。

最近はコントローラー自体外そうかと思っています。

 

TOPページ（フッターエリア）

DEMO1設定ではフッターエリアにCTAが設置されています。

①フッターCTA設定

DEMO1設定ではこちらのCTAももちろん「THE THOR」の販売用CTAです。

設定は、「共通エリア設定」 ⇒ 「フッタートップエリア設定［CTA］」 ⇒「 CTAの表示設定」

 

CTAは今すぐ使わないなら先ほどと同じように「非表示」がおススメです。

 

1. フッターCTAを表示するか選択
2. 見出しを入力・本文を入力
3. アイキャッチ画像を登録
4. 背景画像を登録
5. もたんテキストを入力
6. ボタンリンク先URLを入力

 

 

②コピーライト設定

コピーライト部分にサイト名以外の会社名などが入っているとオリジナリティが無いので消しておきましょう・

コピーライト削除は「共通エリア設定 」⇒「フッターエリア設定」 ⇒「 コピーライトの設定」非表示にしましょう。

 

スマホ用固定フッター

続いてスマホ用のフッターの設定に移りましょう。

スマホでブログ・サイトが表示された時に表示される固定フッターには、いくつか使わない項目があります。

 

スマホ用固定フッターの設定は、「共通エリア設定 」⇒「 固定フッターエリア設定［スマホ用］」から設定します。

 

 

スマホの設定は最近需要が高く、Googleは2018年3月27日からモバイルファーストインデックスの導入を発表しています。

上記項目であなたが必要な項目を設定しましょう。スマホ用固定フッターも「非表示」にすることが可能です。

 

また、シェアボタンなども多すぎるとスマホでは読者がうんざりします。私の設定は３～4つです。

 

投稿ページ設定

投稿ページでは多すぎるシェアボタンの設定、フォローボタンの設定、記事下CTAの設定が必要です。

 

シェアボタンの表示設定

シェアボタンの設定変更は、「投稿ページ設定」 ⇒「 シェアボタン設定 」⇒「シェアボタンの表示／非表示設定」で設定します。

DEMO1設定ではすべてにチェックが入っています。画像は私の設定です。「Linkedln」は現在試験的にチェックを入れています。

 

フォローボタン設定

フォローボタンの設定はSNSを使ってアクセス流入するならあった方がいいです。

設定は、「投稿ページ設定 」⇒「フォローボタン設定 」⇒「フォローボタンの表示／非表示設定」で設定しましょう。

 

記事下CTA設定

記事下CTA設定は、コンテンツ（CTA)を作成してからじゃないと設定できません。

 

 

コンテンツは、「ダッシュボード」の「CTA管理」で「新規作成」で作成します。作成するまでは「非表示」に設定しておきましょう。

 

記事下CTA設定は「投稿ページ設定」 ⇒「記事下CTA設定」で設定します。

 

ちなみに下記画像がDEMO1設定でのCTAです。

 

DEMO1設定では細部に至るまで広告が貼られています。言い換えれば、今現在広告がある場所は広告を載せるのに適している場所ということです。

 

SNS設定

SNSはあなたの記事や情報を素早く伝えたり拡散するためのツールです。記事がバズったりするのもSNSが大きく関係しています。フォローアイコンを設置してもあなたのURLを入れておかなければ意味がありません。

 

Follow設定

設定できるSNSは全部で８つFacebook、Instagram、Twitter、Google+、YouTubeチャンネル、Linkedln、Pinterest、RSSの順番です。各項目にはURLの末尾の入力とHeader・Footerの表示設定があります。

 

Headerにチェックを入れるとDEMO1設定ではメニューパネルを開いた部分に表示されます。

 

Footerは先ほど解説した、この部分です。

 

Follow設定（URL設定）は「SNS設定」 ⇒「 Follow設定」から設定します。

 

RSS以外のすべてにDEMO1設定URLが設定されています。変更を忘れずに！

また、チェックマークもすべてに入っていますのであなたのブログ・サイトに合わせた表示設定に変えましょう。

 

FacebookのAPPID

FacebookのApp ID（アプリID）は、OGPの設定やFacebook用のアプリを作成する時に必要なIDです。

FacebookのApp ID（アプリID）はfacebook for developersでApp ID（アプリID）の取得が必要です。

設定は、「SNS設定 」⇒「OGP設定」から設定できます。

 

DEMO1設定ではFacebookのApp IDの部分に数字が記入してある場合があります。その場合は削除するか、自分のApp IDに書き換えましょう。

 

AMP設定

DEMO1設定ではAMP機能がオンの状態です。また、ここでは冒頭で解説したAMPロゴ画像が必要です。

 

 

設定は、「AMP設定 」⇒「AMPロゴの設定」から設定します。

DEMO1設定では画像が設定されていますので、画像を入れ替えておきましょう。

その他の設定は「AMP設定 」⇒「AMP機能設定」から設定します。

 

PWA設定

PWA機能設定ではアイコン画像とアイコン下テキストの入力が必要です。

PWAアイコンの設定

設定は、「PWA設定」⇒「PWAアイコン設定」から設定します。画像は3種類必要です。

それぞれの画像サイズは「72px×72px」「192px×192px」「512px×512px」です。

 

 

 

THE THOR（ザ・トール）初期設定

ここまでは、どちらかと言えばサイトデザインに関係した設定が多かったですが、最後に１番大事な初期設定が必要です。

一度設定した人ももう一度必要です（笑）

初期設定に必要なものは

• 更新用ユーザーID
• アナリティクス「トラッキングID」
• サーチコンソールの認証ID

が必要になります。

設定方法はTHE THOR（ザ・トール）やっておくべき５つの初期設定【図解説明】にて解説しています。

 

必ず設定しておきましょう。