デモサイトをインストール

「THE THOR」デモサイトをインストールする方法と注意点

  • 2021年9月10日
  • 2021年9月13日
  • THOR
 
ハテナザウルス
初心者でも簡単におしゃれなサイトを作れる方法ってないのかな~。
 
ヒラメキザウルス
THORの「デザイン着せ替え機能」で簡単にできるよ!

おしゃれなサイトを簡単に作たいと思う方は多いのではないでしょうか。

そのような方へ向けて、THORの「デザイン着せ替え機能」がおすすめです。

これは「プロのデザイナーが制作したサイト」の中から好きなデザインを選んで、自分のサイトへインストールして、そのまま使用できるサービスです。

この記事では、THORを使い始めたばかりの方へ向けて、デモサイトで着せ替えをする方法をまとめていきます。

ぜひ参考にご覧になっていってください。

 
ヒラメキザウルス
着せ替えのやり方を解説します!

着せ替えを行うための準備

まずは準備として、

  • 公式サイトから目的のデザインのサイトをダウンロードします。
  • 自サイトへインストールするためのプラグインを準備します。

一つ一つやり方を解説していきます。

公式サイトから好きなデザインをダウンロードする。

まずは公式サイトのデモサイト一覧ページへ行ます。

お好みのデザインのサイトをダウンロードしましょう。

「THE THOR」のデモサイト一覧へ
THORのデモサイト一覧

ご覧の通り、デモサイトは全部で9種類あります。

この中から好きなデザインのものを探して選びましょう。

<デモサイトへ>のボタンでサイトのプレビューを開くことが出来ます。

<スタイルダウンロード>を押して、ファイルをダウンロードします。

 
ハテナザウルス
どれもプロのデザイナーが制作したサイトなんだね。
デモサイトdatファイル

zipファイルの中に、datファイルが入っています。

サイトの着せ替えには、こちらのファイルを使用します。

プラグインをインストールしよう

以下のプラグインをインストールします。

Customizer Export/Import

プラグインをインストールする手順。

まずは「プラグイン」から「新規追加」です。

新規追加の画面へ行ったら「Customizer Export/Import」で検索します。

「Customizer Export/Import」を「インストール」しましょう。

このプラグインをダウンロード

有効化を忘れずにしましょう。

これでプラグインの準備は完了です。

 
ヒラメキザウルス
これでいつでも着せ替えが出来ます。

デモサイトを自サイトにインストールする方法

先ほど、公式サイトでダウンロードしたファイルを自サイトへインストールします。

自サイトへインストールする手順。

まずは「外観」から「カスタマイズ」のページを開きます。

外観からカスタマイズを選択

カスタマイズ画面の一番下ににある「エクスポート/インポート」を選びます。

エクスポート/インポートを選択

「ファイルの選択」からデモサイトのファイルを選択します。

最後に「インポート」を押せば自サイトの着せ替えが完了です。

画像ファイルをダウンロードしてインポートしますか?のチェックをつけることで、デモサイトと同じ画像をインストールできます。

ファイルの選択からインポート

以上でデモサイトを自サイトへインストールする手順が完了です。

 
ハテナザウルス
これで、デモサイトの着せ替えができたぞ~。

着せ替えを行う際の注意点

着せ替えを行う注意点をお伝えします。

不安な方はバックアップの準備をおすすめします。

【注意】

※自サイトの見た目がデモサイトそのままになります。

カスタマイズに関する設定が全て上書きされるので注意しましょう。

(今までの自分の投稿が消えたりはしません。)

例えば「デモサイト01」へ着せ替えを行った場合。

デモサイト01

その人のブログのテーマとは関係なく、デモサイトで使われているキャッチコピー等がそのまま使われていますね。

ブログのタイトルも「THE THOR」となっています。

デモサイトのままになっていますね。

 
ハテナザウルス
デモサイトのままなのか。困ったぞ。

デモサイトを自サイトに会わせて修正する方法

サイトのトップ画面、お知らせの文章などは、デモサイトがそのままコピーされていますね。

これらを自分のサイトに合わせて直す必要があります。

THORエリア区域

「THE THOR」で作られたサイトでは、このようにエリアが区切られています。

「外観」>「カスタマイズ」から対応するエリアの設定を開いて、気になる個所を直せます。

 
ヒラメキザウルス
「カスタマイズ」でエリアごとに調整しよう。

実際に「デモサイト01」の調整をする場合

カスタマイズの「TOPページ設定」を開きます。

タイトルの文字やトップ画像を変える設定>「メインビジュアル設定」

トップ画像の下の文章を変える設定>「メインビジュアル下お知らせ設定」

こちらの設定で文章を差し替えたり消したりすることが出来ます。

メインビジュアル設定

「デモサイト01」の場合は「ヘッダーボトムエリア」で左へ流れていく文字もあります。

「共通エリア設定」を開きます。

左へ流れてくメッセージの設定>「ヘッダーボトムエリア設定」

ヘッダーボトムエリア
 
ハテナザウルス
細かく設定できるんだね。

全体のまとめ

この記事では、初心者でも簡単におしゃれなサイトを作ることが出来る方法として、THE THORの「デザイン着せ替え機能」の使い方を紹介しました。

着せ替えを行う準備。

  • デモサイトからお気に入りのデザインをダウンロードする。
  • Customizer Export/Importのプラグインを有効化する。

これらを自サイトへインストール手順。

「外観」>「カスタマイズ」>「インポート/エクスポート」

デモサイトの着せ替えを行う注意点。

  • 自サイトの見た目がデモサイトそのままになってしまう。
  • カスタマイズに関する設定が全て上書きされてしまう。
  • 心配な方はバックアップの準備をしましょう。

デモサイトをインストールした後は、自分のサイトに会わせてカスタマイズしましょう。

サイトの対応エリアごと、カスタマイズの設定が行える。

 
ヒラメキザウルス
サイトの着せ替え楽しんでくださいね!

当ブログで使用中のテーマ「THE THOR」はこちら