今回SWELLで作るのは評価スターを使ったレビュー表です。
よく他の方のブログで見かけることがあるのですがやり方がわからない・・・
てっきりSWELLではできないのかと思い、ずっと「Useful Blocks」評価グラフを使用していました。
![](https://www.heiwazima.com/wp-content/uploads/2021/01/9B8FF1C5-3871-46A5-AF7C-F27721E4D41D.png)
みんな評価スターってどうやってるんだろう??
SWELLの評価スター
ブロックの「ショートコード」に[ review_stars 5]を入力しても表示されません
エディター画面で「ショートコード」ブロックに「[ review_stars 5]」と入力しても、プレビュー画面では[ review_stars 5]と表示されてしまいます。
![](https://www.heiwazima.com/wp-content/uploads/2021/05/88BD3CD4-F891-4FA5-ABE5-C413A265B2CC-1024x157.jpeg)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/05/88BD3CD4-F891-4FA5-ABE5-C413A265B2CC.jpeg?resize=1024%2C157&ssl=1)
[ review_stars 5]
段落ブロックに[ review_stars 5]を入力しても表示されません
段落ブロックに[ review_stars 5]を入力しても、当然ですがダメです。
[ review_stars 5]
ショートコード[ad]機能を使用して[ review_stars 5]を入力する
先ほどまではずっと[ review_stars 5]と表示されてしまいましたが、こちらではしっかり星マークが表示されているかと思います!
評価スターの出し方の説明
![](https://www.heiwazima.com/wp-content/uploads/2021/05/1BB1047D-5834-480B-9667-23FDE2866771.jpeg)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/05/1BB1047D-5834-480B-9667-23FDE2866771.jpeg?resize=927%2C235&ssl=1)
![](https://www.heiwazima.com/wp-content/uploads/2021/05/FFD26503-471F-4D4F-B845-9110810B6867-1024x358.jpeg)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/05/FFD26503-471F-4D4F-B845-9110810B6867.jpeg?resize=1024%2C358&ssl=1)
エディタ画面では[ review_stars 5]ですが、プレビュー画面を確認するとしっかり星・スターが表示されています
![](https://www.heiwazima.com/wp-content/uploads/2021/05/27875ED9-35DB-42E8-B81E-7D98C266B45A-1024x181.jpeg)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/05/27875ED9-35DB-42E8-B81E-7D98C266B45A.jpeg?resize=1024%2C181&ssl=1)
デフォルトは[ review_stars 5]ですが、[ review_stars 6/7]や[ review_stars 8/10]などと少し数字をいじるだけで星・スターの表示数を変更することができます。
![](https://www.heiwazima.com/wp-content/uploads/2021/05/0E33403E-AD40-4772-89DB-F28411D46FE3-1024x288.jpeg)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/05/0E33403E-AD40-4772-89DB-F28411D46FE3.jpeg?resize=1024%2C288&ssl=1)
![](https://www.heiwazima.com/wp-content/uploads/2021/05/1D341D60-F7CD-45F0-99B8-1677E55480C0-1024x266.jpeg)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/05/1D341D60-F7CD-45F0-99B8-1677E55480C0.jpeg?resize=1024%2C266&ssl=1)
評価スターとテーブルブロックの組み合わせ
2ブロック
やっと作りたかった評価スター表を作ることができました!
調べてもなかなかこの評価表、評価スターの作り方が出てこないのでずっと困ってました。
トータル評価 | |
---|---|
ゲーム性 | |
シナリオ | |
音楽 |
Useful Blocksの評価ブロックを使う方法もある
評価ブロックの設定で、アクティブポイント→画像→「fas fa-star」と入力すれば、星マークを出せます。
参考記事
![](https://swell-theme.com/wp-content/uploads/2019/05/thumb_short_code.png)
![](https://i0.wp.com/swell-theme.com/wp-content/uploads/2019/05/thumb_short_code.png?resize=320%2C180&ssl=1)
![](https://swell-theme.com/wp-content/uploads/2020/04/thub_table_block.png)
![](https://i0.wp.com/swell-theme.com/wp-content/uploads/2020/04/thub_table_block.png?resize=320%2C180&ssl=1)
私は2021年に「はてなブログ有料」から「SWELL」にブログを引っ越しましたが快適です♪
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/02/FB57390B-258E-48B6-B555-5FFE1CDA2184.png?fit=300%2C169&ssl=1)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/02/FB57390B-258E-48B6-B555-5FFE1CDA2184.png?fit=300%2C169&ssl=1)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/02/990EF36C-C594-48BD-AD75-ADDFA6DDA153.png?fit=300%2C169&ssl=1)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/02/990EF36C-C594-48BD-AD75-ADDFA6DDA153.png?fit=300%2C169&ssl=1)
![](https://www.heiwazima.com/wp-content/uploads/2021/04/2045956.jpg)
![](https://www.heiwazima.com/wp-content/uploads/2021/04/2045956.jpg)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/04/2045956.jpg?resize=80%2C80&ssl=1)
このブログのレンタルサーバーは
ConoHa WING(コノハ ウィング)と契約しています!!
![](https://www.heiwazima.com/wp-content/uploads/2021/04/1287925.jpg)
![](https://www.heiwazima.com/wp-content/uploads/2021/04/1287925.jpg)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/04/1287925.jpg?resize=80%2C80&ssl=1)
自宅のネットはNURO光と契約しています!!
「下り最大2Gbps」で快適です!
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/04/frederik-lipfert-y67dwfb2aim-unsplash.jpg?fit=300%2C200&ssl=1)
![](https://i0.wp.com/www.heiwazima.com/wp-content/uploads/2021/04/frederik-lipfert-y67dwfb2aim-unsplash.jpg?fit=300%2C200&ssl=1)