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

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

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

しかし!

着せ替えただけでは、デモサイトのままなのです。サイト名が『THE THOR』になっていたり、URLが『THE THOR』の公式サイトになっていたりしているので、デザイン以外の項目を設定しないことには、オリジナルサイトとして公開することができないのです。着せ替えた後も、実はいろいろとやることがあるんです。

せっかく便利な着せ替え機能を使っても、次のステップで挫折してしまってはもったいない!!

そこで、そこはちょっと放置したままじゃまずいよーっていう設定項目を抜き出しました。これから着せ替え機能を使おうかなぁって思っている方、『THE THOR』を導入しようかなぁって考えている方、どうぞ参考にしてください。

 

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

『THE THOR』のデモサイト06

デモサイト06は、デモサイト01と同じぐらいカッコイイサイトですよね。どっちを使ってみようか私も悩みました。01との大きな違いは、メインビジュアルがスライドショーになっているところですね。動画を用意する必要がないので導入しやすそうです。

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

サイトロゴ画像(400×80、.png)
メインビジュアル用画像 3枚(1280×853 – 2枚、1280×953.jpg)
フッターCTA背景画像(1920×1152、.jpg)
フッターアイキャッチ画像(1920×1280、.jpg)
広告

TOPページ(タイトル)

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

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

変更は、SEO設定 > TOPページ設定 > TOPページの<title>から行いましょう。

TOPページタイトル設定

 

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

TOPページ ヘッダーとメインビジュアルの設定

 

1.サイトロゴ

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

『THE THOR』サイトロゴ

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

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

 

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

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

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

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

設定すべき項目は・・・

注目ボタンの設定

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

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

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

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

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

 

3.ヘッダーお知らせ

設定した文章が流れるお知らせヘッダー機能です。この機能の設定は、共通エリア設定 > ヘッダーボトムエリア設定 > ヘッダーお知らせの表示設定から行うことができます。

設定すべき項目・・・

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

 お知らせとして表示する文章を入力

「ブロガー/アフィリエイター向けWPテーマ「THE THOR」の購入ページはこちら」という文章が設定されています。

 リンク先URLの入力

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

 

4.メインビジュアル

デモサイト06では、スライドショーが設定され、メインビジュアルの上には、タイトル、サブタイトル、リンクボタンが表示されています。

変更は、TOPページ設定 > メインビジュアル設定 > スライドショー時の設定から行うことができます。

設定すべき項目は・・・

メインビジュアルの設定

 スライドショー1~3の画像を登録

画像もインポートした場合、スライドショー1~3に画像が設定されています。

 スライドショー1の設定

タイトル「W3Cルール厳守」、サブタイトル「HTML5+CSS3によるエラーのない最新のコーディング」、ボタンテキスト「記事詳細へ」、ボタンリンク先URLを入力「https://thor-demo06.fit-theme.com/html5css3/」が設定されています。

 スライドショー2の設定

タイトル「WEBサイトの高速表示」、サブタイトル「CSSファイルの非同期読み込み機能による高速表示を実現」、ボタンテキスト「記事詳細へ」、ボタンリンク先URLを入力「https://thor-demo06.fit-theme.com/synchronization/」が設定されています。

 スライドショー3の設定

タイトル「収益化をサポート」、サブタイトル「タグ管理機能で、アフィリエイト広告タグのクリック率などが図れる」、ボタンテキスト「記事詳細へ」、ボタンリンク先URLを入力「https://thor-demo06.fit-theme.com/tag-afir/」が設定されています。

※ボタンリンクを非表示にしたい場合は、入力欄を空欄にすると表示されません。

広告

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

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

ピックアップ3記事

ピックアップ表示する記事IDがデモ設定されています。自サイトの投稿記事IDと同じ数字があれば、その記事が表示されます。なければ、No Imageと表示されます。(『THE THOR』ではNo Imageを任意の画像に設定することもできます。)

PickUp3のNo Image

変更は、TOPページ設定 >ピックアップ3記事設定から行うことができます。

設定すべき項目は・・・

ピックアップ3記事設定

 記事IDを入力

1~3番目の記事ID(241、290、70)が設定されています。自分の投稿記事IDを指定しましょう。空欄にすると、最新記事が表示されます。

 

コントローラー

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

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

コントローラー

設定すべき項目・・・

レイアウト切り替えボタン

レイアウト切り替えボタンの設定

レイアウト切り替えボタン

上の画像がレイアウト切り替えボタンです。このボタンを押すことでアーカイブ記事の表示を訪問者が自由に変更することができるのです。

しかし、アドセンスで収益を上げたい方にとっては注意が必要です。なぜなら、切り替えボタンを表示するとアーカイブページにインサート広告が表示されなくなってしまうのです(『THE THOR』の仕様)。広告を表示したい場合は、「非表示」にしておく必要があります。

広告

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

デモサイト06のフッターエリアにはCTAが設置されています。着せ替えただけでは、『THE THOR』の案内が表示されたままになります。

フッターエリア

1.フッターCTA

設定は、共通エリア設定 > フッタートップエリア設定[CTA] > CTAの表示設定から行うことができます。

CTAはすぐに必要ないという方は、「フッターCTAを表示するか選択」を非表示にしておけば、他の項目が入力されていても表示されません。

設定すべき項目・・・

フッターCTAの設定

見出しを入力

最強のWordPressテーマ「THE THOR」」と設定されています。

本文を入力

「本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております! 日本国内のテーマでナンバー1を目指しております。どうか皆様のお力をお貸しください。よろしくおねがいいたします。」と設定されています。

アイキャッチ画像を登録

画像もインポートした場合は、アイキャッチに表示される画像が設定されています。

ボタンテキスト・リンク先URLを入力

ボタンテキストを入力に「THEME DOWNLOAD」、ボタンリンク先URLにザ・トール公式サイトURLが設定されています。

 

2.コピーライト設定

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

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

FITの表示を設定

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

 

 

 

こはる的まとめ

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

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

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

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

広告