着せ替えスキンの種類

THE THOR(ザ・トール)の着せ替え機能をマスターしよう!

 

キャプチャー

昨今、ブログはコンテンツ重視とのことで、質の高い記事作成が重要と考えられています。

しかしそうは言っても、見た目が素っ気ないサイトよりは整っているサイトの方が読まれやすいと思いませんか?

1から見た目に拘ったサイトを作成するのは大変ですが、THE THOR(ザ・トール)なら簡単にデザイナーズサイトのような見た目のサイトが出来上がります。

それでは、THE THOR(ザ・トール)の目玉機能「着せ替え機能」について説明しましょう。

目次

THE THOR(ザ・トール)のデザイン着せ替え機能とは?

THE THOR(ザ・トール)を購入した人はこれが目

着せ替え一覧

的で購入した人が多いのではないでしょうか。

本来なら自分自身で、または専門家さんに有料でお願いして構築するWEBサイトの外観を、プラグインと少しの操作で簡単に構築できる機能がデザイン着せ替え機能」なのです。

しかも、9つの異なったデザインを選ぶことができるので、あなたのWEBサイトに合ったデザイナーズサイトを構築することができます。

THE THOR(ザ・トール)のデザイン着せ替え機能の注意点

注意点

便利な「デザイン着せ替え機能」ですが、1つ大きな注意点があります。

それは、カスタマイザーの設定が上書きされるということです。

例えば、自前のサイトロゴやファビコンなどを設定していても、着せ替えをした時点でスタイルごとに設定されているロゴに自動的に上書きされてしまうにです。

他にもGoogleアナリティクスのトラッキングIDGoogle Search Consolenの認証IDなんかもデフォルト状態に戻っていまいます。

「デザイン着せ替え機能」を利用する場合は、カスタマイザーの設定をする前か、設定のバックアップ(メモ帳などに保存)する方が良いでしょう。

デザイン着せ替え機能の使い方

それでは実際に「デザイン着せ替え機能」を使ってみましょう。

1つずつ説明していきますね。

WordPressプラグイン「Customizer Export/Import」をインストール

まずはWordPressプラグイン「Customizer Export/Import」をインストールして有効化します。

ダッシュボード「プラグイン」⇒「新規追加」から「Customizer Export/Import」と入力して検索します。

「今すぐインストール」をクリックして、「有効化」ボタンに変わったらこれもクリックしてプラグインの準備は完了です。

プラグインをインストール

スタイルをダウンロード

公式サイトからスタイルをダウンロードします。

下の公式サイトのリンクをクリックします。

THE THOR(ザ・トール)公式サイト

下にスクロールすると「デモサイト一覧ページへ」というボタンがあるので、これをクリックします。

公式サイト

01から09までのスタイルの中からお好きなスタイルを選んで「スタイルダウンロード」をクリックします。

スタイルをダウンロード

the-thor-child-export-demo0x.zip」(demo0x0xはスタイルの番号が入ります)というzip形式の圧縮ファイルがダウンロードされるので、これを任意の場所に解凍して保存します。

解凍されたファイル名は「the-thor-child-export-demo0x.dat」という形になります。

テーマのカスタマイズ設定のバックアップを取る

カスタマイザーの設定に変更を加える前でも、バックアップの習慣を付けるためにやっておきましょう。

ダッシュボード「外観」⇒「カスタマイズ」からカスタマイザー画面を開きます。

外観からカスタマイザーをクリック

WordPressプラグイン「Customizer Export/Importを有効化するとメニューの最下部に「エクスポート/インポート」というメニューが追加されているので、これをクリックします。

カスタマイザーエクスポートインポート

「書き出し」項目の「書き出し」ボタンをクリックして、現在のカスタマイズ設定のバックアップファイルを保存します。

書き出しをクリック

ファイル名は「the-thor-export-datとなっています。

分かりやすい様にフォルダを作って保存しておきましょう。

これで着せ替えで上手く行かなかった場合に元の状態に戻せます。

スタイルをインポートする

次にスタイルをインポートします。

