THE THOR（ザ・トール）のパーツスタイルの使い方と一覧を作ってみたよ！

今回はコンテンツ作成に欠かせないTHE THOR（ザ・トール）のパーツスタイルの使い方と一覧を説明していきます。

THE THOR（ザ・トール）は様々な機能が豊富で、どこで何をやるのか私でも混乱することもしばしば。

忘備録的な感じで書いていきますので、記事をどんどん更新していきます。

結構なボリュームの記事になってますが、目次などで必要な箇所を選んで読んでくださいね。

スタイル

パーツスタイル「スタイル」は投稿編集画面のツールバーから選択できます。

マーカー

マーカーはデフォルトで「太さ３種、カラー６種」から選ぶことができます。

マーカー（太）レッド　　マーカー（中）レッド　　マーカー（細）レッド

マーカー（太）ブルー　　マーカー（中）ブルー　　マーカー（細）ブルー

マーカー（太）イエロー　　マーカー（中）イエロー　　マーカー（細）イエロー

マーカー（太）ピンク　　マーカー（中）ピンク　　マーカー（細）ピンク

マーカー（太）グリーン　　マーカー（中）グリーン　　マーカー（細）グリーン

マーカー（太）グレー　　マーカー（中）グレー　　マーカー（細）グレー

よく使うマーカーを登録

よく使うマーカーを１つ登録して簡単に使用することができます。

設定はカスタマイザー「パーツスタイル設定［THE］」⇒「マーカー設定」で変更できます。

ラベル

角丸レッドラベル

シンプルボーダーラベル

ライム左ラウンドラベル

ブルーボーダーラウンドラベル

丸アイコンラオレンジラベル

ピンクアイコンラベル

四角アイコンラベル

破線ボーダーアイコンラベル

ビッグ右ラウンドブルーラベル

ターコイズグラデ右寄せラベル

ボタン

ボタンはデフォルトで10種用意されています。

オレンジ100％ボタン

グリーンシャドウ100％ボタン

ブルーボーダーボタン

ブルーグラデボタン

ピンクアイコンボタン

ピンクグラデアイコンボタン

グリーン立体アイコンボタン

グレーラウンドアイコンボタン

サークルアイコンボタン

ボックスアイコンボタン

ボックス

ボックスはデフォルトで10種用意されています。

ボックス内ボックス

ボックス内ボックスはデフォルトで10種用意されています。

プリセットパーツ

パーツスタイル「プリセットパーツ」は投稿編集画面のツールバーから選択できます。

区切り線

区切り線を表示させます。

「実線」

区切り線「破線」

区切り線「点線」

吹き出し

吹き出しを挿入することができます。

この吹き出し画像はカスタマイザーから変更することができます。

ちなみに下の「ボーダースタイル」はカスタマイザーで変更させました。

関連記事

【THE THOR（ザ・トール）】吹き出し画像の変更方法と使い方

THE THOR（ザ・トール）にはデフォルトで会話風の吹き出し機能が備わっています。しかし、2019年３月現在では吹き出し画像と画像の名前を設定で変更することができません。 バージョン1.4.0より画像の変更が可能にな[…]

左画像（ボーダースタイル）

右画像（背景スタイル）

右画像（ボーダースタイル）

スコアボックス

デフォルトで６色のスコアボックスを挿入することができます。

最終行の「総合」のみ色が変更になっています。

最終行（レッド）

項目名	3.5
項目名	3.5
項目名	3.5
項目名	3.5
総合	3.5

最終行（ ブルー）

項目名	3.5
項目名	3.5
項目名	3.5
項目名	3.5
総合	3.5

 最終行（イエロー）

項目名	3.5
項目名	3.5
項目名	3.5
項目名	3.5
総合	3.5

最終行（ピンク）

項目名	3.5
項目名	3.5
項目名	3.5
項目名	3.5
総合	3.5

最終行（グリーン）

項目名	3.5
項目名	3.5
項目名	3.5
項目名	3.5
総合	3.5

最終行（グレー）

項目名	3.5
項目名	3.5
項目名	3.5
項目名	3.5
総合	3.5

口コミボックス

背景とボーダーの２種とカラー６色の口コミボックスを挿入することができます。

