【初心者向け】THE THOR(ザ・トール)「デザイン着せ替え機能」設定方法&カスタマイズの仕方

1からテーマのデザインを設定するのめんどくさいな~。

最初からカッコいいデザインのサイト使いたい!!

初めてWordPress(ワードプレス)を利用する方でこういう悩みを持った方はいらっしゃるのではないでしょうか。

 

ワードプレス有料テーマの1つであるTHE THOR(ザ・トール)ですと、「デザイン着せ替え機能」という機能があり、こういう悩みを解決することができます。

 

今回は、そんな「デザイン着せ替え機能」についてどういうものなのか?スタイルのインストール方法、設定方法を解説していきます。

 

THE THOR(ザ・トール)が提供する「デザイン着せ替え機能」とは?

「デザイン着せ替え機能」というのは、THE THOR(ザ・トール)公式サイトで閲覧できるデモサイトと同じデザインのサイトを自分のワードプレス上にインストールできる機能です。

 

ワードプレスは、新規のテーマをインストールすると最低限のデザインで完成されているサイトが作成されます。

 

基本的に最低限のデザインでも問題ないのですが、それだと味気ないサイトでデザインもシンプルですので、どうせならプロが制作したようなサイトに見せたいと思うのが普通だと思います。

 

そこで、THE THOR(ザ・トール)の「デザイン着せ替え機能」の出番です。

 

「デザイン着せ替え機能」を使用すれば、ワードプレス初心者でも最初からプロが制作したようなカッコいいデザインのサイトを作ることができます。

デモサイトのスタイルは現在9種類

THE THOR(ザ・トール)の公式サイトで公開されているデモサイトは9つになります。

 

現時点で9種類ですのでこれから増える可能性もありますが、9つもあれば自分好みのデザインは見つかるかと思います。

 

参考までに1サイトだけ確認してみます。

非常にカッコいいデザインのサイトですね。ちょっとしたITベンチャー企業のサイトを彷彿させるようなサイトです。

 

1から作ってと言われると難しそうに思えますが、「デザイン着せ替え機能」を使用すれば、初心者でも簡単に同様のデザインのサイトを作成することができるのがこの機能の素晴らしいところだと思います。

 

では、引き続きデモサイトのスタイルのダウンロード及びワードプレスへインストール方法を説明していきますね。

デモサイトのスタイルのダウンロード方法

デモサイトのスタイルは、THE THOR(ザ・トール)の公式サイトでダウンロード可能です。

公式サイトへアクセスします。

サイト上部の項目欄に「デモサイト一覧」とありますので、こちらをクリックします。

 

画面がデモサイト選択画面に遷移します。

「デモサイトへ」をクリックすれば、それぞれのデモサイトのデザインを確認することができますので、自分好みのデザインを探します。

 

好みのデザインが決まりましたら、デモサイト一覧の画面でダウンロードしたいデモサイトの「スタイルダウンロード」をクリックします。

 

スタイルのダウンロードが開始します。ダウンロードは数秒で終了します。

 

スタイルのダウンロードが完了しましたら、以下の形式のファイルがダウンロードされているか確認してください。

・the-thor-child-export-demo”XX”.zip

※”XX”の数字は、スタイルの番号によって変わります。

 

上記形式のファイルがダウンロードされていればOKです。

 

ダウンロードしたファイルは、zip形式で圧縮されており、そのままでは使用できませんので、解凍しておきましょう。

 

ファイルの解凍は、右クリック「すべて展開」などで解凍することができます。

 

解凍後のファイルが以下です。

・the-thor-child-export-demoXX

後ほどワードプレス上へスタイルをインストールする際はこちらのファイルを使用しますので、分かりやすいところに保管しておきましょう。

 

続いてダウンロードしたスタイルをワードプレス上へインストールする方法について説明していきます。

WordPress(ワードプレス)へのスタイルのインストール(インポート)方法

スタイルのインストールは、通常のテーマをインストールする方法とは異なり、プラグインを使用してインストールします。

 

今回使用するプラグインは「Customizer Export/Import」というプラグインになります。

 

ワードプレス上で「プラグイン」→「新規追加」を選択します。

 

検索欄に「Customizer Export/Import」と入力します。

すると、上記のプラグインが表示されます。こちらのプラグインをインストール及び有効化します。

 

有効化まで完了しましたら、「外観」→「カスタマイズ」を選択します。

 

左側に設定項目が表示されますが、設定項目の一番下を確認してください。

プラグインを有効化するまでは、存在しなかった「エクスポート/インポート」という項目が増えていると思います。

 

「エクスポート/インポート」を選択します。

「書き出し」と「インポート」とあると思いますが、今回は「インポート」を使用します。

 

「ファイルを選択」から先程ダウンロードしたデモサイトのスタイルを選択します。

 

「画像ファイルをダウンロードしてインポートしますか ?」にチェックを入れます。

※チェックを入れないと不具合が起こる可能性があるので必ずチェックを入れましょう。

 

あとは、「インポート」をクリックすれば、ワードプレス上のサイトがデモサイトと同様のデザインに変わります。

 

以上で、「デザイン着せ替え機能」を利用したデモサイトのスタイルをインポートする作業は終了です。

お疲れ様でした。

インポート後の設定は?

スタイルのインポート後は、基本的にそのまま使用していただいて問題ありませんが、画像や表示などはデモサイトのままなので修正しなければいけません。

 

今回は修正箇所の説明は省きますが、全て設定の項目で修正できますので自サイトを確認しつつ修正してください。

 

また、インポートしたデザインが気に食わなかったり、細かい表示やデザインを変えたい場合、再度別のスタイルをインポートすることや設定を変更することも可能です。

 

デモサイトのスタイルを元に自分だけのオリジナルのサイトを作成しましょう。

最後に 初心者はデモサイトのスタイルを利用するのがおすすめ!!

いかがだったでしょうか。

 

今回は、ワードプレス有料テーマTHE THOR(ザ・トール)の「デザイン着せ替え機能」の使い方を紹介しました。

 

初心者の方でも簡単にプロが制作したようなサイトを作成することができるのが「デザイン着せ替え機能」でしたね。

 

これからTHE THOR(ザ・トール)の購入を考えている方や1からプロが制作したようなサイトを作りたい方は是非「デザイン着せ替え機能」を利用してみてください。

 

完全無料!!】未経験からエンジニアになりたい人向けのITスクールProEngineer

未経験からIT業界に転職したい

プログラマーになってフリーで活躍したい

エンジニアになりたいけどスクールに通うお金がない

安心・安全なスクールで学びたい

こんな希望を叶えてくれるのがProEngineer

◆特徴

全て無料(受講料、テキスト代等)

途中で辞めたとしてもOK

インフラ、プログラミング好きな方を選択できる(エンジニアカレッジ・プログラマカレッジ)

最短2ヵ月でエンジニアになれる

資格が取れる(条件付)

手厚い就職支援付き


 

ProEngineer(エンジニアカレッジ・プログラマカレッジ)の公式サイトはこちら

この記事がいいな!と思ったらフォローどうぞ!!