【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ユーザーの Jonyと Ai(@ […]

みなさんこんにちは。 WordPressのテーマ THE THOR(ザ […]

みなさんこんにちは。 ONE PIECEのボスキャラ“フワ […]

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

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

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

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

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

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

関連記事

みなさんこんにちは。 THE THOR(ザ・トール)ユーザーの JonyとAi(@10to1_travel)です。 私たちはまだブログを始めて1年経たないほどの「THE THOR初心者」です。 なぜ権威性も実績も[…]

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

おわり