楽天PointClubのポイント履歴をシンプルに表示するスタイルシート

スポンサーリンク

楽天ポイントの履歴を確認しようと思ったら、表示デザインが変わっていた。
少しは見やすくなったのかもしれないが、相変わらず不要なものを表示されているのは変わらない。

そこで、Chromeの拡張機能Stylishで適用させていたCSSを修正した。

以前にも、「楽天ポイントの利用獲得履歴をシンプルに表示するスタイルシート」という記事でCSSを公開していたが、もう3年前のことになるのか。

今回も前回同様に不要な要素を{display:none;}で表示させなようにしているだけだ。

少し面倒だったのが、section要素のcontentっていうクラス名のやつ。
個別にクラス名やID名が与えられていないものがあり、そのままだと肝心のポイント履歴まで消えてしまう。

そこで、nth-of-type(n)で何個目にある要素かという指定をしている。
こんな要素の指定があったのかと初めて知った。

出来上がったCSSがこちら。

スポンサーリンク

楽天ポイント履歴シンプル化 v2

/*
Name: 楽天ポイント履歴シンプル化 v2
URI: https://b.hishitu.net/
Description: 楽天PointClubのポイント履歴ページから不要な要素を表示しないようにする。
Version: Ver.2.0
Author: ぎんじろ
Applies:https://point.rakuten.co.jp/history/*
*/

/*ヘッダ*/
.rc-h-utility-bar,
.rc-h-site-menu,
.rc-h-section-bar,
.rc-h-subsection-bar,

/*本体前*/
h2.heading1-icon,
.history-detail, 
.content:nth-of-type(2),

/*本体以降フッタ前*/
h2.sub-heading sub-heading-icon,
.row,
h2.sub-heading-icon,
.content:nth-of-type(4),
.history-link-box,

/*フッタ*/
footer{display:none;}

.page-wrap {background-color:#fff;}

とかなんとかいいながら、全然うまいこと動作しなかったので、作りなおしました。

楽天ポイント履歴シンプル化 v2.1

/*ヘッダ~要素前*/
.rc-h-utility-bar,
.rc-h-service-bar .rc-h-site-menu,
.rc-h-section-bar,
.rc-h-subsection-bar,
.breadcrumbs,
.alert-info,
.history-detail,
h2.heading1-icon,h2.heading1-icon + .content,

/*要素の中*/
.history-link-box,


/*要素の後~フッタ*/
h2.sub-heading-icon, h2.sub-heading-icon ~ .content,
.row,
footer{display:none;}

/*背景色*/
.page-wrap {background-color:#fff;}

userstyles.orgでも公開してみた。

タイトルとURLをコピーしました