『THE THOR(ザ・トール)』にはデザイン着せ替え機能という素晴らしいサービスがあります。この機能を使えば、デモサイトのようなカッコイイデザインを、一瞬で自分のサイトに設定することができるのです。
しかし!
着せ替えただけでは、デモサイトのままなのです。サイト名が『THE THOR』になっていたり、URLが『THE THOR』の公式サイトになっていたりしているので、デザイン以外の項目を設定しないことには、オリジナルサイトとして公開することができないのです。着せ替えた後も、実はいろいろとやることがあるんです。
せっかく便利な着せ替え機能を使っても、次のステップで挫折してしまってはもったいない!!
そこで、そこはちょっと放置したままじゃまずいよーっていう設定項目を抜き出しました。これから着せ替え機能を使おうかなぁって思っている方、『THE THOR』を導入しようかなぁって考えている方、どうぞ参考にしてください。
今回は、デモサイト07についてお伝えします。(https://thor-demo07.fit-theme.com/)
デモサイト07は、メインビジュアルに動画が使われています。ウェディングサイトをイメージしたデザインで素敵ですね。そしてアイキャッチ画像がないのも特徴的です。
このデザインを設定するうえで、用意すべき画像は以下のとおりです。( )内はデモサイト07で使用されている画像サイズ(W×H)です。(とりあえず用意の画像です。各機能を利用する予定がなければ不要です。)
・メインビジュアル用静止画像(1280×853 、.jpg)
・メインビジュル用動画
TOPページ(タイトル)
ここは重要!ですよね。自分のサイトタイトルですもん。放置はなしです!
デモサイト07では、トップページタイトルが「My WordPress Blog│THE THOR07」と設定されているので、放置するとこれが表示されます。まずい、まずい・・・。
変更は、SEO設定 > TOPページ設定 > TOPページの<title>から行いましょう。
TOPページ(ヘッダー・メインビジュアル)
1.サイトロゴ
画像も一緒にインポートしている場合は、「THE THOR DEMO07」という画像が設定されています。
ロゴの変更は、基本設定 > サイトロゴの設定 > ロゴ画像の設定から行うことができます。画像が用意できていない場合は、設定されている画像を削除することで、サイト名がテキスト表示されます。
2.メインビジュアル
デモサイト07では、YouTube動画が設定されています。動画を読み込む間に表示される静止画像と動画の設定が必要になります。
設定は、TOPページ設定 > メインビジュアル設定 > YouTube背景動画時の設定から行います。
設定すべき項目は・・・
動画再生前に表示する画像を登録
動画再生前に表示する静止画像を設定します。
YouTube動画IDを入力
デモ動画IDが登録されているので、用意した動画IDに変更する必要があります。YouTubeページのURLが「https://www.youtube.com/watch?v=******」の場合、「******」を入力します。
TOPページ(フッターエリア)
コピーライト設定
『LION MEDIA』や『LION BLOG』でも、テーマの制作会社名やWordPressという表示を消すことができました。ザ・トールにも同じ機能が備わっています。(急ぐ必要ではないので、後回しでもOKです。)
設定は、共通エリア設定 > フッターエリア設定 > コピーライトの設定から行うことができます。
「非表示」にすれば消すことができます。
投稿ページ
シェアボタンの設定、記事下CTAの設定が必要です。
シェアボタンの表示設定
設定の変更は、投稿ページ設定 > シェアボタン設定 > シェアボタンの表示/非表示から行います。
デモサイト07では、上下部にFacebook、Twitter、Google+、はてぶのシェアボタンが表示されるように設定されています。
記事下CTA設定
設定の変更は、投稿ページ設定 > 記事下CTA設定から行います。
記事下CTAは、ダッシュボード > CTA管理でコンテンツを作成してからでないと使えません。作成するまでは「表示しない」にしておいてもいいでしょう。
CTAコンテンツを表示させる場合は、「デフォルトCTAコンテンツ設定」にCTAのIDを入力します。
PWA機能
デモサイト07では、PWA機能は無効になっていますが、アイコン下テキストが設定されています。
そもそもPWAってなぁに?
PWAとは「Progressive Web Apps」の略です。
モバイル向けのサイトを、スマートフォンのアプリのように使える仕組みのことです。PWAを実装することで、プッシュ通知やホーム画面へアイコンを追加したりすることができ、アプリのような機能をWebサイトに持たせることができるのです。
(参考サイト:SEO HACKS https://www.seohacks.net/basic/terms/pwa/)
アイコン下テキスト
設定は、PWA設定 > PWA機能設定から行います。
ホーム画面のアイコン下テキストを入力に「THE THOR」と設定されています。無効なので表示されることはありませんが、不要なので削除しておいてもいいでしょう。
以上で、デモサイト07の「とりあえずココだけ設定!」は終わりです。デモサイト01に比べると設定するところは少なめです。
着せ替え後、使い方もわからない状態で探すのって、本当に大変だったので、記事にしてみました。
とりあえず、これさえ読めばサイトの公開まで持っていくことができます。公開さえできれば、サイトのテーマカラーや、各パーツのカラー設定、デザインの細かな設定などは、じっくりと考えながら行うことができるかと思います。
最後までお付き合いありがとうございました。