THOR(ザ・トール)デモサイトは設定しないと使えない。THOR(ザ・トール)デモサイトは設定しないと使えない。THOR(ザ・トール)デモサイトは設定しないと使えない。2019.07.15Nameあ~デモサイトをインストるする前に基本設定したのに、全部消えてる~まじだるい~こんなことになる前に、この記事を読んでおきましょう。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サイトをインストールする前に設定していても、インストールした時点で全てリセットされます。THOR」と設定されています。「外観」⇒「カスタマイズ」⇒「SEO設定」⇒「TOPページ設定」⇒「トップページの<title>」から変更しましょう。この先は常にカスタマイズから設定を変更します。TOPページ(ヘッダー周辺)1検索機能:注目キーワードを消去・変更設定demo設定では、検索キーワードの枠下に表示されている注目キーワードが「ファッション」「デザイン」「流行」に設定されています。これらは、「SEARCH虫眼鏡アイコン」をクリックした時に表示されます。これらは、あとから追加した検索ウェジットなどにも表示されます。キーワード」から変更設定できます。非表示にしたい場合は「ファッション」「デザイン」「流行」の文字を消すだけです。DEMO1」の画像が設定されています。サイトロゴの設定」⇒「ロゴ画像の設定」から変更設定できます。画像を用意していない場合は、上記画像を削除することで、テキストで、ブログ・サイト名が表示されます。DEMO1で表示されるサイズは「高さ40px幅200px」ですが、実際の画像サイズは「高さ80px幅400px」です。多少大きくても縦横比を維持したまま縮小されます。3メニューパネル内の注目ボタン変更・削除設定メニューアイコンをクリックすると(メニューアイコンは左上の三本線です)、メニューパネルが開きます。そのパネル内に「DOWNLOAD」注目ボタンがあります。THOR販売サイト」に飛ぶ設定です。ボタン削除変更は、「共通エリア設定」⇒「ヘッダーエリア設定」⇒「サブメニュー設定」から変更・削除できます。設定項目は下記画像の赤枠部分の変更・削除です。注目ボタンは文字とURLを削除することで非表示になります。THORの販売サイト」に飛びます。この機能の設定は「共通エリア設定」⇒「ヘッダーボトムエリア設定」⇒「ヘッダーお知らせ」から設定できます。流れるヘッダーお知らせは表示・非表示で簡単に消すことができます。流れるお知らせは、さりげなく読者に訴えかけることができるので、あなたのおススメするアフィリリンクを貼るのが効果的です。DEMO1設定の文字とURLは忘れずに変更するか、削除しておきましょう。5メインビジュアル(youtube背景動画)変更設定DEMO1設定では、ステキなユーザーの目を引きつけるYouTube動画が使われています。THOR(ザ・トール)」が秀逸です。YouTube背景動画の変更は「TOPページ設定」⇒「メインビジュアル設定」⇒「YouTube背景動画」の設定から変更・削除できます。動画再生前に表示する画像を登録ここに画像を設定すると、動画再生前に表示されます。「******」の部分を入力するだけで好きなYouTube動画を設置できます。動画に色実をつけることで、動画に高級感が出ます。4種類の効果から選べます。カラー系マスク利用時の色を指定カラー系の色を変更できます。サブタイトルを入力タイトルの下に表示されます。YouTube動画はインパクトはありますが、サイト表示スピードは落ちますので入れるときは注意しましょう。6メインビジュアル下の注目エリア設定メインビジュアル下の注目エリアは、メインビジュアルを「表示」に設定している場合に使うことができる機能です。設定は、「TOPページ設定」⇒「メインビジュアル下お知らせ設定」から設定できます。「https;//fit-theme.com/the-thor」このエリアも読者の目につくエリアですので、欲求をくすぐるキャッチコピーで読者の動線を作りましょう。TOPページ(メインエリア)ピックアップ記事や、アーカイブ記事などの設定エリアです。ピックアップ3記事設定ピックアップ3記事は読者に特にアピールしたい記事や、まとめ記事、ブログコンセプト、サイト紹介など、使い方は無限です。記事が増えてくれば記事ランキングとしても使えますし、商品のランキングとしても使えます。Imageと表示されていますが、入れる画像によってもブログ・サイトのイメージはがらりと変わるでしょう。ピックアップ3記事の設定変更・削除は「TOPページ設定」⇒「ピックアップ3記事設定」から設定しましょう。ピックアップ3記事も表示・非表示でトップページから消すことができるので、今すぐ使わない・使えないなら非表示にしておくのがいいでしょう。設定を残しておいた方が、次回使うときに直感的に使えるので。投稿したい記事IDを最後の項目に記入するだけですぐ使えるので非常に便利です。他の設定も画面を見ながらすれば、問題ありません。(記事IDは画像では1です)コントローラー設定アーカイブページには、読者がブログ・サイトを自分が見やすいように設定できる「コントローラー」という機能があります。アーカイブページとは、ある条件をもとに1つ以上の投稿を集めて表示するページのことです。特定のカテゴリーに属する記事を集めたカテゴリーアーカイブや、ある月に投稿された記事を集めた日付アーカイブなどが該当します。このコントローラー機能の「レイアウト切替ボタン」を使うとアーカイブページにアドセンスなどのインフィード広告が表示されません。アドセンスアフィリエイトをするなら致命的です。インフィード広告を使わないのであれば関係ありませんが、必要がなければ「非表示」にした方がいいでしょう。ちなみに私は使っていません。赤枠部分がコントローラーで右端が「レイアウト切替ボタン」です。コントローラー設定は、「アーカイブ設定」⇒「コントローラ設定」から変更できます。上記画像は私の設定です。最近はコントローラー自体外そうかと思っています。TOPページ(フッターエリア)DEMO1設定ではフッターエリアにCTAが設置されています。action”の略で、日本語で求める行動です。具体的に「お問い合わせ」「購入」「無料レポート資料請求」「メルマガ登録」「お試しセット申し込み」「セミナー申し込み」など、こういったすべての行動を総称してCTAといいます。言ってみれば、ピックアップ3記事がブログ・サイトの入り口なら、CTAはブログ・サイトの出口です。THOR」の販売用CTAです。CTAの表示設定」CTAは今すぐ使わないなら先ほどと同じように「非表示」がおススメです。「本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。日本国内のテーマでナンバー1を目指しております。皆様のお力をお貸しください。」これは購入者に向けたメッセージでしょう。さらなる進化に期待しています。リスペクトもかねて記載しました。コピーライトの設定」非表示にしましょう。続いてスマホ用のフッターの設定に移りましょう。スマホでブログ・サイトが表示された時に表示される固定フッターには、いくつか使わない項目があります。固定フッターエリア設定[スマホ用]」から設定します。スマホの設定は最近需要が高く、Googleは2018年3月27日からモバイルファーストインデックスの導入を発表しています。上記項目であなたが必要な項目を設定しましょう。スマホ用固定フッターも「非表示」にすることが可能です。シェアボタンなども多すぎるとスマホでは読者がうんざりします。私の設定は3~4つです。モバイルファーストインデックスとは、検索順位を位置づける判断をモバイルサイトを基準にすること。今まではパソコンサイトの内容を元にコンテンツの質を評価していたのが、今後は、スマートフォンサイトを評価の軸にしてインデックスされるということです。これにより、今後スマホでユーザーが見やすい文字サイズや画像サイズ、レイアウトが求められます。投稿ページでは多すぎるシェアボタンの設定、フォローボタンの設定、記事下CTAの設定が必要です。」⇒「シェアボタンの表示/非表示設定」で設定します。DEMO1設定ではすべてにチェックが入っています。「Linkedln」は現在試験的にチェックを入れています。フォローボタン設定フォローボタンの設定はSNSを使ってアクセス流入するならあった方がいいです。」⇒「フォローボタンの表示/非表示設定」で設定しましょう。記事下CTA設定は、コンテンツ(CTA)を作成してからじゃないと設定できません。CATは先ほどもお話しした、こちらがとってほしい行動に誘導する為のものです。記事を読み終わった人が最後に見るのが「記事下」です。ブログやサイトは「読者の行動」を意識して運営することが大切です。記事下CTAは出来ることなら早い段階で作っておきましょう。コンテンツは、「ダッシュボード」の「CTA管理」で「新規作成」で作成します。作成するまでは「非表示」に設定しておきましょう。⇒「記事下CTA設定」で設定します。ちなみに下記画像がDEMO1設定でのCTAです。DEMO1設定では細部に至るまで広告が貼られています。言い換えれば、今現在広告がある場所は広告を載せるのに適している場所ということです。SNS設定SNSはあなたの記事や情報を素早く伝えたり拡散するためのツールです。記事がバズったりするのもSNSが大きく関係しています。フォローアイコンを設置してもあなたのURLを入れておかなければ意味がありません。設定できるSNSは全部で8つFacebook、Instagram、Twitter、Google+、YouTubeチャンネル、Linkedln、Pinterest、RSSの順番です。各項目にはURLの末尾の入力とHeader・Footerの表示設定があります。Headerにチェックを入れるとDEMO1設定ではメニューパネルを開いた部分に表示されます。Footerは先ほど解説した、この部分です。Follow設定」から設定します。RSS以外のすべてにDEMO1設定URLが設定されています。変更を忘れずに!また、チェックマークもすべてに入っていますのであなたのブログ・サイトに合わせた表示設定に変えましょう。ID(アプリID)は、OGPの設定やFacebook用のアプリを作成する時に必要なIDです。ID(アプリID)の取得が必要です。」⇒「OGP設定」から設定できます。IDの部分に数字が記入してある場合があります。IDに書き換えましょう。AMP設定DEMO1設定ではAMP機能がオンの状態です。ここでは冒頭で解説したAMPロゴ画像が必要です。Pages)とはGoogleとTwitterで共同開発された、モバイル端末でウェブページを高速表示するための機能です。スマホなどで検索していると雷マークがついているのがAMP対応記事です。AMPを実装するとモバイルページの読み込みが約4倍、データ量は約1/10になると言われています。」⇒「AMPロゴの設定」から設定します。DEMO1設定では画像が設定されていますので、画像を入れ替えておきましょう。」⇒「AMP機能設定」から設定します。PWA設定PWA機能設定ではアイコン画像とアイコン下テキストの入力が必要です。モバイル向けのサイトを、スマホアプリのように使える仕組みのことです。PWAを実装することでホーム画面にアイコンを追加したりプッシュ通知でお知らせしたりすることができます。サイトにアプリのような機能を持たせることをPWA機能といいます。設定は、「PWA設定」⇒「PWAアイコン設定」から設定します。画像は3種類必要です。それぞれの画像サイズは「72px×72px」「192px×192px」「512px×512px」です。THOR(ザ・トール)初期設定ここまでは、どちらかと言えばサイトデザインに関係した設定が多かったですが、最後に1番大事な初期設定が必要です。一度設定した人ももう一度必要です(笑)初期設定に必要なものは更新用ユーザーIDアナリティクス「トラッキングID」サーチコンソールの認証IDが必要になります。設定しておきましょう。高い理由を知らない人は成功できない?この記事を書いた人Nappa複数の収入を得るための一つとしてブログを運営しています。分かっているつもりでは稼げないのがこの業界ですが、すべての手法を公開しています。