昨今、ブログはコンテンツ重視とのことで、質の高い記事作成が重要と考えられています。
しかしそうは言っても、見た目が素っ気ないサイトよりは整っているサイトの方が読まれやすいと思いませんか？
１から見た目に拘ったサイトを作成するのは大変ですが、THE THOR（ザ・トール）なら簡単にデザイナーズサイトのような見た目のサイトが出来上がります。
それでは、THE THOR（ザ・トール）の目玉機能「着せ替え機能」について説明しましょう。
- 1 THE THOR（ザ・トール）のデザイン着せ替え機能とは？
- 2 THE THOR（ザ・トール）のデザイン着せ替え機能の注意点
- 3 デザイン着せ替え機能の使い方
- 4 スタイルを再変更したい場合
- 5 スタイルを変更したら必ずする設定
- 5.1 サイトロゴの設定
- 5.2 検索機能設定
- 5.3 タグ管理設定
- 5.4 自動生成サイトマップ設定
- 5.5 パスワード保護ページ設定
- 5.6 お問い合わせページ設定
- 5.7 アクセス解析設定
- 5.8 セキュリティ関連設定
- 5.9 ユーザーID設定
- 5.10 ヘッダーエリア設定
- 5.11 ヘッダーボトムエリア設定［検索窓・お知らせ］
- 5.12 フッタートップエリア設定［CTA］
- 5.13 フッターエリア設定
- 5.14 固定フッターエリア設定[スマホ専用]
- 5.15 メインビジュアル設定
- 5.16 メインビジュアル下お知らせ設定
- 5.17 カルーセルスライダー設定
- 5.18 ピックアップ3記事設定
- 5.19 記事ランキング設定
- 5.20 カテゴリ最新記事設定
- 5.21 コントローラー設定
- 5.22 アーカイブ用広告設定
- 5.23 個別ページ用広告設定
- 5.24 TOPページSEO設定
- 5.25 CSS非同期読み込み設定
- 5.26 img非同期読み込み設定
- 5.27 htaccess設定
- 5.28 HTML圧縮設定
- 5.29 OGP設定
- 5.30 Follow設定
- 5.31 AMPロゴの設定
- 5.32 AMPページ用広告設定
- 5.33 PWA機能設定
- 5.34 （PWA)アイコンの設定
- 5.35 サイトアイコン
- 5.36 追加 CSS
- 6 各スタイルの紹介
- 7 まとめ
THE THOR（ザ・トール）のデザイン着せ替え機能とは？
THE THOR（ザ・トール）
的で購入した人が多いのではないでしょう
本来なら自分自身で、
しかも、９つの異なったデザインを選ぶことができるので、
THE THOR（ザ・トール）のデザイン着せ替え機能の注意点
便利な「デザイン着せ替え機能」ですが、
それは、カスタマイザーの設定が上書きされるということです。
例えば、自前のサイトロゴやファビコンなどを設定していても、
他にもGoogleアナリティクスのトラッキングIDやGoog
「デザイン着せ替え機能」を利用する場合は、
デザイン着せ替え機能の使い方
それでは実際に「デザイン着せ替え機能」を使ってみましょう。
※項目をクリックするとジャンプします
１つずつ説明していきますね。
WordPressプラグイン「Customizer Export/Import」をインストール
まずはWordPressプラグイン「Customizer Export/Import」をインストールして有効化します。
ダッシュボード「プラグイン」⇒「新規追加」から「Custom
「今すぐインストール」をクリックして、「有効化」
スタイルをダウンロード
公式サイトからスタイルをダウンロードします。
下の公式サイトのリンクをクリックします。
下にスクロールすると「デモサイト一覧ページへ」
01から09までのスタイルの中からお好きなスタイルを選んで「
「the-thor-child-export-demo0x.
解凍されたファイル名は「the-thor-child-
テーマのカスタマイズ設定のバックアップを取る
カスタマイザーの設定に変更を加える前でも、
ダッシュボード「外観」⇒「カスタマイズ」
WordPressプラグイン「Customizer Export/Import」
「書き出し」項目の「書き出し」ボタンをクリックして、
ファイル名は「the-thor-export-dat」
分かりやすい様にフォルダを作って保存しておきましょう。
これで着せ替えで上手く行かなかった場合に元の状態に戻せます。
スタイルをインポートする
次にスタイルをインポートします。
「エクスポート/インポート」のメニュー画面の「インポート」
スタイルファイルを選択したら、「
スタイルを再変更したい場合
デザインスタイルを変更して、
それぞれ詳しく説明しますね。
カスタマイズ設定をバックアップ
まずは新規で着せ替えする時と同様にカスタマイズ設定をバックア
デフォルトスタイルをダウンロード
マニュアルサイトを開き、初期設定メニューの「
「the-thor-child-export-
デフォルトスタイルをインポート
「エクスポート/インポート」メニューの「インポート」
これでデフォルト状態に戻りました。
着せ替えるデザインスタイルをダウンロードしてインポートする
次は通常の着せ替えと同じように任意のデザインスタイルをダウン
着せ替えをするたびに設定が上書きされるので注意してくださいね
スタイルを変更したら必ずする設定
着せ替えしたスタイルは、デモスタイルとして設定されています。
このままではTHE THOR（ザ・トール）
なのでデザイン着せ替え機能を使った後に、あなたのサイトに合わせた設定を行います。
変更・初期状態になった設定内容は、細かい所まで説明するとキリがないので、重要な箇所に絞って説明します。
- 《重要》サイトロゴの設定
- 検索機能設定
- タグ管理設定
- 自動生成サイトマップ設定
- パスワード保護ページ設定
- お問い合わせページ設定
- 《重要》アクセス解析設定
- セキュリティ関連設定
- 《重要》ユーザーID設定
- 《重要》ヘッダーエリア設定
- 《重要》ヘッダーボトムエリア設定［検索窓・お知らせ］
- 《重要》フッタートップエリア設定［CTA］
- 《重要》フッターエリア設定
- 固定フッターエリア設定[スマホ専用]
- 《重要》メインビジュアル設定
- 《重要》メインビジュアル下お知らせ設定
- カルーセルスライダー設定
- ピックアップ3記事設定
- 記事ランキング設定
- カテゴリ最新記事設定
- コントローラー設定
- アーカイブ用広告設定
- 個別ページ用広告設定
- TOPページSEO設定
- CSS非同期読み込み設定
- img非同期読み込み設定
- htaccess設定
- HTML圧縮設定
- OGP設定
- Follow設定
- AMPロゴの設定
- AMPページ用広告設定
- PWA機能設定
- （PWA)アイコンの設定
- サイトアイコン
- 追加 CSS
サイトロゴの設定
基本設定[THE]⇒「サイトロゴ」
サイトロゴがTHE THOR（ザ・トール）のロゴになっています。
あなた独自のロゴがある場合は変更し、
ロゴ画像がない場合はサイトタイトルが表示されます。
検索機能設定
基本設定[THE]⇒「検索機能設定」
「検索項目見出し設定」と「注目キーワードを設定」
特に「注目キーワードを設定」では、キーワードが「
タグ管理設定
基本設定[THE]⇒「タグ管理設定」
「独自項目の見出し設定」がデフォルトに戻っていますので、変更していた場合は再設定が必要です。
自動生成サイトマップ設定
基本設定[THE]⇒「自動生成サイトマップ設定」
除外IDやテキストなど、一部設定がデフォルトに戻っています。
パスワード保護ページ設定
基本設定[THE]⇒「パスワード保護ページ設定」
デフォルトのテキストに戻っていますので、変更していた場合は再入力が必要です。
お問い合わせページ設定
基本設定[THE]⇒「お問い合わせページ設定」
デフォルトのテキストに戻っていますので、変更していた場合は再入力が必要です。
アクセス解析設定
基本設定[THE]⇒「アクセス解析設定」
Google AnalyticsのトラッキングIDやGoogle Search Consoleの認証IDが、デフォルトの空欄に戻っているので再設定が必要です。
セキュリティ関連設定
基本設定[THE]⇒「セキュリティ関連設定」
デフォルトから変更している場合は、もとに戻っているので注意してください。
ユーザーID設定
基本設定[THE]⇒「ユーザーID設定」
デフォルトの空欄に戻っているので再設定が必要です。
ヘッダーエリア設定
共通エリア設定[THE]⇒「ヘッダーエリア設定」
「サブメニュー設定」で「注目ボタンのテキスト」と「
特に「ボタンのリンク先URL」はTHE THOR（ザ・トール）のサイトにリンクされているので、
ヘッダーボトムエリア設定［検索窓・お知らせ］
共通エリア設定[THE]⇒「ヘッダーボトムエリア設定［検索窓・お知らせ］」
「ヘッダーお知らせの表示設定」で「
フッタートップエリア設定［CTA］
共通エリア設定[THE]⇒「フッタートップエリア設定［CTA］」
「フッターCTAの表示設定」がTHE THOR（ザ・トール）のデモサイトと同じになっています。
フッターCTAを非表示にするか、内容を変更しましょう。
フッターエリア設定
共通エリア設定[THE]⇒「フッターエリア設定」
「コピーライトの設定」がデフォルトに戻っています。
こちらの記事を参考に変更してください。
WordPressテーマ【THE THOR（ザ・トール）】には、カスタマイズや設定できる項目が数多くあります。全ての項目を設定しようと思ったら、あまりの設定項目の多さに目が回ってしまって、記事作成する前に力尽きてしまいかねません[…]
固定フッターエリア設定[スマホ専用]
共通エリア設定[THE]⇒「固定フッターエリア設定[スマホ専用]」
自由設定リンクボタンの「タイトル」「リンク先URL」「アイコン」がデフォルトの空欄になっています。
メインビジュアル設定
TOPページ設定[THE]⇒「メインビジュアル設定」
「タイトル」「サブタイトル」「ボタンのテキスト」「ボタンのリンク先URL」などがデモ用に上書きされています。
メインビジュアルが静止画のスタイルの場合（スタイル02,04,08,09 ）
「静止画時の設定」の項目で「タイトル」「サブタイトル」「
メインビジュアルがYouTube背景動画の場合（スタイル01,05,07 ）
「YouTube背景動画時の設定」の項目で「タイトル」「
メインビジュアルがスライドショーの場合（スタイル03,06 ）
「スライドショー時の設定」の項目で「タイトル」「
変な画像を登録してますけど、適当に選んだ画像なので気にしないでね。
メインビジュアル下お知らせ設定
TOPページ設定[THE]⇒「メインビジュアル下お知らせ設定」
「キャッチコピー」「ボタンのテキスト」「ボタンのリンク先UR
カルーセルスライダー設定
TOPページ設定[THE]⇒「カルーセルスライダー設定」
指定IDが空欄に戻っているので、再設定が必要です。
ピックアップ3記事設定
TOPページ設定[THE]⇒「ピックアップ3記事設定」
見出しのテキストや記事IDなどが上書きされています。
記事ランキング設定
TOPページ設定[THE]⇒「記事ランキング設定」
見出しのテキストや指定IDなどが上書きされています。
カテゴリ最新記事設定
TOPページ設定[THE]⇒「カテゴリ最新記事設定」
見出しのテキストや指定IDなどが上書きされています。
コントローラー設定
アーカイブページ設定[THE]⇒「コントローラー設定」
「お勧めカテゴリの設定」のカテゴリIDや表記のテキストが上書きされています。
アーカイブ用広告設定
広告設定[THE]⇒「アーカイブ用広告設定」
アーカイブ用インフィード広告タグがすべてデフォルトに戻り空欄になっています。
個別ページ用広告設定
広告設定[THE]⇒「個別ページ用広告設定」
個別ページ用のアドセンスなどの広告タグがデフォルトに戻って空欄になっています。
TOPページSEO設定
SEO設定[THE]⇒「TOPページSEO設定」
OPページの<title>や<meta description>が変更されています。
CSS非同期読み込み設定
SEO設定[THE]⇒「CSS非同期読み込み設定」
各項目がデフォルト状態に戻っています。
img非同期読み込み設定
SEO設定[THE]⇒「img非同期読み込み設定」
デフォルト状態に戻っています。
htaccess設定
SEO設定[THE]⇒「htaccess設定」
デフォルト状態に戻っています。
HTML圧縮設定
SEO設定[THE]⇒「HTML圧縮設定」
デフォルト状態に戻っています。
OGP設定
SNS設定[THE]⇒「OGP設定」
設定した画像やIDなどが変更または削除されています。
Follow設定
SNS設定[THE]⇒「Follow設定」
各SNSのURLがTHE THORに変更されています。
AMPロゴの設定
AMP設定[THE]⇒「AMPロゴの設定」
AMP要のロゴがTHE THORのデモ用に変更されています。
AMPページ用広告設定
AMP設定[THE]⇒「AMPページ用広告設定」
AMPページ用のアドセンスなどの広告タグがデフォルトに戻って空欄になっています。
PWA機能設定
PWA設定[THE]⇒「PWA機能設定」
スマホのホーム画面に表示されるアイコン下のテキストが変更されています。
（PWA)アイコンの設定
PWA設定[THE]⇒「アイコンの設定」
スマホのホーム画面に表示されるアイコン画像がTHE THOR用に上書きされています。
サイトアイコン
サイト基本情報⇒「サイトアイコン」
サイトアイコンの画像がデフォルトに戻って消えてしまっています。
追加 CSS
追記したCSSがデフォルトに戻って消えています。
各スタイルの紹介
それでは最後に各デザインスタイルのデモサイトの簡単な紹介をしますね。
スタイル01
YouTube動画を使用したトップページのメインビジュアルが特徴のデザインスタイルです。
カルーセルスライダーとピックアップ記事が目を引きますね。
スタイル01デモサイト
スタイル02
静止画がトップページのデザインスタイルです。
サイドバーがなく、新着記事やカテゴリなどはフッター部にまとめられています。
スタイル02デモサイト
スタイル03
トップページのメインビジュアルがスライドショーになっているデザインスタイルです。
全体的にスッキリとした印象になっています。
スタイル03デモサイト
スタイル04
トップページのメインビジュアルが静止画になっていて、画像にマスクがかかっていて落ち着いた印象のデザインスタイルです。
スタイル04デモサイト
スタイル05
YouTube動画をメインビジュアルにしたデザインスタイルです。
個人的には一番カッコいいスタイルだと思っています。
情報発信系のポータルサイトなどに向いているスタイルかもですね。
スタイル05デモサイト
スタイル06
メインビジュアルの画像がクリック操作で入れ替わり、その動きがカッコいいデザインスタイルです。
カルーセルスライダーとピックアップ記事が目を引くデザインになっています。
スタイル06デモサイト
スタイル07
YouTube動画をメインビジュアルにしたデザインスタイルです。
特徴は各記事のアイキャッチ画像を非表示にして、全体的に文字が多めのスッキリ上品な雰囲気のデザインになっています。
スタイル07デモサイト
スタイル08
ランキングサイトにピッタリ、というかそまんまランキングサイトに特化したデザインスタイルです。
スタイル08デモサイト
スタイル09
アフィリエイターなら一番使うことの多いかもしれないデザインスタイルです。
商品紹介や口コミサイトなどに最適なデザインでしょう。
スタイル03デモサイト
まとめ
いかがでしょうか？
今回はTHE THOR（ザ・トール）の目玉機能「デザイン着せ替え機能」について解説しました。
01から09まで様々なスタイルが用意されていて、どれにしようか迷ってしまいますよね。
この記事を書くにあたって、スタイルを変えながら色々設定などを確認してみましたが、着せ替え機能を使うと多くの設定が変わってしまって、大変な思いをしてしまいました。
私の感想としては、デザイン着せ替え機能を利用する場合は、新規でサイトを立ち上げて各設定を行う前に着せ替えした方がかなり楽ですね。
運営途中で着せ替える場合は、しっかりと検討してデザインを着せ替えましょう。
それぞれのスタイルには特色があるので、あなたのブログに合った最適なスタイルを選んでください。