賢威の情報比較エリアの星マークの採点表をカスタマイズ

※当サイトにはプロモーションが含まれています。

賢威には、商品情報を紹介(比較)する下記のような基本スタイルが用意されています。

賢威の情報比較エリア

にゃのらいとにゃのらいと

もう少し、星マークの採点表を目立たせたいにゃ

商品比較をする際に、採点表は重要な要素なので、もう少し目立つようにカスタマイズしてみました。

星マークの採点表の比較

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ:賢威8
WordPressバージョン:5.8.x
PHPバージョン:7.4.x
サーバー:さくらインターネット

※現在、WP:6.2.x、PHP:8.2.xでも動作しています

星マークの採点表を目立たせるCSS

賢威の情報比較エリアの星マークの採点表を目立たせるCSSです。

/* 星マークをカスタマイズ */
.review-table tr th {
width: 14em;
font-size: 1em;
}

.review-table tr th,
.review-table tr td {
border-bottom: 1px dashed #ccc;
padding: 5px 4px 2px 4px;
}

table.review-table {
width: auto;
}

.review_star {
height: 1.2em;
padding-left: 120px;
font-size: 1.2em;
}

.review_star::after {
background: -webkit-linear-gradient(bottom, yellow, orange);
background: linear-gradient(to bottom, yellow, orange);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

.star00::after{ width: 0; }
.star05::after{ width: 0.6em; }
.star10::after{ width: 1.0em; }
.star15::after{ width: 1.6em; }
.star20::after{width: 2.0em;}
.star25::after{ width: 2.6em; }
.star30::after{ width: 3.0em; }
.star35::after{ width: 3.6em; }
.star40::after{width: 4.0em;}
.star45::after{ width: 4.6em; }
.star50::after{ width: 5.0em; }

上記のCSSについて簡単な補足説明です。

クラス.review-table tr thでは、価格や使用感などの項目について設定しています。

widthで幅を設定しているので、文字数が5文字程度までなら、8emなどの値でもいいと思います。

table.review-tableでは、テーブルの幅を設定しています。

デフォルト設定が、widrh:100%となっている事もあり、項目ごとの点線が端まで伸びてしまう為、width: auto;で上書きしています。

クラス.review_starでは、星マークの大きさなどに関する設定をしています。

なお、この星の大きさの設定と、.star00::after~.star50::afterの設定は関連性があります。

.star00::after~.star50::afterで、星マークの見え方(星4.5なら、星が4つと半分着色される)という調整をおこなっています。

補足:ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

外観 > カスタマイズ
追加CSS」を選択します。
追加CSS

追加したいCSSを記述します(コピペして貼り付けます)。

公開」ボタンを押して保存すれば完了です。

全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

追加CSSを公開

なお、ブラウザにキャッシュが残っていると、前のデザイン(CSS)が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード(ハードリフレッシュ)をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

Windows Mac
Google Chrome 【Ctrl+F5】
【Ctrl+Shif+R】
【Command+Shift+R】
Microsoft Edge 【Ctrl+F5】
【Ctrl+Shif+R】
【Command+Shift+R】
Mozilla Firefox 【Ctrl+F5】
【Ctrl+Shif+R】
【Command+Shift+R】
Safari(Mac) 【Command+Option+R】

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。