【THE THOR】スター リストをおしゃれにカスタマイズ

みなさんこんにちは。

THE THORユーザーの Jonyと Ai (@10to1_travel)です。

THE THORにはスターリストと言う機能がありますよね。

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

でも THE THORのスターリストは少し見にくかったりするんですよね。

the thorのスターリスト
少し見にくい。。。
  • スターの黄色が薄くてバックの白と同化してしまう
  • アウトラインが無いから色が溶けてしまう

そこで本日はスターリストをカスタマイズします!

完成図は以下の通り

THE THORのスターリスト カスタマイズ

本日のカスタマイズ

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

私たちは THE THORのカスタマイズが大好きです。

THE THOR(ザ・トール)を本格的にカスタマイズしたい方は、HTML・CSSの勉強にオススメの本8冊|ブログをもっとカスタマイズ!をご覧ください。

THE THOR スター リストをおしゃれにカスタマイズ

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

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

と進んでください。

追加CSSの方法をもっと知りたい人は簡単!THE THOR「追加 CSS」でカスタマイズする方法をご覧ください。

以下の CSSコードを「追加 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;
}

font-size:20px;の数値を変えると大きさを変更できます。

text-shadowでスターリストにアウトラインを付けています。

スターリスト自体のカラーを変更したい場合はcolor: #ffcc66;のカラーコードを変更してください。

アウトラインのカラーを変更したい場合は #の数値を希望のカラーコードに変更してください。

当カスタマイズでは空のスターリストを非表示にしています。

空のスターリストも表示したい場合は、

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

の部分を消去してください。

THE THORのおすすめ カスタマイズ一覧

私たちはカスタマイズが大好きで、THE THORの色んなパーツを日々いじって研究してます。

そんな私たちのカスタマイズ案です。

みなさんこんにちは。 THE THORにはテーブル機能が付いています。 […]

みなさんこんにちは。 THE THOR(ザ・トール)のマーカーはとても […]

みなさんこんにちは。 さて、THE THOR(ザ・トール)の目次は地味 […]

みなさんこんにちは。 こんな人におすすめ THE THORの画像を遅延 […]

みなさんこんにちは。 THE THORを使い始めてからずっと感じていた […]

THE THOR スター リストをおしゃれにカスタマイズ まとめ

せっかくスターリストを使って評価をしたいのに見えなければ台無しですよね。

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

※カスタマイズは自己責任でお願いします。

当ブログは有料テーマの THE THORを使っています。

THE THORのレビューを書いているので気になった人は読んでみてください。

関連記事

テーマの名前 THE THOR (ザ・トール) 評判 [star-list number=4.5] [4.5点] 初心者 [star-list number=5][5点] デザイン [star-list nu[…]

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

おわり