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

Name
あ~デモサイトをインストるする前に基本設定したのに、全部消えてる~まじだるい~

 

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

 

『THE THOR(ザ・トール)』は初心者でもすぐに記事を書き始められるよう、9つのデザインパターンが用意されています。

 

どれでも好きなパターンを選んで使うことでができる「着せ替え機能」は、あなたのブログ・サイトを一瞬で、お洒落でカッコイイデザインに変更できる優れたサービスです。

 

ですが、、、!

 

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

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

 

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

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

 


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

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

 

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

Demo01で使用されている画像(W×H)

  • サイトロゴ画像(400×80、.png)
  • メインビジュアル:YouTube動画
  • メインビジュアル:静止画像(1920×1280、.jpg)
  • フッターCTA背景画像(1920×1152、.jpg)
  • フッターアイキャッチ画像(1920×1280、.jpg)
  • AMPロゴ画像(375×60、.png:推奨600×60以下)
  • PWAアイコン画像3種類(75×75、192×192、512×512、.png)

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

 

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

 

TOPページ(タイトル変更)

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

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

 

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

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

 

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

 

TOPページ(ヘッダー周辺)

 

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

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

 

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

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

 

②サイトロゴ変更設定

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

 

 

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

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

DEMO1で表示されるサイズは「高さ40px幅200px」ですが、実際の画像サイズは高さ80px幅400px」です。多少大きくても縦横比を維持したまま縮小されます。

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

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

 

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

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

 

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

 

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

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

 

 

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

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

 

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

 

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

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

 

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

 

  • 動画再生前に表示する画像を登録
    ここに画像を設定すると、動画再生前に表示されます。
  • YouTube動画IDを入力
    「******」の部分を入力するだけで好きなYouTube動画を設置できます。
  • 動画のマスクを選択
    動画に色実をつけることで、動画に高級感が出ます。4種類の効果から選べます。
  • カラー系マスク利用時の色を指定
    カラー系の色を変更できます。
  • タイトルを入力
    入力した文字は動画脳rに表示されます、DEMO1設定では「THE THOR」です。
  • サブタイトルを入力
    タイトルの下に表示されます。
YouTube動画はインパクトはありますが、サイト表示スピードは落ちますので入れるときは注意しましょう。

 

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

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

 

  • キャッチコピーを入力
    「SEOに最適化し、超高速表示を実現した国内トップクラスのブロガー/アフィリエイター向けWPテーマ」
  • ボタンのテキストを入力
    「DOWNLOAD」
  • リンク先URLを入力
    「https;//fit-theme.com/the-thor」

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

TOPページ(メインエリア)

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

ピックアップ3記事設定

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

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

 

 

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

 

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

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

 

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

 

コントローラー設定

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

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

 

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

 

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

 

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

 

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

 

 

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

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

 

TOPページ(フッターエリア)

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

CTAとは”Call to action”の略で、日本語で求める行動です。具体的に「お問い合わせ」「購入」「無料レポート資料請求」「メルマガ登録」「お試しセット申し込み」「セミナー申し込み」など、こういったすべての行動を総称してCTAといいます。
言ってみれば、ピックアップ3記事がブログ・サイトの入り口なら、CTAはブログ・サイトの出口です。

①フッターCTA設定

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

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

 

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

 

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

 

このフッターCTAに書いてある本文

「本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております! 日本国内のテーマでナンバー1を目指しております。どうか皆様のお力をお貸しください。よろしくおねがいいたします。」
これは購入者に向けたメッセージでしょう。さらなる進化に期待しています。リスペクトもかねて記載しました。

 

②コピーライト設定

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

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

 

スマホ用固定フッター

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

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

 

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

 

 

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

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

 

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

 

モバイルファーストインデックスとは、検索順位を位置づける判断をモバイルサイトを基準にすること。今まではパソコンサイトの内容を元にコンテンツの質を評価していたのが、今後は、スマートフォンサイトを評価の軸にしてインデックスされるということです。これにより、今後スマホでユーザーが見やすい文字サイズや画像サイズ、レイアウトが求められます。

投稿ページ設定

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

 

シェアボタンの表示設定

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

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

 

フォローボタン設定

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

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

 

記事下CTA設定

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

 

CATは先ほどもお話しした、こちらがとってほしい行動に誘導する為のものです。記事を読み終わった人が最後に見るのが「記事下」です。ブログやサイトは「読者の行動」を意識して運営することが大切です。記事下CTAは出来ることなら早い段階で作っておきましょう。

 

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

 

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

 

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

 

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

 

SNS設定

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

 

Follow設定

設定できるSNSは全部で8つ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(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発された、モバイル端末でウェブページを高速表示するための機能です。スマホなどで検索していると雷マークがついているのがAMP対応記事です。AMPを実装するとモバイルページの読み込みが約4倍、データ量は約1/10になると言われています。

 

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

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

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

 

PWA設定

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

PWAとは「Progressive Web Apps」の略で。モバイル向けのサイトを、スマホアプリのように使える仕組みのことです。PWAを実装することでホーム画面にアイコンを追加したりプッシュ通知でお知らせしたりすることができます。サイトにアプリのような機能を持たせることをPWA機能といいます。

PWAアイコンの設定

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

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

 

 

 

THE THOR(ザ・トール)初期設定

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

一度設定した人ももう一度必要です(笑)

初期設定に必要なものは

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

が必要になります。

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

 

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