「エクスポート/インポート」のメニュー画面の「インポート」項目の「ファイルを選択」ボタンをクリックして、あらかじめダウンロードしたデザインスタイルのファイル「the-thor-child-export-demo0x.datを選択します。

ダウンロードしたzipファイルではなく、解凍したdatファイルを選択します。

 

スタイルファイルを選択したら、「画像ファイルをダウンロードしてインポートしますか?」にチェックを入れて、「インポート」ボタンをクリックして着せ替え完了です。

ファイルを選択してチェックを入れる

スタイルを再変更したい場合

デザインスタイルを変更して、また別のスタイルに変更する場合には、まずはデフォルトの状態にいったん戻してから、新しいスタイルをインストールします。

それぞれ詳しく説明しますね。

カスタマイズ設定をバックアップ

まずは新規で着せ替えする時と同様にカスタマイズ設定をバックアップします。

書き出しをクリック

デフォルトスタイルをダウンロード

マニュアルサイトを開き、初期設定メニューの「カスタマイザーの設定をデフォルトに戻す着せ替えファイル」という項目を開き、「カスタマイザーに値をデフォルトに戻す」から「スタイルをダウンロードする」ボタンをクリックして、デフォルトのスタイルをダウンロードします。

the-thor-child-export-default.zipというファイルがダウンロードされるので、これを解凍して任意の場所に解凍しましょう。

マニュアルサイトからデフォルトスタイルをダウンロード

デフォルトスタイルをインポート

「エクスポート/インポート」メニューの「インポート」からダウンロードして解凍した「the-thor-child-export-default.dat」ファイルを選択して、「画像ファイルをダウンロードしてインポートしますか?」にチェックを入れて、「インポート」ボタンをクリックします。

ファイルを選択してチェックを入れる

これでデフォルト状態に戻りました。

デフォルト状態に戻す時も「画像ファイルをダウンロード~」にチェックを入れましょう。

着せ替えるデザインスタイルをダウンロードしてインポートする

次は通常の着せ替えと同じように任意のデザインスタイルをダウンロードしてインポートします。

着せ替えをするたびに設定が上書きされるので注意してくださいね

スタイルを変更したら必ずする設定

着せ替えしたスタイルは、デモスタイルとして設定されています。

このままではTHE THOR(ザ・トール)のデモサイトの様なサイトになってしまうし、カスタマイザーで変更した設定も上書きされてデフォルトに戻ってしまいます。

なのでデザイン着せ替え機能を使った後に、あなたのサイトに合わせた設定を行います。

変更・初期状態になった設定内容は、細かい所まで説明するとキリがないので、重要な箇所に絞って説明します。

デザインスタイルによっては必要のない設定もあります。
以下の項目が私がテストして設定が変更になった項目です。
カラー設定などは着せ替え前の設定から引き継がれますが、入力・変更したテキスト類や指定IDなどはデフォルトの状態に戻るか着せ替えで新たに上書きされています。
けっこうな数の項目が変更されていました。
人によっては必要のない項目もあったかとは思いますが、まずは《重要》と書かれた箇所は最優先で確認してください。
それでは、それぞれの項目を見てみましょう。

サイトロゴの設定

基本設定[THE]⇒「サイトロゴ」

サイトロゴがTHE THOR(ザ・トール)のロゴになっています。

サイトロゴを変更

あなた独自のロゴがある場合は変更し、無い場合は画像を削除しましょう。

ロゴ画像がない場合はサイトタイトルが表示されます。

検索機能設定

基本設定[THE]⇒「検索機能設定」

「検索項目見出し設定」と「注目キーワードを設定」が変更されています。

検索機能設定

特に「注目キーワードを設定」では、キーワードが「ファッション」「デザイン」「流行」になっているので、あなたのブログに合わない場合は変更しましょう。

タグ管理設定

基本設定[THE]⇒「タグ管理設定」

「独自項目の見出し設定」がデフォルトに戻っていますので、変更していた場合は再設定が必要です。

独自項目の見出し設定

