THE THOR（ザ・トール）のカスタマイズを解説 – 有料WordPressテーマ

THE THORは、デザインの着せ替え機能や、管理画面（カスタマイザー）からの細かな設定変更が豊富で、初心者でもカスタマイズしやすいのが特徴です。

主なカスタマイズ方法と設定できる項目をまとめます。

主なカスタマイズ方法

1. デザイン着せ替え機能（推奨）

デモサイトのデザインを丸ごと自分のサイトに適用できる機能です。

1. プラグインのインストール: 「Customizer Export/Import」というプラグインをインストールして有効化します。
2. 着せ替えファイルのダウンロード: THE THORの公式デモサイトから、適用したいデザインの「スタイルダウンロード」ボタンをクリックしてファイルをダウンロードします（.zipまたは.datファイル）。
3. インポート: WordPressのダッシュボードから「外観」→「カスタマイズ」→「エクスポート/インポート」に進み、ダウンロードしたファイルをインポートします。
   • 注意点: 設定が上書きされるため、事前に設定を済ませている場合はバックアップをとるか、設定前に着せ替えを行うことをおすすめします。デフォルトデザインに戻すファイルも公式マニュアルからダウンロードできます。

2. WordPressカスタマイザーからの設定

ダッシュボードの「外観」→「カスタマイズ」から、色、レイアウト、フォントなどの詳細な設定を変更できます。

• 基本設定: テーマカラー、全体の背景色、投稿内のテキストリンクの色などを設定。
• レイアウト設定: 2カラム/1カラムの選択、サイドバーの位置などを設定。
• ヘッダー/フッター設定: ロゴ画像、メニュー、フッターのデザインなどを設定。
• 投稿ページ設定: 目次の表示方法やデザイン、記事タイトルのデザイン（ノーマル、バイラル風など）などを設定。
• パーツスタイル: 見出しのデザイン（H2, H3など）、ボックスやボタンなどの装飾パーツのデザインを設定。

3. ウィジェットの利用

記事一覧や広告、プロフィールなどのパーツを、サイドバーやフッターなどの指定された場所に配置できます。「[THE]広告」や「[THE]スタイルテキスト」など専用のウィジェットが豊富に用意されています。

4. 追加CSS

カスタマイザーの「追加CSS」や、テーマエディターのstyle-user.cssファイルにCSSコードを追記することで、さらに細かいデザイン調整（目次の罫線、記事カードのレイアウトなど）が可能です。

初めにチェックしたいおすすめ設定

設定項目	主な内容	設定場所
テーマカラー	サイト全体で使われるメインカラーの指定。	外観 > カスタマイズ > 基本設定 > 基本スタイル設定
レイアウト	サイト全体のカラム数（1 or 2）とサイドバーの位置。	外観 > カスタマイズ > アーカイブページ設定 > レイアウト設定
目次設定	目次の自動表示設定やタイトル、デザイン。	外観 > カスタマイズ > 投稿ページ設定 > 目次設定
見出しデザイン	H2, H3などのデザインテンプレートの選択。	外観 > カスタマイズ > パーツスタイル[THE] > 見出し設定
SEO高速化	CSSや画像の非同期読み込み、HTML圧縮など。	外観 > カスタマイズ > SEO設定[THE] > 高速化設定

テーマカラーの変更手順

WordPressテーマのTHE THOR（ザ・トール）のテーマカラーを変更する方法は、主に「基本スタイル設定」から行います。

基本的なサイト全体のテーマカラー（メインカラー）の変更は、以下の手順で行います。

1. WordPressの管理画面にログインします。
2. 「外観」 > 「カスタマイズ」をクリックします。
3. カスタマイザー画面で「基本設定[THE]」 > 「基本スタイル設定」に進みます。
4. 「テーマカラーを指定」の項目にある「色を選択」ボタンをクリックします。
5. カラーピッカーが表示されるので、お好みの色を選択するか、色の横にある入力欄にカラーコード（例: #00a568）を直接入力します。
6. 画面上部の「公開」ボタンをクリックして変更をサイトに反映させます。

テーマカラーが適用される主なエリア

この設定で変更したテーマカラーは、サイト全体の統一感を出すために、以下のような複数の場所に適用されます（テーマのデザインにより異なります）。

• ヘッダーの背景カラー
• ウィジェットの見出し背景カラー
• カテゴリー名の背景カラー
• タグ管理のボタンカラー
• アイキャッチ上のカテゴリーカラー

その他の色の変更

テーマカラー以外にも、以下の場所の色を個別に設定できます。

全体の背景色

1. 「外観」 > 「カスタマイズ」 > 「基本設定[THE]」 > 「基本スタイル設定」に進みます。
2. 「全体の背景色を指定」の項目で色を選択・指定します。

ヘッダーの背景色

1. 「外観」 > 「カスタマイズ」 > 「共通エリア設定[THE]」 > 「ヘッダーエリア設定」に進みます。
2. 「ヘッダーの背景色を設定」の項目で色を選択・指定します。

ボックスやボーダーの色

投稿内のボックスやボーダー、サブタイトルの色を変更したい場合は、通常は以下の設定で行います。

