ブロックエディタ（Gutenberg）を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ
ポチップ
TE THOR ザ・トール レビューボックス の使い方とカスタマイズ
当ページのリンクには広告が含まれています。
ポチップ
THE THOR のプリセットパーツ「 レビューボックス 」の使い方。
レビューボックスはシンプルなまとめを作ることが出来る便利パーツです。ここでは基本的な使い方とちょっとしたカスタマイズを紹介したいと思います。ここでのカスタマイズはCSSなどは使わずにTHE THOR の基本機能(スタイル)だけで行います。
目次
レビューボックス の基本
レビューボックスは「背景スタイル」と「ボーダースタイル」の2種類があります。
メニューのプリセットパーツで「レビューボックス」選び、文字を打ち替えれば完成です。
操作手順
プリセットパーツ → レビューボックス → 背景スタイル or ボーダースタイル
プリセットパーツ → レビューボックス → 背景スタイル or ボーダースタイル
レビューボックスの基本形
この「レビューボックスは背景スタイル」です。
トオル
評価： 3.5右側の画像は「吹き出し」と同じように変更できます。
この「レビューボックスはボーダースタイル」です。
テツ
評価： 2.5デザインはシンプル過ぎるくらいシンプル
プリセットパーツをそのまま使用したのが上記の2つです。
タイトル/☆評価/説明文/画像部分という構成。レビューボックスでの評価は0.5刻みで設定が可能。
画像は「吹き出し」と同じように挿入します。
参考記事「吹き出し」画像の変更方法
もう少し詳しく見てみましょう。
レビューボックスのHTML
テキストモードを使うとレビューボックスを構成するHTMLを確認することができます。(クラシックエディター)
HTMLは以下のとおりです。※サンプルは「背景スタイル」
<div class=”reviewBox”>
<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>
<div class=”reviewBox__name”>画像下の文字</div>
</div>
<span class=”reviewBox__star”>評価： 3.5</span>ここにはコメント</div>
</div>
ざっくり解説
<div class=”reviewBox”> ←ボックス全体設定
<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>
<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 カラーコード一覧
[wpap service=”with” type=”detail” id=”B08W9WCY67″ title=”小学生のためのWordpressの教科書: 総務省地域ＩＣＴクラブ事業”]
あとがき
レビューボックスの使い方とカスタマイズ方法を解説しました。
カスタマイズ自体はたいしたことではありませんが、プリセットパーツなどを自分好みに変更が出来るというのがとても重要なポイントだと思います。THE THOR で用意されたclassを使用してテキストエディタから直接編集できるようになるとパーツ作成の世界が広がります。
ぜひ試してみてください。
ブロックエディタ（Gutenberg）を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ
ポチップ
この記事が気に入ったら
フォローしてね！
ブログテーマ選びについて
この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。
- THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る - THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る - 自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト
コメント