THE THOR のプリセットパーツ「 レビューボックス 」の使い方。
レビューボックスはシンプルなまとめを作ることが出来る便利パーツです。ここでは基本的な使い方とちょっとしたカスタマイズを紹介したいと思います。ここでのカスタマイズはCSSなどは使わずにTHE THOR の基本機能(スタイル)だけで行います。
レビューボックス の基本
レビューボックスは「背景スタイル」と「ボーダースタイル」の2種類があります。
メニューのプリセットパーツで「レビューボックス」選び、文字を打ち替えれば完成です。
プリセットパーツ → レビューボックス → 背景スタイル or ボーダースタイル
レビューボックスの基本形
評価： 3.5右側の画像は「吹き出し」と同じように変更できます。
評価： 2.5デザインはシンプル過ぎるくらいシンプル
画像は「吹き出し」と同じように挿入します。
参考記事「吹き出し」画像の変更方法
レビューボックスのHTML
テキストモードを使うとレビューボックスを構成するHTMLを確認することができます。(クラシックエディター)
HTMLは以下のとおりです。※サンプルは「背景スタイル」
<div class=”reviewBox__title”>ここにはタイトル</div>
<div class=”reviewBox__contents”>
<div class=”reviewBox__imgBox”>
<div class=”reviewBox__img”>
<img class=”aligncenter size-full wp-image-xxxx” src=”ここには画像のURL” /></div>
<div class=”reviewBox__name”>画像下の文字</div>
</div>
<span class=”reviewBox__star”>評価： 3.5</span>ここにはコメント</div>
</div>
<div class=”reviewBox__title”>ここにはタイトル</div> ←タイトル
<div class=”reviewBox__contents”> ←コメント全体設定
<div class=”reviewBox__imgBox”> ←コメント画像全体設定
<div class=”reviewBox__img”> ←コメント画像
<img class=”aligncenter size-full wp-image-xxxx” src=”ここには画像のURL” /></div> ←コメント画像URL
<div class=”reviewBox__name”>画像下の文字</div> ←コメント画像下テキスト
</div>
<span class=”reviewBox__star”>評価： 3.5</span>ここにはコメント</div> ←評価とコメント
</div>
これをもとにカスタマイズを行うと『少しリッチでパキッとしたレビューボックス』を作ることができます。作るのは少し手間ですが色々と挑戦してみてください。
THE THOR の世界が広がりますよ。
THE THOR レビューボックス を カスタマイズ
THE THOR の装飾機能を使って「レビューボックス」カスタマイズします。パーツのコピペ、一部テキストエディタによる編集などを行います。※カスタマイズは自己責任でお願いします。
出来上がりはこちら。
評価： 3レビューボックスをカスタマイズしてみたよ。
構成がわかれば適所にclassを追加して自由にカスタマイズが可能。他のパーツを組み込み可能。いろいろやってみてね！
カスタマイズの内容は以下の通り。
- 外枠の線をクッキリさせる
- イメージ画像を追加する
- 評価に背景色を付ける
- コメント画像に枠線をつける
操作手順は文章での説明が難しいため動画でご確認ください。
①レビューボックスを設置
ここでは「ボーダースタイル」のレビューボックスをベースにカスタマイズを行います。
②カラムの挿入
画像を配置するためカラムを挿入します。
もともとあるコメントなどをコピー(カット)して空いたスペースにカラム「2カラム1:1PC」を挿入。これでPC表示のときは横並び、スマホ表示では縦並びになります。
③コメント部分(カラム右側)を装飾
右側カラムにさきほど移動したコメントなどを戻します。コメント画像挿入。評価部分の背景色を黒、文字色を白に設定。文字左側に余白を追加。
コメント画像に黒の枠線を付けます。この部分は選択が難しいのでテキストエディタを使用して【class】を追加します。追加する【class】は es-borderSolidMと brc-black
追加する場所は <div class=”reviewBox__img”>の部分。コードは大小文字を区別するので注意。
④カラム左側に画像を挿入。
次に左側のカラムに画像を挿入します。リンクなどが必要な場合は設定してください。
もちろん画像に限らず自由に設定が可能です。
⑤タイトル部分と全体枠の装飾
タイトル部分の文字を少し装飾します。タイトルをセンター揃い、シャドウを適用。好みで装飾してください。
最後にレビューボックス全体の枠線を設定。ここも選択が難しいのでテキストエディタで【class】を追加。使用する【class】は classはes-borderSolidSと brc-black
追加する場所は<div class=”reviewBox”>の部分。コードは大小文字を区別するので注意。
以上で完成です。
わかりにくい部分があればコメント欄よりどうぞ。
関連記事よく使うTHE THOR のclass名(執筆中)
関連記事THE THOR カラーコード一覧
あとがき
レビューボックスの使い方とカスタマイズ方法を解説しました。
カスタマイズ自体はたいしたことではありませんが、プリセットパーツなどを自分好みに変更が出来るというのがとても重要なポイントだと思います。THE THOR で用意されたclassを使用してテキストエディタから直接編集できるようになるとパーツ作成の世界が広がります。
ぜひ試してみてください。