背景（レッド）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景（ブルー）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景（イエロー）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景（ピンク）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景（グリーン）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景（グレー）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー（レッド）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー（ブルー）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー（イエロー）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー（ピンク）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー（グリーン）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー（グレー）

口コミ

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

---

東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

レビューボックス

背景スタイルとボーダースタイルの2種のレビューボックスが挿入できます。

背景スタイル

このエリアにレビュータイトルを記入します。

N.Sさん

評価： 3.5このエリアにレビュー本文を記入します。

ボーダースタイル

このエリアにレビュータイトルを記入します。

N.Sさん

評価： 3.5このエリアにレビュー本文を記入します。

アコーディオンボックス

背景スタイルとボーダースタイルの2種のアコーディオンボックスが挿入できます。

背景スタイル

タイトル

Hこのエリアにレビュー本文を記入します。

ボーダースタイル

タイトル

Hこのエリアにレビュー本文を記入します。

共通ボタン

パーツスタイル「共通ボタン」は投稿編集画面のツールバーから選択できます。

プライマリボタン

右

リンクテキスト

中央

リンクテキスト

左

リンクテキスト

セカンダリボタン

右

リンクテキスト

中央

リンクテキスト

左

リンクテキスト

ノーマルボタン

右

リンクテキスト

中央

リンクテキスト

左

リンクテキスト

共通ボタンのカスタマイズ

共通ボタンはカスタマイザーの「パーツスタイル設定［THE］」⇒「共通ボタン設定（全ページ用）」で文字色と背景色が変更できます。

カラム

パーツスタイル「カラム」は投稿編集画面のツールバーから選択できます。

２カラム１：１（PC+スマホ）（PC）

２カラム１：１（PC+スマホ）（PC）

２カラム１：１（PC+スマホ）（PC）

２カラム３：７（PC+スマホ）（PC）

２カラム３：７（PC+スマホ）（PC）

２カラム３：７（PC+スマホ）（PC）

２カラム７：３（PC+スマホ）（PC）

２カラム７：３（PC+スマホ）（PC）

２カラム７：３（PC+スマホ）（PC）

３カラム（PC）

３カラム（PC）

３カラム（PC）

３カラム（PC）

４カラム（PC）

４カラム（PC）

４カラム（PC）

４カラム（PC）

４カラム（PC）

ちょっと雰囲気が分からないかもしれませんね。

投稿編集画面の方がまだ分かりやすいかも。

ショートコード

パーツスタイル「ショートコード」は投稿編集画面のツールバーから選択できます。

目次

任意の箇所に以下のショートコードを入力すると目次を表示させることができます。

そのまま表記すると目次が表示されるので全角で書いています、実際に入力する際は半角英数で入力してくださいね。

[ｏｕｔｌｉｎｅ]

目次

• 1 スタイル
  • 1.1 マーカー
  • 1.2 よく使うマーカーを登録
  • 1.3 ラベル
  • 1.4 ボタン
  • 1.5 ボックス
  • 1.6 ボックス内ボックス
• 2 プリセットパーツ
  • 2.1 区切り線
    • 2.1.1 「実線」
    • 2.1.2 区切り線「破線」
    • 2.1.3 区切り線「点線」
  • 2.2 吹き出し
  • 2.3 スコアボックス
    • 2.3.1 最終行（レッド）
    • 2.3.2 最終行（ ブルー）
    • 2.3.3  最終行（イエロー）
    • 2.3.4 最終行（ピンク）
    • 2.3.5 最終行（グリーン）
    • 2.3.6 最終行（グレー）
  • 2.4 口コミボックス
    • 2.4.1 背景（レッド）
    • 2.4.2 背景（ブルー）
    • 2.4.3 背景（イエロー）
    • 2.4.4 背景（ピンク）
    • 2.4.5 背景（グリーン）
    • 2.4.6 背景（グレー）
    • 2.4.7 ボーダー（レッド）
    • 2.4.8 ボーダー（ブルー）
    • 2.4.9 ボーダー（イエロー）
    • 2.4.10 ボーダー（ピンク）
    • 2.4.11 ボーダー（グリーン）
    • 2.4.12 ボーダー（グレー）
  • 2.5 レビューボックス
    • 2.5.1 背景スタイル
    • 2.5.2 ボーダースタイル
  • 2.6 アコーディオンボックス
    • 2.6.1 背景スタイル
    • 2.6.2 ボーダースタイル
