いいね周り効率化：商品をいいねすると、別の商品がスライドしてくる仕掛け

前回の記事でフィードと検索画面のいいねを大きくしました。
今回はいいねを押したらその商品を消し、上にスライドするようにしてみます。

まずは動画で説明

PC画面を録画したものです。StylusでCSSを設定するだけで、こんな感じの動きができます。

今回もStylusを使ってCSSを追加しています。いいねを押したときに起きる反応を捉えて、そのブロックを非表示にするだけです。スペースが空いたら自動で詰まるようになっていたので、位置の調整には何も手を入れていません。楽ちんでした。

今回作る設定をONにしている間はいいね💗した商品がずっと見えません。これはこれで不便なので、通常は使わないけど消したいときだけONにする設定に追加します。

ON/OFFが切り替えられるように1つ追加します。スタイル名は「いいねしたら消える」というベタな設定にしました。自由にして決めてよいです。

スタイルを新しく作ると、コードの入力枠が１つ追加されます（右側に表示されている部分）
今回の仕組みはコードのエリアが2つ必要なので、セクションを追加します。

セクションができたらコードを2つ入力します。以下のスクショのようになればOKです。気を付ける点は、セクションごとにURLの設定が変わっているところです。

フィード用の設定は4行だけです。コードが分からない人はそのまま貼ればOKです。

CSS

/** Feedからいいねを非表示 **/
div.item:has(a.isLiked) {
    display: none !important;
}

Aタグ（リンク用のタグ）にisLikedクラスが設定されていたら、div.itemを非表示にするだけですね

URLの設定は２つです。

	URLの左の設定	URLの右の設定
1	次で始まるURL	https://room.rakuten.co.jp/items
2	次で始まるURL	https://room.rakuten.co.jp/discover/recommendItems

検索結果の設定も4行だけです。これだけでいいね💗をすると消えちゃうのだから不思議ですね。

CSS

/** 検索結果 からいいねしたら消える**/
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にした瞬間に消えます。そのあとにいいね💗をした場合は、最初の動画のように押すたびに消えていくと思います。

検索結果やフィードからいいね💗をするスタイルのルム活メンバーには、作業の効率が爆上がりするのではないでしょうか。

いいね💗したら消える！作業がはかどりますわー