自動生成サイトマップ設定

基本設定[THE]⇒「自動生成サイトマップ設定」

除外IDやテキストなど、一部設定がデフォルトに戻っています。

自動生成サイトマップの設定1
自動生成サイトマップの設定2

パスワード保護ページ設定

基本設定[THE]⇒「パスワード保護ページ設定」

デフォルトのテキストに戻っていますので、変更していた場合は再入力が必要です。

パスワード保護ページ設定

お問い合わせページ設定

基本設定[THE]⇒「お問い合わせページ設定」

デフォルトのテキストに戻っていますので、変更していた場合は再入力が必要です。

お問い合わせページ設定

アクセス解析設定

基本設定[THE]⇒「アクセス解析設定」

Google AnalyticsのトラッキングIDやGoogle Search Consoleの認証IDが、デフォルトの空欄に戻っているので再設定が必要です。

アクセス解析の設定

セキュリティ関連設定

基本設定[THE]⇒「セキュリティ関連設定」

デフォルトから変更している場合は、もとに戻っているので注意してください。

セキュリティ関連設定

ユーザーID設定

基本設定[THE]⇒「ユーザーID設定」

デフォルトの空欄に戻っているので再設定が必要です。

ユーザーIDの設定

ヘッダーエリア設定

共通エリア設定[THE]⇒「ヘッダーエリア設定」

「サブメニュー設定」で「注目ボタンのテキスト」と「ボタンのリンク先URL」を変更しましょう。

特に「ボタンのリンク先URL」はTHE THOR(ザ・トール)のサイトにリンクされているので、変更または「注目ボタンのテキスト」も併せて削除します。

ヘッダーエリアの設定1
ヘッダーエリアの設定2

ヘッダーボトムエリア設定[検索窓・お知らせ]

共通エリア設定[THE]⇒「ヘッダーボトムエリア設定[検索窓・お知らせ]」

「ヘッダーお知らせの表示設定」で「お知らせとして表示する文章」と「リンク先URL」がTHE THOR(ザ・トール)のサイトになっているので、表示を非表示にするか内容を変更しましょう。

ヘッダーボトムエリア設定

