WordPressテーマSANGOの質問

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

アバター
なおと

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

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

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

SANGOのショートコード一覧
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, ".");
}
アバター
なおと
2021/01/25

問題解決いたしました。ご対応いただきありがとうございました。

サルワカくん
サルワカくん
2021/01/26

解決されてよかったです。
今後ともよろしくお願いします。