『THE THOR(ザ・トール)』にはデザイン着せ替え機能という素晴らしいサービスがあります。この機能を使えば、デモサイトのようなカッコイイデザインを、一瞬で自分のサイトに設定することができるのです。
しかし!
着せ替え機能を使って設定しただけでは、ただのデモサイトのままです。デザイン以外の項目を設定することで、自分のサイトとして公開することができます。
そこで、そこはちょっと放置したままじゃまずいよーっていう設定項目を抜き出しましたので、参考にしてみてください。着せ替えても、実はやることが多いんです。
今回は、デモサイト03についてお伝えします。(https://thor-demo03.fit-theme.com/)
デモサイト03では、メインビジュアルにスライドショーが使われています。シンプルなサイト設計なので、ブログなどにも向いてそうですね。
このデザインを設定するうえで、用意すべき画像は以下のとおりです。(W×H)内はデモサイト03で使用されている画像サイズです。(とりあえず用意の画像です。各機能を利用する予定がなければ不要です。)
・背景画像(158×225、.jpg)
・PWAアイコン用画像3種類(75×75、192×192、512×512、.png)
TOPページ(タイトル)
ここは重要!ですよね。自分のサイトタイトルですもん。放置できません!
デモサイト03では、トップページタイトルが「My WordPress Blog│THE THOR」と設定されています。放置するとこのまま表示されます。まずい、まずい・・・。
変更は、SEO設定 > TOPページ設定 > TOPページの<title>から行うことができます。
TOPページ(ヘッダー・メインビジュアル)
1.サイトロゴ
画像も一緒にインポートしている場合は、「THE THOR DEMO03」という画像が設定されています。
ロゴの変更は、基本設定 >サイトロゴの設定 >ロゴ画像の設定から行うことができます。
画像が用意できていない場合は、設定されている画像を削除すれば、テキストでサイト名が表示されます。
3.注目ボタン(メニューパネルの右側)
デモサイト03では、メニューパネル右側の表示されているのが注目ボタンです。(スマホではメニューパネル内で表示されます。)
この変更は、共通エリア設定 > ヘッダーエリア設定 > サブメニュー設定から行うことができます。
設定すべき項目は・・・
注目ボタンのテキストを入力
「THEME DOWNLOAD」と設定されています。
ボタンのリンク先URLを入力
ザ・トール公式サイトのURLが設定されています。
※注目ボタンを表示したくない場合は、文字とURLを消すと表示されません。
3.メインビジュアル
デモサイト03では、スライドショーが設定され、3つの画像が使われています。最大で5つまで設定可能。変更は、TOPページ設定 > メインビジュアル設定 > スライドショー時の設定から行うことができます。
設定すべき項目は・・・
スライドショー1~3の画像を登録
画像も一緒にインポートした場合は、スライドショー1~3まで設定されています。
タイトルを入力
「THE THOR」と設定されています。(スライドショー1~3の設定)
サブタイトルを入力
「結果へ導く次世代WordPressテーマ「ザ・トール」」と設定されています。(スライドショー1~3の設定)
※タイトルとサブタイトルを入力している場合、画像の上に表示されます。
TOPページ背景画像
デモサイト03では、背景画像が設定されています。
変更は、基本設定 > 基本スタイル設定 > 全体の背景画像を登録から行います。
そのまま使ってもいいですし、不要なら削除しておきましょう。
注目キーワード
注目キーワードは、検索する際に使用するキーワード入力欄の下に表示されたり、検索パネル内やヘッダボトムエリア(設定した場合)に表示されます。
デモサイト03では「WEB」「デザイン」「SEO」というキーワードが設定されています。変更する場合は、基本設定 > 検索機能設定 >注目キーワードを設定から行うことができます。
※非表示にしたい場合は、注目キーワード設定の入力欄を空欄にすると表示されません。
TOPページ(フッターエリア)
コピーライト設定
『LION MEDIA』や『LION BLOG』でも、テーマの制作会社名やWordPressという表示を消すことができました。ザ・トールにも同じ機能が備わっています。(急ぐ必要ではないので、後回しでもOKです。)
設定は、共通エリア設定 > フッターエリア設定 > コピーライトの設定から行うことができます。
「非表示」にすれば消すことができます。
スマホ用固定フッター
スマホでサイトが表示されたときに、固定フッターが表示されるように設定されています。設定の変更は、共通エリア設定 > 固定フッターエリア設定[スマホ用]から行うことができます。
設定すべき項目・・・
項目2の設定
デモサイト03ではシェアボタンを表示するに設定されていますが、表示する項目(Facebook、Twitter、Google+、はてぶ、Pocket、LINE、Linkedln、Pinterest)にチェックが入っていません。表示したい場合は、必要なものにチェックを入れます。
項目4の設定
電話番号が表示されるように設定されています。「電話番号を入力」欄には番号が登録されていませんので、表示する場合は登録しましょう。
スマホ用固定フッターの表示が不要であれば、「スマホ用固定フッター表示するか選択」を非表示にしておきましょう。
不要な項目のみ表示しないのであれば、各項目の「表示する項目を選択」で自由選択リンクボタンを選び、リンクボタン欄を空欄にしておくと表示されません。
投稿ページ
シェアボタンの設定、フォローボタンの設定が必要です。
シェアボタンの表示設定
設定の変更は、投稿ページ設定 > シェアボタン設定 > シェアボタンの表示/非表示から行います。
Facebook、Twitter、Google+、はてぶにチェックが入っています。必要なものを設定しましょう。
フォローボタン設定
設定の変更は、投稿ページ設定 > フォローボタン設定 > フォローボタンの表示/非表示から行います。
不要な場合は「表示しない」に設定しましょう。
SNS設定
SNSフォローアイコンの表示設定をしていても、きちんと自分のURLを設定しておかないと意味がありませんよね。
Follow設定
URLの設定は、SNS設定 > Follow設定から行います。
設定できるSNSは、Facebook、Instagram、Twitter、Google+、YouTubeチャンネル、Linkedln、Pinterest、RSSです。項目ごとに、URLの入力欄とHeader・Footerの表示設定があります。
デモサイト03では、FaceBook、Twitter、Google+においてURL欄にDemo-URLが設定されていますので、変更をしておきましょう。また同じように、上記3つとRSSの「Header、Footerでフォローアイコンを表示する」にチェックが入っていますので、不要なものはチェックを外しましょう。(ここでいうHeader、Footerは、TOPページの表示を指しています。)
その他
機能自体は有効になっていないのでページ上には表示されていませんが、カスタマイザー上では設定されているが、自サイトには関係ないもの(不要なもの)をピックアップしました。
PWA機能設定
デモサイト03では機能は無効になっていますが、アイコン下テキストが設定されています。
そもそもPWAってなぁに?
PWAとは「Progressive Web Apps」の略です。
モバイル向けのサイトを、スマートフォンのアプリのように使える仕組みのことです。PWAを実装することで、プッシュ通知やホーム画面へアイコンを追加したりすることができ、アプリのような機能をWebサイトに持たせることができるのです。
(参考サイト:SEO HACKS https://www.seohacks.net/basic/terms/pwa/)
変更は、PWA設定 > PWA機能設定から行います。
上の画像はデモサイト01のものですが、デモサイト03でも同じようにホーム画面のアイコン下テキストを入力に「THE THOR」と設定されています。
以上で、デモサイト03「とりあえずココだけ設定!」は終わりです。デモサイト01に比べると「とりあえずココだけ設定」は少なめでした。
着せ替えた後も、いろいろとやることはあります。使い方もわからない状態でカスタマイザー内を探すのって、本当に大変だったので、記事にしてみました。
とりあえず、これさえ読めばサイトの公開まで持っていくことができます。公開さえできれば、サイトのテーマカラーや、各パーツのカラー設定、デザインの細かな設定などは、じっくりと考えながら行うことができるかと思います。
最後までお付き合いありがとうございました。お疲れさまでした。
THE THOR(ザ・トール)
プラグインなしでSEOにも対応したWordPressのテーマです。初めての方でもサポート付きなので安心です。
「デザイン着せ替え機能」を使えば、気に入ったデモサイトのスタイルを、あなたのサイトにワンクリックでコピーできますよ。
お気に入りのスタイルをダウンロードして、「THE THOR ザ・トール」を始めてみませんか?
当サイトからご購入の方には特典付き!