• 3 共通ボタン
  • 3.1 プライマリボタン
    • 3.1.1 右
    • 3.1.2 中央
    • 3.1.3 左
  • 3.2 セカンダリボタン
    • 3.2.1 右
    • 3.2.2 中央
    • 3.2.3 左
  • 3.3 ノーマルボタン
    • 3.3.1 右
    • 3.3.2 中央
    • 3.3.3 左
  • 3.4 共通ボタンのカスタマイズ
• 4 カラム
  • 4.1 ２カラム１：１（PC+スマホ）（PC）
  • 4.2 ２カラム３：７（PC+スマホ）（PC）
  • 4.3 ２カラム７：３（PC+スマホ）（PC）
  • 4.4 ３カラム（PC）
  • 4.5 ４カラム（PC）
• 5 ショートコード
  • 5.1 目次
  • 5.2 記事内広告
  • 5.3 カテゴリ指定記事一覧（新着順）
  • 5.4 カテゴリ指定記事一覧（ランダム順）
  • 5.5 カテゴリ指定記事一覧（ランク順）
  • 5.6 ブログカード（外部サイトリンク）
  • 5.7 ブログカード（内部記事リンク）
  • 5.8 カスタムメニュー
  • 5.9 年指定、月指定、日指定
  • 5.10 スターリスト
• 6 サブタイトル編集
• 7 アイコン挿入
• 8 HTMLを挿入
• 9 スマホテーブル横スクロール
• 10 まとめ

記事内広告

カスタマイザーの「広告設定［THE］」で設定したアドセンス広告を任意の箇所に挿入することができます。

そのまま表記すると広告が表示されるので全角で書いています、実際に入力する際は半角英数で入力してくださいね。

［ａｄｃｏｄｅ］

カテゴリ指定記事一覧（新着順）

カテゴリＩＤと表示記事数を指定して新着順で表示させます。

［ａｒｃｈｉｖｅｌｉｓｔ（半角スペース）ｃａｔ＝3（半角スペース）ｎｕｍ＝3］

「cat=3」の数字部分がカテゴリＩＤで「num=3」の数字部分が表示させる記事数になります。

プロフィール設定

THE THOR（ザ・トール）にプロフィールを設定しよう！

今回はTHE THOR（ザ・トール）のプロフィールの設定・設置方法を解説します。 THE THOR（ザ・トール）でのプロフィールとは「著作者情報」という言葉になっていますが、要はプロフィールのことなので気にしないでくださいね。 プロフィールはアフィリ […]

WordPress設定

THE THOR（ザ・トール）を使うためのWordPressの設定方法を解説！

ゆず ザ・トールをWordPressにインストールできました！ 次は何をしたら良いの？ ネコ先生 次はザ・トールの設定の前にWordPressの初期設定をしましょう。 目次 1 WordPress初期設定【一般】2 WordPress初期設定【投稿設 […]

ザ・トールの初期設定

THE THOR（ザ・トール）をインストールしたら最初にするべき設定とは？

WordPressテーマ【THE THOR（ザ・トール）】には、カスタマイズや設定できる項目が数多くあります。 全ての項目を設定しようと思ったら、あまりの設定項目の多さに目が回ってしまって、記事作成する前に力尽きてしまいかねません。 そこで、最初に設 […]

カテゴリ指定記事一覧（ランダム順）

カテゴリＩＤと表示記事数を指定してランダムで表示させます。

更新用ユーザーIDの発行方法

「更新用ユーザーID」と「会員フォーラムのアカウント」の発行手順

WordPressテーマ【THE THOR（ザ・トール）】では、テーマのバージョンアップをするための「更新用ユーザーID」と、会員フォーラムで質問等するための「会員フォーラムのアカウント」を発行してもらわなければいけません。 その際の発行手順は、購入 […]

初期設定

【THE THOR（ザ・トール）】の購入方法とダウンロード

WordPressテーマ【THE THOR（ザ・トール）】の購入方法とダウンロードの方法を説明していきます。 【THE THOR（ザ・トール）】は「infotop（インフォトップ）」というサイトから購入できます。 目次 1 【THE THOR（ザ・ト […]

プロフィール設定

THE THOR（ザ・トール）にプロフィールを設定しよう！

