前回の記事でフィードと検索画面のいいねを大きくしました。
今回はいいねを押したらその商品を消し、上にスライドするようにしてみます。
まずは動画で説明
PC画面を録画したものです。StylusでCSSを設定するだけで、こんな感じの動きができます。
具体的な設定方法
今回もStylusを使ってCSSを追加しています。いいねを押したときに起きる反応を捉えて、そのブロックを非表示にするだけです。スペースが空いたら自動で詰まるようになっていたので、位置の調整には何も手を入れていません。楽ちんでした。
今回作る設定をONにしている間はいいね💗した商品がずっと見えません。これはこれで不便なので、通常は使わないけど消したいときだけONにする設定に追加します。
Stylusの設定を1つ追加
ON/OFFが切り替えられるように1つ追加します。スタイル名は「いいねしたら消える」というベタな設定にしました。自由にして決めてよいです。

セクションを追加して2つにする
スタイルを新しく作ると、コードの入力枠が1つ追加されます(右側に表示されている部分)
今回の仕組みはコードのエリアが2つ必要なので、セクションを追加します。
セクションにコードを設定する
セクションができたらコードを2つ入力します。以下のスクショのようになればOKです。気を付ける点は、セクションごとにURLの設定が変わっているところです。

フィード用の設定
フィード用の設定は4行だけです。コードが分からない人はそのまま貼ればOKです。
/** Feedからいいねを非表示 **/
div.item:has(a.isLiked) {
display: none !important;
}
Aタグ(リンク用のタグ)にisLikedクラスが設定されていたら、div.itemを非表示にするだけですね
URLの設定は2つです。
URLの左の設定 | URLの右の設定 | |
1 | 次で始まるURL | https://room.rakuten.co.jp/items |
2 | 次で始まるURL | https://room.rakuten.co.jp/discover/recommendItems |
検索結果用の設定
検索結果の設定も4行だけです。これだけでいいね💗をすると消えちゃうのだから不思議ですね。
/** 検索結果 からいいねしたら消える**/
div.item-new-holder:has(a.isLiked) {
display: none !important;
}
このCSSを有効にする範囲は下のようにします。検索結果のページ全般に効く設定にしてあります。
URLの左の設定 | URLの右の設定 | |
1 | 次で始まるURL | https://room.rakuten.co.jp/search/item? |
最後に保存
Stylusの設定ができたら、左上にある保存ボタンを押して完了です。
確認する
Stylusの設定が終わったら、フィード画面か検索画面に行きましょう。商品がずらずらっと並びますので、ツールバーに出ているStylusの設定をONに変更します。
すでにいいね💗をしてある商品があれば、設定をONにした瞬間に消えます。そのあとにいいね💗をした場合は、最初の動画のように押すたびに消えていくと思います。
検索結果やフィードからいいね💗をするスタイルのルム活メンバーには、作業の効率が爆上がりするのではないでしょうか。

いいね💗したら消える!作業がはかどりますわー
コメント