フッタートップエリア設定[CTA

共通エリア設定[THE]⇒「フッタートップエリア設定[CTA]」

「フッターCTAの表示設定」がTHE THOR(ザ・トール)のデモサイトと同じになっています。

フッターCTAを非表示にするか、内容を変更しましょう。

フッタートップエリア設定1
フッタートップエリア設定2

フッターエリア設定

共通エリア設定[THE]⇒「フッターエリア設定」

「コピーライトの設定」がデフォルトに戻っています。

フッターエリア設定

こちらの記事を参考に変更してください。

関連記事

WordPressテーマ【THE THOR(ザ・トール)】には、カスタマイズや設定できる項目が数多くあります。全ての項目を設定しようと思ったら、あまりの設定項目の多さに目が回ってしまって、記事作成する前に力尽きてしまいかねません。そ[…]

固定フッターエリア設定[スマホ専用]

共通エリア設定[THE]⇒「固定フッターエリア設定[スマホ専用]」

自由設定リンクボタンの「タイトル」「リンク先URL」「アイコン」がデフォルトの空欄になっています。

固定フッターエリアの設定1
固定フッターエリアの設定2
固定フッターエリアの設定3

メインビジュアル設定

TOPページ設定[THE]⇒「メインビジュアル設定」

「タイトル」「サブタイトル」「ボタンのテキスト」「ボタンのリンク先URL」などがデモ用に上書きされています。

メインビジュアルが静止画のスタイルの場合(スタイル02,04,08,09

「静止画時の設定」の項目で「タイトル」「サブタイトル」「ボタンテキスト」「ボタンのリンク先URL」がTHE THOR(ザ・トール)のままの場合は変更または削除しましょう。

静止画時の設定

メインビジュアルがYouTube背景動画の場合(スタイル01,05,07

YouTube背景動画時の設定」の項目で「タイトル」「サブタイトル」「ボタンテキスト」「ボタンのリンク先URL」がTHE THOR(ザ・トール)のままの場合は変更または削除しましょう。

YouTube背景動画時の設定1
YouTube背景動画時の設定2

メインビジュアルがスライドショーの場合(スタイル03,06

「スライドショー時の設定」の項目で「タイトル」「サブタイトル」「ボタンテキスト」「ボタンのリンク先URL」がTHE THOR(ザ・トール)のままの場合は変更または削除しましょう。

変な画像を登録してますけど、適当に選んだ画像なので気にしないでね。

スライドショー時の設定1
スライドショー時の設定2

メインビジュアル下お知らせ設定

TOPページ設定[THE]⇒「メインビジュアル下お知らせ設定」

「キャッチコピー」「ボタンのテキスト」「ボタンのリンク先URL」がTHE THOR(ザ・トール)のままの場合、非表示にするか内容を変更しましょう。

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

カルーセルスライダー設定

TOPページ設定[THE]⇒「カルーセルスライダー設定」

指定IDが空欄に戻っているので、再設定が必要です。

カルーセルスライダー設定

ピックアップ3記事設定

TOPページ設定[THE]⇒「ピックアップ3記事設定」

見出しのテキストや記事IDなどが上書きされています。

 

ピックアップ3記事設定1
ピックアップ3記事設定2

記事ランキング設定

TOPページ設定[THE]⇒「記事ランキング設定」

見出しのテキストや指定IDなどが上書きされています。

記事ランキング設定1
記事ランキング設定2

カテゴリ最新記事設定

TOPページ設定[THE]⇒「カテゴリ最新記事設定」

見出しのテキストや指定IDなどが上書きされています。

カテゴリ最新記事設定1
カテゴリ最新記事設定2

コントローラー設定

アーカイブページ設定[THE]⇒「コントローラー設定」

「お勧めカテゴリの設定」のカテゴリIDや表記のテキストが上書きされています。

コントローラー設定1
コントローラー設定2

アーカイブ用広告設定

広告設定[THE]⇒「アーカイブ用広告設定」

アーカイブ用インフィード広告タグがすべてデフォルトに戻り空欄になっています。

アーカイブ用インフィード広告設定1
アーカイブ用インフィード広告設定2

個別ページ用広告設定

広告設定[THE]⇒「個別ページ用広告設定」

個別ページ用のアドセンスなどの広告タグがデフォルトに戻って空欄になっています。

個別ページ用広告設定1
個別ページ用広告2

TOPページSEO設定

SEO設定[THE]⇒「TOPページSEO設定」

OPページの<title>や<meta description>が変更されています。

TOPページSEO設定

CSS非同期読み込み設定

SEO設定[THE]⇒「CSS非同期読み込み設定」

各項目がデフォルト状態に戻っています。

CSS非同期読み込み設定

img非同期読み込み設定

SEO設定[THE]⇒「img非同期読み込み設定」

デフォルト状態に戻っています。

img非同期読み込み設定

htaccess設定

SEO設定[THE]⇒「htaccess設定」

デフォルト状態に戻っています。

htaccess設定

HTML圧縮設定

SEO設定[THE]⇒「HTML圧縮設定」

デフォルト状態に戻っています。

HTML圧縮設定

OGP設定

SNS設定[THE]⇒「OGP設定」

設定した画像やIDなどが変更または削除されています。

OGP設定

Follow設定

SNS設定[THE]⇒「Follow設定」

各SNSのURLがTHE THORに変更されています。

Follow設定1
Follow設定2
Follow設定3

AMPロゴの設定

AMP設定[THE]⇒「AMPロゴの設定」

AMP要のロゴがTHE THORのデモ用に変更されています。

ロゴ画像の設定

AMPページ用広告設定

AMP設定[THE]⇒「AMPページ用広告設定」

AMPページ用のアドセンスなどの広告タグがデフォルトに戻って空欄になっています。

AMP広告の設定

PWA機能設定

PWA設定[THE]⇒「PWA機能設定」

スマホのホーム画面に表示されるアイコン下のテキストが変更されています。

PWA機能設定

(PWA)アイコンの設定

PWA設定[THE]⇒「アイコンの設定」

スマホのホーム画面に表示されるアイコン画像がTHE THOR用に上書きされています。

アイコンの設定

サイトアイコン

サイト基本情報⇒「サイトアイコン」

サイトアイコンの画像がデフォルトに戻って消えてしまっています。

サイトアイコン

追加 CSS

追記したCSSがデフォルトに戻って消えています。

追加 CSS

各スタイルの紹介

 それでは最後に各デザインスタイルのデモサイトの簡単な紹介をしますね。

スタイル01

デモ01トップページ

YouTube動画を使用したトップページのメインビジュアルが特徴のデザインスタイルです。

カルーセルスライダーとピックアップ記事が目を引きますね。

スタイル01デモサイト

THE THOR デモ01

ザ・トールの魅力を伝えるためのデモメディアの説明文章…

スタイル02

デモ02トップページ

静止画がトップページのデザインスタイルです。

サイドバーがなく、新着記事やカテゴリなどはフッター部にまとめられています。

スタイル02デモサイト

THE THOR02

Just another WordPress site…

スタイル03

デモ03トップページ

トップページのメインビジュアルがスライドショーになっているデザインスタイルです。

 全体的にスッキリとした印象になっています。

スタイル03デモサイト

THE THOR03

My WordPress Blog…

スタイル04

デモ04トップページ

トップページのメインビジュアルが静止画になっていて、画像にマスクがかかっていて落ち着いた印象のデザインスタイルです。

スタイル04デモサイト

THE THOR04

My WordPress Blog…

スタイル05

デモ05トップページ

YouTube動画をメインビジュアルにしたデザインスタイルです。

個人的には一番カッコいいスタイルだと思っています。

情報発信系のポータルサイトなどに向いているスタイルかもですね。

スタイル05デモサイト

THE THOR05

My WordPress Blog…

スタイル06

デモ06トップページ メインビジュアルの画像がクリック操作で入れ替わり、その動きがカッコいいデザインスタイルです。

カルーセルスライダーとピックアップ記事が目を引くデザインになっています。

スタイル06デモサイト

THE THOR06

My WordPress Blog…

スタイル07

デモ07トップページ

YouTube動画をメインビジュアルにしたデザインスタイルです。

特徴は各記事のアイキャッチ画像を非表示にして、全体的に文字が多めのスッキリ上品な雰囲気のデザインになっています。

スタイル07デモサイト

THE THOR07

My WordPress Blog…

スタイル08

デモ08トップページ

ランキングサイトにピッタリ、というかそまんまランキングサイトに特化したデザインスタイルです。

スタイル08デモサイト

THE THOR08

meta description設定…

スタイル09

デモ09トップページ

アフィリエイターなら一番使うことの多いかもしれないデザインスタイルです。

商品紹介や口コミサイトなどに最適なデザインでしょう。

スタイル03デモサイト

THE THOR09

脱毛器具ランキング…

まとめ

いかがでしょうか?

今回はTHE THOR(ザ・トール)の目玉機能「デザイン着せ替え機能」について解説しました。

01から09まで様々なスタイルが用意されていて、どれにしようか迷ってしまいますよね。

 

この記事を書くにあたって、スタイルを変えながら色々設定などを確認してみましたが、着せ替え機能を使うと多くの設定が変わってしまって、大変な思いをしてしまいました。

私の感想としては、デザイン着せ替え機能を利用する場合は、新規でサイトを立ち上げて各設定を行う前に着せ替えした方がかなり楽ですね。

 

運営途中で着せ替える場合は、しっかりと検討してデザインを着せ替えましょう。

それぞれのスタイルには特色があるので、あなたのブログに合った最適なスタイルを選んでください。

⇒⇒THE THOR(ザ・トール)のレビュー&特典付き購入はこちらから

メルマガ登録バナー1

着せ替えスキンの種類
最新情報をチェックしよう!