今回はTHE THOR（ザ・トール）のプロフィールの設定・設置方法を解説します。 THE THOR（ザ・トール）でのプロフィールとは「著作者情報」という言葉になっていますが、要はプロフィールのことなので気にしないでくださいね。 プロフィールはアフィリ […]

カテゴリ指定記事一覧（ランク順）

カテゴリＩＤと表示記事数を指定して記事ランク順で表示させます。

ブログカード（外部サイトリンク）

外部サイト用のブログカードを設置します。

takeaffili.site - このウェブサイトは販売用です！ - takeaffili リソースおよび情報

このウェブサイトは販売用です！ takeaffili.site は、あなたがお探しの情報の全ての最新かつ最適なソースです…

ブログカード（内部記事リンク）

内部記事リンク用のブログカードを設置します。

関連記事

【THE THOR（ザ・トール）】吹き出し画像の変更方法と使い方

THE THOR（ザ・トール）にはデフォルトで会話風の吹き出し機能が備わっています。しかし、2019年３月現在では吹き出し画像と画像の名前を設定で変更することができません。 バージョン1.4.0より画像の変更が可能にな[…]

カスタムメニュー

ダッシュボード「外観」⇒「メニュー」で設定したカスタムメニューを表示させます。

［ｃｕｓｔｏｍｅｎｕ（半角スペース）ｍｅｎｕ＝”メニュー名”］

下のカスタムメニューは私がフッターに設定したメニュー名「フッターメニュー」です。

年指定、月指定、日指定

これはちょっと使い道が分かりません。

どうやらそれぞれ現在の年月日が表示されるようで、「number=0」の数字部分を変更するとその数字分が加算されるようです。

［ｄａｔｅ－ｙｅａｒ（半角スペース）ｎｕｍｂｅｒ＝0］⇒年指定

［ｄａｔｅ－ｍｏｎｔｈ（半角スペース）ｎｕｍｂｅｒ＝0］⇒月指定

［ｄａｔｅ－ｄａｙ（半角スペース）ｎｕｍｂｅｒ＝0］⇒日指定

何に使うんでしょうね？

スターリスト

商品やサービスなどの評価をつけるのに分かりやすい星マークを挿入できます。

数字部分を変更すると表示が変わります。５点満点で0.5刻みで評価できます。

こちらは評価3.5点

こちらは評価4.5点

色々使えそうですね。

サブタイトル編集

サブタイトル系のボックスにタイトルを挿入することができます。

ちなみにボックス内にカーソルがないとサブタイトルを入れることが出来ないので注意してくださいね。

アイコン挿入

投稿編集画面で記事内の任意の場所にアイコンを設置することができます。

まずは設置したいアイコンを「アイコンオプション」から選びます。

「アイコン一覧」から設置したいアイコンの右側にあるアイコン名をコピーしましょう。

右上の「×」ボタンをクリックして編集画面に戻り、ツールバーの「アイコン挿入」ボタンクリックして、先程コピーしたアイコン名をペーストして貼り付けます。

「OK」をクリックするとアイコンが設置されます。

HTMLを挿入

任意の箇所にHTMLタグを挿入できます。

アフィリエイトタグなどを任意の箇所に設置できるので便利ですね。

スマホテーブル横スクロール

スマホ用の横スクロールするテーブルを設置します。

通常テーブルを設置すると列が増え、文字数が多くなると画面に収まるよう自動的に改行がされて縦長の表示になってしまいます。

特にスマホなどの小さな画面になるとレスポンシブ表示でさらに縦長表示になります。

試しに横４列のテーブルを作り適当な文字を入力しました。

これをPC画面で見るとこんな感じ。

文字の表示が無理やり画面サイズに収められていますね。

まあ、本来は有難い機能でPCの時は問題ないのですが、スマホだと表示が変な感じになってしまう場合もあります。

横文字がスマホで見ると縦書きに見えたりね。

これでPCでどう表示されるか見てみましょう。

下の段が「スマホテーブル横スクロール」で作ったテーブルですが、PC表示だと変わりませんね。

しかし、スマホ表示にするとどうなるでしょう。

スクロールバーが表示され、横スクロールできるようになりました。

意外に便利な機能なので、活用してみてくださいね。

まとめ

今回はTHE THOR（ザ・トール）のパーツスタイルの使い方とそれぞれのパーツの一覧を作ってみました。

この記事があなたのお役に立てれば幸いです。