• 「外観」 > 「カスタマイズ」 > 「パーツスタイル設定[THE]」 > 「ボックス設定」や「その他エディタ用パーツ設定」

💡 補足: THE THORでは、記事内の特定のパーツの色を変更するために、CSSファイル（子テーマのstyle-user.cssや「追加CSS」）にカラーコードを指定したCSSを追記するカスタマイズが必要になる場合もあります。

目次のデザイン

THE THORは、デフォルトで目次機能を持っているため、プラグインなしで目次を表示・設定できます。目次のデザインをカスタマイズする主な方法は、「追加CSS」にコードを記述することです。

主な目次設定とデザインカスタマイズ

1. デフォルト設定
   • 設定場所: 「外観」→「カスタマイズ」→「投稿ページ設定[THE]」→「目次設定」
   • 設定内容の例:
     • 目次を表示するか選択: 「表示する」を選択
     • 目次を表示するための最小見出し数
     • 目次に表示する見出しのレベル（h2〜h5など）
     • 目次パネルをデフォルトで閉じておくか
2. デザインカスタマイズ
   • 方法: 「外観」→「カスタマイズ」→「追加CSS」にCSSコードを記述する。
   • デザインの例:
     • ボックスデザイン: 背景色や枠線の色、角の丸みを変更する。
     • フォント: Googleフォントなどを使用して、見出しのフォントを変更する。
     • 色変更: タイトル文字、背景色、枠線色、リスト（リンク）の色を変更する。
     • 他テーマ風: 人気テーマ（例：サルワカ風/SANGO風など）のデザインを模倣したCSSコードが公開されていることもあります。
     • グラデーション: 背景にグラデーションを設定する。

記事のレイアウト

主な記事レイアウトと装飾に関する特徴は以下の通りです。

記事ページの基本的なレイアウト

• カラム設定の自由度:
  • 1カラム または 2カラム を選択できます。
  • 2カラムの場合、サイドバーの位置を右または左に設定可能です。
  • ページの単位でサイドバーの有無を変更することもできます。
• メインカラムの横幅調整:
  • 100％、1000px、900px、800px、700pxなど、メインカラムの横幅を設定できます（固定ページや投稿ページの設定による）。

記事内の装飾・パーツ機能

記事の読みやすさを向上させるための機能が「スマートエディター機能」として提供されています。

• 見出しデザイン: 53種類から選べる美しいデザインの見出しがあります。
• 記事パーツ:
  • アイコン: 498種類のアイコンで記事を華やかに彩れます。
  • マーカー、ボックス、ボタン、ラベル: デザインが豊富で、ワンクリックで設置可能です。
  • プリセットパーツ: 口コミ、レビュー、会話風の吹き出しなど、便利なパーツが用意されています。
• カラム機能:
  • 記事内で、文章やパーツを2カラムや3カラム、4カラムなどに分割して表示するレイアウト機能があります。

収益化・導線に関するレイアウト

• CTA（行動喚起エリア）の設置:
  • 記事を読んだ直後のユーザーを誘導するため、記事下の目立つ位置にCTAを簡単に設置できます。デザインの種類もいくつか選べます。
  • CTA管理機能を使って、複数のCTAを作成し、記事ごとに表示を切り替えることも可能です。
• 広告配置の最適化:
  • インフィード広告やダブルレクタングル広告など、収益性の高い広告を記事に溶け込ませた形で、クリックされやすい位置に配置できます。

記事全体のカラム設定は、「外観」→「カスタマイズ」の「投稿ページ設定[THE]」や「固定ページ[THE]」の「レイアウト設定」から行うことが多いです。

🛒 THE THOR（ザ・トール）の購入手順

購入は、THE THORの公式サイトから行うのが一般的です。

大まかな流れは以下の通りです。

1. 公式サイトにアクセスする
   • 「THE THOR（ザ・トール）」の公式販売ページにアクセスします。
2. 購入プランを選択する
   • 多くの方が選ぶのは、テーマ本体とサポートが付いた**「テーマ＆サポートプラン」（通常価格：16,280円 税込）**です。
   • サーバーやドメインの契約、WordPressのインストール代行もまとめて行いたい場合は、「らくらくサーバーセットプラン」もありますが、こちらは年間費用などが別途発生します。
3. 「テーマを購入する」または「カードで購入する」ボタンをクリックする
   • 選択したプランの下にある購入ボタンをクリックします。
4. 決済手続きを行う（infotop）
   • 販売は「infotop（インフォトップ）」というASP（アフィリエイト・サービス・プロバイダ）を介して行われます。
   • infotopの会員登録（初回のみ）と、支払い方法（クレジットカード、銀行振込など）を選択し、決済を完了します。
5. 購入完了メールを確認する
   • 登録したメールアドレスに、購入完了とテーマのダウンロード手順に関するメールが届きます。
6. テーマファイルをダウンロードする
   • メール内の案内に従ってinfotopの購入者ログインページにアクセスします。
   • ログイン後、「注文履歴ダウンロード」などから、THE THORのテーマファイル（親テーマと子テーマの2つのzipファイル）をダウンロードします。

これでテーマの購入とファイルダウンロードは完了です。

ダウンロード後の流れ

ダウンロードしたファイルは、ご自身のWordPressにインストールして有効化することで利用できるようになります。