ザ・トールの【デモサイト02】 着せ替えたら、とりあえずココを設定しよう!

ザ・トールの【デモサイト02】 着せ替えたら、とりあえずココを設定しよう!

『THE THOR(ザ・トール)』にはデザイン着せ替え機能という素晴らしいサービスがあります。この機能を使えば、デモサイトのようなカッコイイデザインを、一瞬で自分のサイトに設定することができるのです。

しかし!

着せ替え機能を使って設定しただけでは、ただのデモサイトのままです。デザイン以外の項目を設定することで、自分のサイトとして公開することができます。

そこで、そこはちょっと放置したままじゃまずいよーっていう設定項目を抜き出しましたので、参考にしてみてください。着せ替えても、実はやることが多いんです。

今回は、デモサイト02についてお伝えします。(https://thor-demo02.fit-theme.com/

『THE THOR(ザ・トール)』デモサイト02

デモサイト02は、メインに静止画像が使われ落ち着いた雰囲気です。サイドカラムがなく、アーカイブ記事が3カラム表示になっているのが特徴的ですね。無駄を取り除いたシンプルなサイトです。

このデザインを設定するうえで、とりあえず用意すべき画像(差し替えが必要な画像)は以下のとおりです。(W×H)内はデモサイト02で使用されている画像サイズです。(とりあえず用意の画像です。各機能を利用する予定がなければ不要です。)

サイトロゴ画像(410×80、.png)
AMPロゴ画像(375×60、.png:推奨サイズ600×60以下)
PWAアイコン用画像3種類(75×75、192×192、512×512、.png)
広告

TOPページ(タイトル)

ここは重要!ですよね。自分のサイトタイトルですもん。放置できません!

デモサイト02では、トップページタイトルが「My WordPress Blog│THE THOR」と設定されています。放置するとこのまま表示されます。まずい、まずい・・・。

変更は、SEO設定 > TOPページ設定 > TOPページの<title>から行うことができます。

TOPページタイトル設定『THE THOR』

 

TOPページ(ヘッダー・メインビジュアル)

ヘッダー・メインビジュアル『THE THOR(ザ・トール)』

1.注目キーワード(検索機能)

デフォルトでは、注目キーワードに「デザイン」「表示速度」「SEO」「AMP」「PWA」が設定されています。これらの言葉は、「SEARCH」アイコンをクリックした時に表示される検索パネル内や、ウィジェットで設置した検索枠の下、ヘッダーボトム(サイトロゴの下)エリアに検索窓を設置した場合に表示されます。

変更は、基本設定 > 検索機能設定 >注目キーワードを設定から行うことができます。

 

検索パネル内、ウィジェットの検索窓下に表示される注目キーワード非表示にしたい場合は、注目キーワード欄を空欄にすれば表示されません。

※ヘッダーボトムの注目キーワード表示非表示にしたい場合は、共通エリア設定 > ヘッダーボトムエリア設定[検索窓・お知らせ] > ヘッダー検索窓の表示設定にある「注目キーワードを表示するか選択」を非表示にする必要があります。

この部分のことです

ヘッダーボトムの注目キーワード

 

2.サイトロゴ

画像も一緒にインポートしている場合は、「THE THOR DEMO02」という画像が設定されています。

デモサイト02のサイトロゴ『THE THOR(ザ・トール)』

ロゴの変更は、基本設定 >サイトロゴの設定 >ロゴ画像の設定から行うことができます。

画像が用意できていない場合は、設定されている画像を削除すれば、テキストでサイト名が表示されます。

デモサイト02で使われているサイトロゴのサイズは?

表示されているサイズは、高さ40px、幅205pxです。実際に使われている画像サイズは、高さ80px、幅410pxです。(ブラウザ:Chrome 全画面表示時)

高さが40pxに設定されているので、高さがそれ以上ある場合、縦横比を維持したまま縮小されるようです。

 

3.メインビジュアル

画像の変更は、TOPページ設定 > メインビジュアル設定 > 静止画時の設定から行うことができます。

ちなみにデモサイト02で表示されているメイン画像上の文字(THE THOR by FIT-Web Create.)は、画像上に加工されています。後乗せではありません。

 

後乗せにしたい場合は、静止画時の設定にあるタイトル、サブタイトルを入力欄を設定すると、画像中央に文字を表示することができます。

広告

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

 

2.コピーライト設定

コピーライトの設定

『LION MEDIA』や『LION BLOG』でも、テーマの制作会社名やWordPressという表示を消すことができました。ザ・トールにも同じ機能が備わっています。(急ぐ必要ではないので、後回しでもOKです。)

設定は、共通エリア設定 > フッターエリア設定 > コピーライトの設定から行うことができます。

FITの表示を設定

非表示」にすれば消すことができますよ。

投稿ページ

シェアボタンの設定、記事下CTAの設定が必要です。

投稿ページ『THE THOR(ザ・トール)』

シェアボタンの表示設定

設定の変更は、投稿ページ設定 > シェアボタン設定 > シェアボタンの表示/非表示から行います。

デモサイト02では、Facebook、Twitter、Google+、はてぶ、LINEの5つを「表示する」にチェックが入っています。必要の有無を確認しましょう。

記事下CTA設定

設定の変更は、投稿ページ設定 > 記事下CTA設定から行います。

記事下CTAは、ダッシュボード > CTA管理コンテンツを作成してからでないと使えません。作成するまでは「表示しない」にしておいてもいいでしょう。

CTAコンテンツを表示させる場合は、「デフォルトCTAコンテンツ設定」にCTAのIDを入力します。(デフォルトでは175と設定されています。

デフォルトCTAコンテンツ設定

 

きちんと設定をすると、デモサイトのような表示になります。

記事下CTA

SNS設定

SNSフォローアイコンの表示設定をしていても、きちんと自分のURLを設定しておかないと意味がありませんよね。

Follow設定

URLの設定は、SNS設定 > Follow設定から行います。

設定できるSNSは、Facebook、Instagram、Twitter、Google+、YouTubeチャンネル、Linkedln、Pinterest、RSSです。項目ごとに、URLの入力欄Header・Footerの表示設定があります。

SNS・フォロー設定

すべてのSNSにおいて、「Headerでフォローアイコンを表示する」にチェックが入っています。また、Facebook、Twitter、YouTubeチャンネルのURL欄には、Demo用URLが設定されていますので、変更をしておきましょう。

ここでいうHeader、Footerは、TOPページの表示を指しています

FacebookのAPPID

設定は、SNS設定 > OGP設定から行います。

Facebookの設定

OGP画像は、デモ画像がセットされていないので、後から設定してもOKですが、FacebookのAPPIDには、デモIDが登録されています。APPIDを持っていない場合は、削除しておきましょう。

ユーザーIDを持っている方は、FacebookのユーザーID欄で設定をします。

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

(参考サイト:FacebookのOGP設定に必要なfb:app IDの取得方法/ TCD

広告

AMP設定

デモサイト02では、AMP機能が有効になっているため、AMP用のロゴ画像を設定する必要があります。設定は、AMP設定 > AMPロゴの設定から行います。(機能は有効になっていますが、デモサイト用AMPロゴは設定されていないので空欄になっています。)

これはデモサイト01の例です

AMPロゴ画像設定

 

PWA機能

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

そもそもPWAってなぁに?

PWAとは「Progressive Web Apps」の略です。
モバイル向けのサイトを、スマートフォンのアプリのように使える仕組みのことです。PWAを実装することで、プッシュ通知やホーム画面へアイコンを追加したりすることができ、アプリのような機能をWebサイトに持たせることができるのです。
(参考サイト:SEO HACKS https://www.seohacks.net/basic/terms/pwa/

アイコン下テキスト

設定は、PWA設定 > PWA機能設定から行います。

PWAテキスト設定

ホーム画面のアイコン下テキストを入力に「THE THOR」と設定されていますので、変更の必要があります。

 

PWAアイコンの設定

設定は、PWA設定 > PWAアイコン設定から行います。

下の画像は、デモサイト01で着せ替えたときにセットされていたものです。デモサイト02では、PWA機能が有効になっているものの、アイコンはセットされていませんでした。

PWAロゴ設定

3サイズの画像の用意が必要です。

・72×72
・192×192
・512×512

その他

機能が有効になっていないものの、カスタマイザー上ではデモ用の設定がされている項目をピックアップしました。

注目ボタン(メニューパネル内)

デモサイト02では、メニューパネルを表示するボタンが非表示設定になっています。

しかし、カスタマイザー上ではTHOR公式サイトのURLが設定されています。

注目ボタンの設定

削除したい場合は、共通エリア設定 > ヘッダーエリア設定 > サブメニュー設定から行うことができます。

ヘッダーお知らせ

設定した文章が流れるお知らせヘッダー機能です。デモサイト02では非表示設定になっていますが、文章とURLが設定されています。

ヘッダーお知らせの表示設定

削除したい場合は、共通エリア設定 > ヘッダーボトムエリア設定 > ヘッダーお知らせの表示設定から行うことができます。

 

 

こはる的まとめ

以上で、デモサイト02の「とりあえずココだけ設定!」は終わりです。

デモサイト01より、設定すべき項目が少なめです。シンプルなサイトになっているので、必要なものを後から追加するといい感じに仕上がるのではないかと思います。

着せ替え作業が終わっても、いろいろとやるべきことがありますよね。そして、使い方もわからない状態で設定箇所を探すのって、本当に大変だったので、記事にしてみました。

とりあえず、これさえ読めばサイトの公開まで持っていくことができます。公開さえできれば、サイトのテーマカラーや、各パーツのカラー設定、デザインの細かな設定などは、じっくりと考えながら行うことができるかと思います。

 

最後までお付き合いありがとうございました。お疲れさまです。

広告