ランキング記事に活用するスターアイコン！星評価で視認力UP！fontawesomeの応用

5つ星をブログの記事に表示させたい！
星評価の表示方法は？
星でランキングを表示したい！

ブログの記事に商品の評価やゲームの難易度など…

星の表示でランキングや評価を表示したい！

もしかしたらそのような方が居るかも？

実際に私のブログで使っている星評価の表示方法を記載しておきます。

5つ星を表示させてレビューや商品評価を分かりやすくしましょう！

評価・レビュー記事

ランキングや評価などのレビュー記事。

ブログを運営している中に商品やゲーム・レビューなどの記事を書く方も多いと思います。

ブログの記事が何かの評価に特化している場合…

ひと目で分かる「5つ星」で表示することも多いと思います。

画像で表示するのは…何か古臭い。

こんな感じ→ 

大きさや色も変えられるので簡単ですね？

半分もあり→

星評価は商品の評価やレビューの評価を一目で表現できます。

星評価が使える記事は色々ありますね？

数えたらキリがありません。

星評価の使い方

星評価を表示するのは簡単です。

ただ…

表示させる為にはいろいろな方法があるようです。

私のブログでは下記のように使用している星評価。

「撮影対象評価」としていますが…

商品を紹介している時は「使い勝手」や「コスパ」など…

星評価として5つ星の表示だけで表現できます。

星評価の作り方

星評価の5つ星を表示させるには色々な方法があります。

評価をメインにしているブログだと…

毎回毎回「直に打ち込む」のはかなり面倒ですね？

星のアイコンは「fontawesome」のフォントを使います。

もちろん画像でも良いですが…

画像で呼び出す内容の物ではないので画像に関しては省きます。

星評価の表示方法

「fontawesome」で直に書き出したものが下記のものです。

5つ星

4つ星

3つ星

2つ星

1つ星

星なし

直に書き出すとは言え…

実際にいちいち一つづつコピペした訳ではありません。

表示させたコードは下記のコードです。
[highlight_markup]
5つ星<i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: gold;"></i>

4つ星<i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i>

3つ星<i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i>

2つ星<i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i>

1つ星<i class="fas fa-star" style="color: gold;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i>

星なし<i class="fas fa-star" style="color: lemonchiffon;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i> <i class="fas fa-star" style="color: lemonchiffon;"></i>
[/highlight_markup]

毎回毎回コピペするのは面倒ですね？

ショートコードで実装する方法

下記のブログで紹介していましたのでリンクしておきます。

とても分かりやすくて、参考にさせて頂くブログです。

プラグインで呼び出す

プラグインを使う…と言っても

星評価を表示するプラグインではありません。

ショートコードにして呼び出すためのプラグインです。

「TinyMCE Templates for WordPress」を使います。

テンプレートのプラグインを使っている方は分かりますね？

まだ使用していなければ「TinyMCE Templates for WordPress」を

プラグインから新規追加で追加して有効化します。

インストールと使い方に関しては省きます。

上記の「5つ星〜星なし」のコードをそれぞれテンプレートに保存します。

テンプレートに保存する時「ショートコード」を選択すれば良いだけです。

分かりやすいようにタイトルは「5つ星」「3つ星」などにすれば良いでしょう。

星によるランキングを表示したい場所にショートコードを挿入するだけです。

テンプレートに登録すれば記事を書くときに呼び出すだけです。

Luxeritasの定型文で呼び出す

テーマのLuxeritasを使用していれば定型文を保存できます。

テンプレートプラグイン同様に上記コードを各星の数分登録します。

こちらも登録するだけで記事に星評価を挿入できます。

星評価の作り方まとめ

星評価の表示はひと目で評価が分かる為、色々なサイトで見かけます。

それぞれが異なった作り方かもしれませんが…

自分に合った作り方は探せますね？

テンプレートやショートコードで呼び出せば…

もし「fontawesome」のバージョンやコードが変わっても対処できます。

Luxeritasの定型文で呼び出すのは記事内にコードが記載されます。

もし…もしも「fontawesome」のコードが変わる…事は無いと思いますが…

いちいち記事を直さなくてはなりません。

無いと思いますけど…

ショートコードの場合はテンプレイートのプラグインが無くなっても…

他のプラグインでショートコード名を同じにすれば使えます。

リンクさせていただいたショートコードの実装方法は…

functions.phpに書き込む事になりますので…

慣れていなかったり不安な方は敷居が高く感じるかもしれません。

その通りに実装すれば問題ないはずですが…

どれが一番良いとは言えませんが…

自分に合った実装方法を選ぶのが良いですね。

fontawesomeの色や大きさに関しては下記の記事で！