The・THOR

The・THORのデザイン着せ替え機能をカスタマイズ!【WordPress】

更新日:

The・THORをインストール後、「デザイン着せ替え機能」でカスタマイズされる方も多いでしょう。

 

この着せ替え機能の元になるのがTHORのデモサイトなので、広告が入っていてそのままでは使えません。

 

ところが、どこに設定項目があるのか分からず、かえって余計に時間がかかってしまうことも。

おじさん
記事を早く書きたい方は、ノーマルで始めるのをオススメします

 

今回は、着せ替え機能を使ったThe・THORのカスタマイズについて説明します。

 




 

着せ替えるデザインのインストール

 

まず初めにThe・THORのデモサイト でお好きなデモサイトを選び、「スタイルダウンロード」をクリックします。どのデザインもTHORの機能で作られているので、後で欲しい機能を足したり削ったり出来ます。

 

おじさん
着せ替えはTHOR+αではなく、全てTHORの機能という意味です

今回はデモ04のスタイルをダウンロードします。

 

ダウンロードした圧縮ファイルは、そのままではアップロードできません。ファイルを開いて、中のファイルをデスクトップなど別の場所に置いておきます。

 

WordPressに、ファイルをアップロードする「Customizer Export/Import」というプラグインをインストールします。

 

プラグインのインストールについて分からない方は、 コチラの記事を参考にしてみてください。

 

インストールしたら有効化しておきます。

 

次に「外観」→「カスタマイズ」をクリックします。

 

一番下に「エクスポート/インポート」という項目があるのでクリックします。

 

先ほどデスクトップなどに置いたファイルを選択し、「画像ファイルをダウンロードしてインポートしますか?」にチェックを入れてインポート(アップロード)します。

 

カスタマイズの前に

 

テーマのカスタマイズは、カスタマイザー(「外観」→「カスタマイズ」)で行ないます。

 

カスタマイズ出来る場所は次のように分かれています。今回は上から順番にカスタマイズしていきます。

注意子テーマが有効になっているのを確認してからカスタマイズしましょう。

 

 

テーマカラー、背景の設定

 

その前にテーマカラー背景色を先に決めておきます。

これを先に決めておかないと、全体のイメージがブレて何度もやり直しすることになります
うさぎ
おじさん
下のサイトのロゴも先に決めないといけませんね

 

カスタマイザー」→「基本設定」→「基本スタイル設定」でテーマカラーを変更します。

 

設定方法は 基本スタイル設定の記事を参考にしてみてください。

 

わたしは、テーマカラーをグリーン系にして、方眼紙の背景を入れ、 メインカラムを白色にしました。

 




 

ヘッダーエリアのカスタマイズ

 

まず、ロゴ画像を変更します。

 

設定方法は「 サイトロゴ設定」にまとめています。

 

サイトロゴ以外のヘッダーの色や配置は「 ヘッダーエリア設定」で変更できます。

 

ついでに「テーマダウンロード」と書かれたリンクも、「ヘッダーエリア設定」→「サブメニュー設定」で消すか別のリンクを設定しておきます。

 

ここまでで、この様に変更できました。

 

デモ04には設定されていませんが、ヘッダーの下に流れる文字などを入れたいときは「 ヘッダーボトムエリアの設定」を参考にしてみてください。

 

メインビジュアルの設定

 

次のヘッダー下の大きな画像は「 メインビジュアル設定」を参考に変更します。

 

メインビジュアルは、他のデモサイトのようにYouTubeやスライドショーにも変更できます。

 

こんな感じになりました。

 

デモ04には設置されていませんが、メインビジュアルの下にリンクを設置するスペースがあります。

 

設置するときは「 メインビジュアル下の注目エリア設定」の記事を参考にしてみてください。

 

 

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

 

メインビジュアルの下のカルーセルスライダーは、「TOPページ設定」→「 カルーセルスライダー設定」で設定します。

 

最初の記事がない状態では、カルーセルスライダーに「No Image」と表示されてしまいます。

 

NO IMAGE画像の設定」で画像を設定しておくと、イメージがつかみやすいかも知れません。

 

また、デモ04はサムネイル画像が白黒になるように設定されています。

 

画像をカラーや他の色にしたいときは、「 アイキャッチホバーエフェクトの設定」を変更してください。

 

フッタートップエリアの設定

 

フッター(ページの下の方)もThe・THORの広告があるので、消すか別の広告を入れてください。

 

おじさん
そのままThe・THORの広告でも構いませんが

 

カスタマイザーの「 フッタートップエリア設定」で編集できます。

 

コピーライトの設定

 

コピーライト(著作権の表示)は、記事の一番下にあります。

 

カスタマイザーの「 フッターエリア設定」で編集できます。

おじさん
全部消してみました

 

固定フッターエリア

 

固定フッターエリアとは、スマホにだけ表示されるアイコンのメニューです。

 

電話も載っているので、「 固定フッターエリアの設定」で編集しておきましょう。

 




 

まとめ

 

The・THORは機能が多いのは嬉しいのですが、どこを編集したら良いのか分からなくなってしまうことも。

 

今回の設定をしておけば、とりあえず記事を公開できる状態になると思います。

 

あとは徐々にカスタマイズしていきましょう!

 

ブログはテーマでも速くなります

 

-The・THOR

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.