【SWELL】投稿リストブロックにランキングラベルをつける方法

// rankingクラスを持つ要素を取得
const rankingElements = document.querySelectorAll('.ranking');

// ranking要素のp-postListに-w-rankingクラスを追加
rankingElements.forEach(rankingElement => {
    rankingElement.querySelector('.p-postList').classList.add('-w-ranking');
});

/* ===================
人気記事ランキングラベル
====================== */
/* カウンター */
.-w-ranking.p-postList {
  counter-reset: number 0;
}

/* ラベル */
.-w-ranking .p-postList__item:before {
  background-color: #3c3c3c;
  color: #fff;
  content: counter(number);
  counter-increment: number;
  display: block;
  font-family: arial,helvetica,sans-serif;
  pointer-events: none;
  position: absolute;
  text-align: center;
  z-index: 2;
}

/* カード型 */
.-w-ranking.-type-card .p-postList__item:before {
  font-size: 3.2vw;
  left: calc(.5em + 8px);
  line-height: 2.5;
  top: -4px;
  width: 2em;
}

/* カード型フォントサイズ */
@media (min-width:600px) {
  .-w-ranking.-type-card .p-postList__item:before {
    font-size: 14px;
  }
}

/* リスト型 */
.-w-ranking.-type-list .p-postList__item:before {
  font-size: 3vw;
  left: 0;
  line-height: 2;
  top: 0;
  width: 2em;
}

/* リスト型フォントサイズ */
@media (min-width:600px) {
  .-w-ranking.-type-list .p-postList__item:before {
    font-size: 12px;
  }
}

/* 1位 */
.-w-ranking .p-postList__item:first-child:before {
  background-color: #f7d305;
  background-image: linear-gradient(to top left,#f7bf05,#fcea7f,#fcd700,#f7d305,#eaca12,#ac9303,#f7d305,#fcea7f,#f7e705,#eaca12,#f7bf05);
}

/* 2位 */
.-w-ranking .p-postList__item:nth-child(2):before {
  background-color: #a5a5a5;
  background-image: linear-gradient(to top left,#a5a5a5,#e5e5e5,#ae9c9c,#a5a5a5,#a5a5a5,#7f7f7f,#a5a5a5,#e5e5e5,#a5a5a5,#a5a5a5,#a5a5a5);
}

/* 3位 */
.-w-ranking .p-postList__item:nth-child(3):before {
  background-color: #c47222;
  background-image: linear-gradient(to top left,#c46522,#e8b27d,#d07217,#c47222,#b9722e,#834c17,#c47222,#e8b27d,#c48022,#b9722e,#c46522);
}