※当サイトにはプロモーションが含まれています。
賢威には、商品情報を紹介(比較)する下記のような基本スタイルが用意されています。
もう少し、星マークの採点表を目立たせたいにゃ
商品比較をする際に、採点表は重要な要素なので、もう少し目立つようにカスタマイズしてみました。
なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。
テーマ:賢威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)が表示されたり、デザインが崩れて表示される事があります。
その際は、強制リロード(ハードリフレッシュ)をしてみてください。
各ブラウザごとの、強制リロードの方法は次の通りです。
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】 |
強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。