WordPressテーマSANGOの質問

関連記事（[kanren id =""]）の左上に「STEP.○○」を表示させたい.

なおと

2021/01/21

先ほど質問文が半端な状態で送信してしまいました。失礼いたしました。

関連記事（[kanren id =""]）についてご質問です。
サルワカさんのこちらのページのように、各関連記事の左上部分に「STEP.○○」と表示させたいです。
https://saruwakakun.com/html-css/basic

恐れ入りますが、ご教授よろしくお願いいたします。

SANGOのショートコード一覧

コメントへの回答

サルワカくん

2021/01/22

いつもお世話になっております。
CSSのカスタマイズについてはサポート対象外ではあるので、次回からはサポートが難しい可能性がある点をご了承ください。
以下の様なCSSを新たに追加していただくことでご希望のデザインが実装できるかと思います。
ご確認よろしくお願いします。


.related-posts {
  counter-reset: section;
}
.related-posts li {
  position: relative;
}
.related-posts li:before {
  background: #79cbff;
  color: #fff;
  display: inline-block;
  position: absolute;
  font-weight: 700;
  z-index: 20;
  font-size: .83em;
  font-family: Arial,sans-serif;
  line-height: 1;
  padding: 5px 10px;
  top: 0;
  box-shadow: 1px 1px 1px grey;
  letter-spacing: .07em;
  left: 0;
  counter-increment: section;
  content: "STEP." counters(section, ".");
}