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

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

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

賢威の情報比較エリア

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

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

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

星マークの採点表の比較

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

ワードプレス環境

テーマ:賢威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】

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

楽天市場の検索結果

1冊ですべて身につくWordPress入門講座 [ Mana ]
1冊ですべて身につくWordPress入門講座 [ Mana ] 2,200円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイチサツデスベテミニツクワードプレスニュウモンコウザ マナ 発行年月:2022年03月24日 予約締切日:2022年01月26日 ページ数:344p サイズ:単行本 ISBN:9784815609405 Mana(MANA) 日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作

HTMLサイトをWordPressにする本 [ 久保田 涼子 ]
HTMLサイトをWordPressにする本 [ 久保田 涼子 ] 2,640円(税込)【送料込】

楽天ブックス

久保田 涼子 西原 礼奈 ソシムエイチティーエムエルサイトヲワードプレスニスルホン クボタ リョウコ ニシハラ アヤナ 発行年月:2023年08月29日 予約締切日:2023年06月06日 ページ数:360p サイズ:単行本 ISBN:9784802614214 久保田涼子(クボタリョウコ) 「ワクワクするモノ・時間・場所を生み出す」をテ

今すぐ使えるかんたん WordPress やさしい入門[6.x対応版] [ 桑名
今すぐ使えるかんたん WordPress やさしい入門[6.x対応版] [ 桑名 1,760円(税込)【送料込】

楽天ブックス

桑名 由美 はつみ 技術評論社イマスグツカエルカンタンワードプレスヤサシイニュウモンロクテンエックスタイオウバン クワナ ユミ ハツミ 発行年月:2023年09月28日 予約締切日:2023年06月02日 ページ数:256p サイズ:単行本 ISBN:9784297136253 桑名由美(クワナユミ) 2023年8月、合同会社ワイズベスト

たった1日で基本が身に付く! WordPress 超入門 [改訂2版] [ 佐々
たった1日で基本が身に付く! WordPress 超入門 [改訂2版] [ 佐々 1,980円(税込)【送料込】

楽天ブックス

佐々木 恵 リブロワークス 技術評論社タッタイチニチデキホンガミニツクワードプレスチョウニュウモンカイテイニハン ササキ メグミ リブロワークス 発行年月:2022年04月14日 予約締切日:2022年01月05日 ページ数:192p サイズ:単行本 ISBN:9784297126957 佐々木恵(ササキメグミ) 2002年より独学でWe

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [
ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [ 3,278円(税込)【送料込】

楽天ブックス

小川 欣一 穂苅 智哉 ソシムビジネスサイトヲツクッテマナブ ワードプレスノキョウカショ バージョンロクテンエックスタイオウバン オガワ ヨシカズ ホカリ トモヤ 発行年月:2023年05月01日 予約締切日:2023年01月12日 ページ数:436p サイズ:単行本 ISBN:9784802614030 1 開発環境を構築しよう/2 テ

楽天ウェブサービスセンター