悩んでる人SWELLでレビュー用の星マークを表示する方法を教えて
hideharuこういった疑問に答えます。
商品レビューとかで使う星マークを表示する方法を紹介します。
こんなの▼
SWELLでレビュー用の星マーク・評価用スターを表示する方法
ではさっそくやり方を紹介します。
星マークを新規に表示する方法
ツールバーから、</>をクリックして、「評価用スター」をクリックします。
すると、以下の表示になります。
プレビューで確認すると、こうなります▼
hideharuなんとも簡単ですね
星マークのぬりつぶしの数を変更する方法
デフォルトだと4.5になってますが、この数字を手動で変更すればOK。
たとえば、3に変更してみましょう。
プレビューで確認すると、こうなります▼
星マークの全体の数を変更する方法
全体の数はデフォルトだと5個ですが、変更したい場合は手動で変更すればOK。
たとえば、10に変更してみましょう。
プレビューで確認すると、こうなります▼
小数点の設定は0.5のみ
以下のように、設定できる小数点は0.5のみです。
4.1/5 とか 4.9/5 のような値を設定しても反映されません。星0 個扱いとなるので、ご注意ください。
星マークの色を変更する方法
星マークの色を変更するにはCSSを変更する必要があります。
まず、以下のCSSを、カスタマイズ > 追加CSSに記述します。
/* 星マークの色を変える */
.c-reviewStars i {
color: #666;
}こんな感じで
で、#666 の部分を好きな色に変更して「公開」ボタンを押せばOK。
SWELLでレビュー用の星マーク・評価用スターを使った例
テーブルブロックと組み合わせると、レビューでよくみかける感じにできます。
以下、サンプルを紹介しますので参考にどうぞ。
２カラムの表を作って、「項目」と「評価」みたいな感じで表を作成します。
こんな感じで▼
星マークを入れたいところにマウスを合わせ、前述の方法で星マークを挿入します。
こんな感じで▼
前述の方法で星マークの数を変更します。
こんな感じで▼
プレビューで見るとこんな感じになります▼
| 項目 | 評価 |
|---|---|
| 総合評価 | |
| コスパ | |
最後に
今回は、SWELLでレビュー用の星マーク・評価用スターを表示する方法を紹介しました。
とっても簡単でしたね。
WordPressテーマ「SWELL
」は機能性が高いテーマなので、やれることがいっぱい！
もしWordPressテーマの導入を検討している方は、SWELLをぜひ！
以下を参考にどうぞ。
