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

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

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

しかし!

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

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

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

デモサイト05

デモサイト05は、1カラムのサイトデザイン。アーカイブ記事一覧もカードタイプの横3列。すっきりとした印象です。

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

サイトロゴ画像(420×80、.png)
メインビジュアル用YouTube動画
メインビジュアルを読み込む間の静止画像(1280×640、.jpg)
サイト背景画像(640×340、.jpg)
広告

TOPページ(タイトル)

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

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

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

TOPページタイトル設定

 

TOPページ(背景画像)

デモサイト05では背景画像が設定されています。

変更は、基本設定 > 基本スタイル設定 > 全体の背景画像を登録 で行います。

 

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

トップページ、ヘッダーとメインビジュアル

1.サイトロゴ

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

サイトロゴ デモサイト05

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

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

 

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

注目キーワードは、検索するキーワードを入力する枠下に表示されたり、検索パネル内やヘッダーボトムエリアなどに表示されます。デモサイト05では、「AMP」「SEO」「PWA」というキーワードが設定されています。

注目キーワード

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

※非表示にしたい場合は、注目キーワード入力欄を空欄にすると表示されません。

 

 

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

メニューアイコンをクリックすると、メニューパネルが表示されます。そのパネル内に注目ボタン表示されるようにデモサイト05では設定されています。

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

この変更は、共通エリア設定 > ヘッダーエリア設定 > サブメニュー設定から行うことができます。

設定すべき項目は・・・

注目ボタンの設定

 注目ボタンのテキストを入力

「DOWNLOAD」と設定されています。

 ボタンのリンク先URLを入力

ザ・トール公式サイトのURLが設定されています。

※注目ボタンを表示したくない場合は、文字とURLを消すと表示されません。

広告

4.メインビジュアル

デモサイト05では、魅力的な動画が設定されていますね。この動画には、YouTubeが使われています。変更は、TOPページ設定 > メインビジュアル設定 > YouTube背景動画の設定から行うことができます。

設定すべき項目は・・・

メインビジュアル設定

動画再生前に表示する画像を登録

画像もインポートした場合は、デモイメージが設定されています。

 YouTube動画IDを入力

女性モデルのYouTube動画URLが設定されています。変更する場合は、動画URLがhttps://www.youtube.com/watch?v=***********の場合、「***********」部分だけを入力します。

タイトルを入力

「WP THEME THE THOR」と設定されています。

サブタイトルを入力

「by FIT-Web Create.」と設定されています。

※タイトルとサブタイトルを入力している場合、YouTube動画の上に表示されます。

 

5.メインビジュアル下注目エリア

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

設定すべき項目は・・・

メインビジュアル下注目エリア

キャッチコピーを入力

「国内トップクラスのブロガー/アフィリエイター向けWPテーマ」と設定されています。

ボタンのテキストとリンク先URL

「DOWNLOAD」のテキストとザ・トール公式サイトURLが設定されています。

広告

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

ピックアップ記事や、アーカイブ記事などが表示されるエリアです。

コントローラー

アーカイブページには、コントローラーという機能が装備されています。サイト訪問者がアーカイブのデザインや、記事の並び順などを変更することができます。

設定は、アーカイブ設定 > コントローラー設定から行うことができます。

コントローラー

設定すべき項目・・・

お勧めカテゴリの設定

表示するカテゴリIDを入力

カテゴリID(2、3、4、5)が設定されてます。

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

コピーライト設定

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

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

FITの表示を設定

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

 

スマホ用固定フッター

スマホでサイトが表示されたときに、固定フッターが表示されるように設定されています。設定の変更は、共通エリア設定 > 固定フッターエリア設定[スマホ用]から行うことができます。

スマホ用固定フッター

設定すべき項目・・・

スマホ用固定フッター

項目2の設定

シェアボタンが表示されるように設定されていますが、各項目(Facebook、Twitter、Google+、はてぶ、Pocket、LINE、Linkedln、Pinterest)にはチェックが入っていません。表示したい項目にチェックを入れましょう。

項目4の設定

電話番号が表示されるように設定されています。「電話番号を入力」欄にもダミーの番号(03-0000-0000)が登録されています。

 

スマホ用固定フッターの表示が不要であれば、「スマホ用固定フッター表示するか選択」を非表示にしておきましょう。

不要な項目のみ表示しないのであれば、各項目の「表示する項目を選択」で自由選択リンクボタンを選び、リンクボタン欄を空欄にしておくと表示されません。

広告

投稿ページ

シェアボタンの設定、フォローボタンの設定が必要です。

投稿ページ設定

シェアボタンの表示設定

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

デフォルトでは、Facebook、Twitter、Google+、はてぶにチェックが入っています

 

フォローボタン設定

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

不要な場合は「表示しない」に設定しましょう。

広告

SNS設定

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

Follow設定

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

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

SNS設定 Follow

デフォルトでは、Facebook、Twitter、YouTubeチャンネルのURL欄にDemo-URLが設定されています。また、この3つとRSSの「Header、Footerでフォローアイコンを表示する」にチェックが入っています。

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

 

PWA機能

デモサイト05では、PWA機能は無効になっています。ただ、アイコンしたテキストに「THE THOR05」と設定されていますので、気になる方は削除しておきましょう。

そもそもPWAってなぁに?

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

アイコン下テキスト

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

PWAテキスト設定

ホーム画面のアイコン下テキストを入力に「THE THOR05」と入力されています。

 

 

こはる的まとめ

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

着せ替えても、やることいろいろあるやん! でも、どこを触ればいいのかわからん!っていう状態になったので、記事にしてみました。

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

最後までお読みいただき、ありがとうございました。お疲れさまでした。

広告