【コピペだけ】THE THORの星付きスコアボックスをカスタマイズ

みなさんこんにちは。

旅ブロガーのJonyとAi(@10to1_travel)です。

THE THOR(ザ・トール)には星付きのスコアボックス機能があります。商品を評価したりするときに便利ですね。

 
Jony
何かを評価したりする時に使うやつだな!
 
Ai
ホテルとかでも 5つ星とかってスターで評価してるもんね!

でもこのスコアボックスが少し見にくかったりするんですよね。背景と色が被ってしまい、視覚的に見にくくなってます。

the thorの星付きスコアボックス
THE THORのデフォルト星付きスコアボックス

THE THORの星付きスコアボックスの不満点

  • 星の黄色が薄くてバックの白と同化してしまう
  • アウトラインが無いから色が溶けてしまう

見にくいとせっかく評価しても読者に伝わりません。

そこで今回は THE THOR(ザ・トール)の星付きスコアボックスのデザインを、見やすくカスタマイズします。

完成図は以下の通り。

THE THORの星付きスコアボックスのカスタマイズ
カスタマイズ後の完成図

カスタマイズ内容

  • サイズを大きく
  • アウトラインを付けて見やすく
  • 空のスコア(星)を消す
  • カラーを調節

当記事の信頼性

AiとJony(@10to1_travel)

私たちは旅しながらブログで収益を作ってます。現在はオーストラリアに移住 4年目。ブログで「時間・場所・お金」を自由に選択できる生活を目指します。

CSSコピペだけなので、初心者の人でも簡単ですよ。それでは見ていきましょう!

THE THORの星付きスコアボックスのカスタマイズ手順

それではさっそくカスタマイズしていきます。手順はたった 2つです。

手順1:CSSをコピーする

手順1ではデザインを変更するための CSSをコピーします。

※ボックスの右上にある「コピーする」ボタンをクリックすると、自動でコピーすることができますよ。

/*星のスコアボックスのカスタマイズ*/
.content .starList{
font-size:20px;/*星の大きさ*/
color:#ffcc66;/*星の色*/
/*星の外枠*/
text-shadow: 1px 1px 0 #505050,
-1px 1px 0 #505050,
1px -1px 0 #505050,
-1px -1px 0 #505050;
letter-spacing: 3px;
}
/*空白の星の非表示*/
.icon-star-empty:before{
display:none;
}

手順2:追加CSSに貼り付ける

手順2では、コピーした CSSを追加CSSに貼り付けます。

外観 → カスタマイズ → 追加CSS

と進んで、枠内に貼り付けます。

追加CSSについて、注意点や応用など詳しく知りたい人は、以下の記事をご覧ください。

>>簡単!THE THOR「追加CSS」でカスタマイズする方法【徹底解説】

関連記事

みなさんこんにちは。 THE THOR(ザ・トール)のデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ!】ってタイトルありますよね。 でも コピペってどこに?追加 CSSって[…]

星付きスコアボックスのカスタマイズ詳細

THE THORの星付きスコアボックスのカスタマイズを詳しく解説していきますね!

星の大きさを変えたい

星の大きさを変えるには、font-size:20px;の数値を変更します。大きくすると星が大きく、小さくすると星が小さくなります。

星のアウトラインを変更する

星のアウトライン(外枠)を変更するには、text-shadowをカスタマイズします。

text-shadow:
 1px 1px 0 #505050,
 -1px 1px 0 #505050,
 1px -1px 0 #505050,
 -1px -1px 0 #505050;

#505050のカラー番号を変更すると、色を変更することができます。

カラー番号は、原色大辞典さんが大変参考になりますよ。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

星の色を変更する

星の色を変更したい場合は、color:#ffcc66;のカラー番号を変更します。とは言え、星なので黄色以外はあまり使わない方がいいでしょう。黄色内で選ぶのがオススメですね。

空の星の非表示

5段階中 3点だった場合、残り空白の 2つの星は非表示されます。これは、例えば色彩盲目の方が色を判別するのが難しかったからです。余分な空の星は非表示にしてます。

空のスターリストも表示したい場合は、以下のコードを丸っと消去してください。

.icon-star-empty:before{
display:none;
}

THE THORの星付きスコアボックスをカスタマイズ:まとめ

今回は THE THOR(ザ・トール)の星付きスコアボックスをカスタマイズしました。せっかく星付きスコアボックスを使って評価をしたいのに見えなければ台無しですよね。

どうせならおしゃれにかっこよくしちゃいましょう!

当記事に関して、質問・デザイン依頼などありましたら、お問い合わせいただくか Twitterにて DMください。お待ちしております!

 
最後まで読んでいただいてありがとうございます!

おわり