この記事では、「THE THOR（ザ・トール）」のエディターツールである「プリセットパーツ」と「共通ボタン」の使い方について、解説しています。また、各パーツのデザインも表示していますので、参考にしてみてください。
基本的な使い方
- 「プリセットパーツ」または「共通ボタン」をクリックする
- 使いたいパーツにカーソルを合わせる
- 使いたいデザインをクリックする
これだけで、選択したパーツが編集エリアに挿入されます。
プリセットパーツ
プリセットパーツには、「区切り線」「吹き出し」「スコアボックス」「口コミボックス」「レビューボックス」「アコーディオンボックス」がセットされています。
区切り線
区切り線のデザインは、「実線」「破線」「点線」の3種類です。段落と段落の間を区切ったりするときなどに使用します。
実線
破線
点線
吹き出し
吹き出しのデザインには、「背景スタイル」と「ボーダースタイル」があります。
デフォルトのイメージはこちら。
デフォルトの設定内容
・左画像：ネコ
・右画像：イヌ
・吹き出し内：「コメント（テキスト）」
・画像下の名前：「Name（テキスト）」
ちなみに、ネコとイヌの画像は、サイズ：300px × 300px、保存形式：gifが使われています。
吹き出しの画像を変更する
- 画像をクリック。
- をクリックし、表示させたい画像を選択します。
これで画像の変更ができます。
吹き出し画像下の名前を設定する
吹き出し画像下の「Name」という部分をクリックし、表示させたい名前を入力します。
名前はセンタリング（中央）されており、８文字までは1行で表示され、9文字目からは次の行に改行されます。
吹き出しにコメントを入力する
吹き出し内をクリックし、コメントを入力します。
入力時の注意
デフォルトで表示されているテキスト「コメント」を全選択し、deleteキーで消した場合、吹き出しのデザイン自体が消えてしまうので注意が必要です。
消えてしまった場合は、「元に戻す」ボタンをクリックすると戻すことができます。
画像や名前を固定する＆吹き出しのカラーを変更する
「よく使う名前や画像を設定しておきたい」
「オリジナルのカラーにしたい」
そんなときは、「吹き出しデザイン設定」を使いましょう。
外観 ＞ カスタマイズ ＞ パーツスタイル設定 ＞ 吹き出しデザイン設定 で変更することができます。
この記事では、吹き出しのデザイン設定について解説しています。 吹き出しは、投稿や固定エディタ内のプリセットパーツから選択し利用することができます。 どこで設定するの？ 外観 ＞ カスタマイズ ＞ パーツスタイル設定 ＞ 吹き出し設定（[…]
スコアボックス
スコアボックスは、商品の評価などをするときに使います。
デザインは、テーブル（表）で構成されており、最終行（総合）の色違いとして「レッド」「ブルー」「イエロー」「ピンク」「グリーン」「グレー」の６種類があります。
スコアボックス「レッド」
| 項目名 | 3.5 |
| 項目名 | 3.5 |
| 項目名 | 3.5 |
| 項目名 | 3.5 |
| 総合 | 3.5 |
最終行のカラー一覧
| レッド（#FDEDEC） | 3.5 |
| ブルー（#EAF6FE） | 3.5 |
| ピンク（#FFFDED） | 3.5 |
| イエロー（#FFFDED） | 3.5 |
| グリーン（#EBF5EB） | 3.5 |
| グレー（#D8D8D8） | 3.5 |
項目名を入力する
項目名のエリアをクリックし、任意のテキストを入力します。
項目を増やす
クリックした項目名の上または下に行を追加することができます。
項目名のエリアをクリックすると、メニューボタンが表示されます。上または下に挿入するボタンを押しましょう。
メニューボタンが表示されない場合は、エディタ上部のテーブルアイコンをクリックし、行 ＞ 行を上に挿入 または 行を下に挿入 をクリックしましょう。
スターリストの数値を入力する
スターリストの数値は、星と数字の数値をそれぞれ設定する必要があります。
［star-list number=3.5]が星の数、その後ろの3.5が数値として表示されます。
数字で表示される部分は、自由な値を入力することができますが、星を表す数値は、0.5刻み（0.5、1、1.5、2・・・）で入力してください。それ以外の数値を入れると、星５つで表示されるので注意してください。
口コミボックス
商品の口コミなどを表示する際に使用します。デザインは、背景タイプとボーダータイプの2種類で、色はスコアボックスと同じ6色（レッド、ブルー、イエロー、ピンク、グリーン、グレー）が用意されています。
背景タイプの口コミボックス
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
ボーダータイプの口コミボックス
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
口コミの内容を入力する
表示されているテンプレートに沿って、名前や内容を入力しましょう。
口コミ数を増やす
テキストエディタに切り替え、名前や本文の入力エリアをコピー＆ペーストすることで、口コミ数を増やすことができます。
テキストエディタに切り替え、口コミボックスの箇所を探します。ボーダーグリーンの口コミボックスの場合、以下のような内容です。
<div class="ep-box es-borderSolidS brc-Llime bgc-white"> <div class="ep-inbox es-Bwhole bgc-Llime ftc-white es-FbigL es-bold es-Bicon icon-bubbles2">口コミ</div> <span class="ep-label es-bold es-TpaddingSS es-BpaddingSS es-BmarginSS es-RpaddingS es-LpaddingS"> 東京都：山田 花子(20歳・女性)</span> このエリアに口コミ本文を記入します。 <hr class="hr-dotted" /> <span class="ep-label es-bold es-TpaddingSS es-BpaddingSS es-BmarginSS es-RpaddingS es-LpaddingS"> 東京都：山田 花子(20歳・女性)</span> このエリアに口コミ本文を記入します。 ＊このスペースに貼り付ける </div>
<hr class=”hr-dotted”>から「このエリアに口コミ本文を記入します。」までの部分（赤文字）をコピーし、</div>の上のスペース（＊このスペースに貼り付けると記述した部分）に貼り付けます。
ビジュアルエディタに切り替えると、入力スペースが増えているのを確認できると思います。同じ作業を繰り返すと、口コミ数を増やすことができます。
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
色を変更する
口コミボックスは、「スタイル」のボックスやラベルで構成されているため、スタイル ＞ カラーセット の色を使うことができます。
テキストエディタに切り替え、変更したい箇所の色名を置き換えます。
「タイトルエリア（口コミの部分）」の背景色を変更するには、①「bgc-Lsky」の「Lsky」を使いたいカラー名に置き換えます。
例えば、
ライトトーンのピンクに変更したい場合は、「bgc-Lpink」となります。
カラー名は下の記事を参考にしてください。
この記事では、ラベル、ボタン、ボックスなどを配置するときに使用できる「カラーコード」の一覧をご紹介しています。 投稿エディタ内の「スタイル」にあらかじめセットされているカラーが、全部で91色あります。 カラーセット全91色 一覧 […]
口コミボックス（ボーダー）も同様に色の変更が可能です。
この記事では、エディタスタイルの高度な使い方について、解説しています。 高度な使い方とはどんな使い方？ スタイルの名前を利用する。 テキストエディタ（HTML）で装飾を編集する。 ビジュアルエディタで編集した内容を確認する[…]
レビューボックス
レビューボックスは、商品を使用した感想などを紹介するときに使用します。デザインは、背景とボーダーの2種類。
背景スタイル
評価： 3.5このエリアにレビュー本文を記入します。
ボーダースタイル
評価： 3.5このエリアにレビュー本文を記入します。
使い方
タイトル
「このエリアにレビュータイトルを記入します。」にタイトルを入力します。
星の数を設定
評価：△△の数値を設定します。「number=〇〇」の数値は、星数を表すもので、0.5刻みで入力します。[]の外側にある数値（△△）は、そのまま数字として表示されます。
本文
「このエリアにレビュー本文を記入します。」の部分に、本文を入力します。
画像を設定する
丸で囲まれた人型の部分をクリックします。
次に、ボタンを押し、設定したい画像を選択します。
名前を設定する
画像下の「N.Sさん」をクリックし、任意の名前を入力します。
アコーディオンボックス
アコーディオンボックスは、クリックした場合のみ内容を表示することができます。
- ここをクリック
- クリックすると内容をみることができます。
デザインは2種類。
- 背景スタイルのアコーディオンボックス
- これは、背景スタイルのアコーディオンボックスです。
- ボーダースタイルのアコーディオンボックス
- これは、ボーダースタイルのアコーディオンボックスです。
使い方
「タイトル」部分に、タイトルを入力します。
「Hこのエリアにレビュー本文を記入します。」に本文を入力します。この部分は、ページ表示時には閉じられており、タイトル部分をクリックすることで、内容を確認できるようになります。
共通ボタン
ボタンの大きさによって、プライマリ、セカンダリ、ノーマルに分かれています。
ボタン選択時に、配置（右・中央・左）を選択します。
ボタンのテキストを設定する
- 鉛筆マーク（編集）をクリック
- 歯車マーク（設定）をクリック
- リンクの文字列を編集する
- リンク挿入/編集画面上の「更新」ボタンをクリック
リンク先を設定する
リンク先URLを設定します。
- ボタンをクリック
- 鉛筆マーク（編集）をクリック
- 歯車マーク（設定）をクリック
- URL欄に入力する
- リンクの挿入/編集画面上の「更新ボタン」をクリック
ボタンの色を設定する
ボタンの色は、外観 ＞ カスタマイズ ＞ パーツスタイル設定 ＞ 共通ボタン設定で行います。
この記事では、パーツスタイル設定の「共通ボタン設定」について、解説しています。 どこで設定するの？ 外観 ＞ カスタマイズ ＞ パーツスタイル設定 ＞ 共通ボタン設定 で行います。 共通ボタンの設定 共通ボタンは[…]
