本サイトに、ココナラで出品してるサービスのウィジェットを表示しました

ココナラで出品しているサービスはウィジェットとして外部のサイトに貼り付けることができます。

それには、「出品サービス」ページの各サービスの「シェア」から「ブログで紹介する」を選択します。

表示されたコードを、自分のサイトに貼り付けるだけです。

本サイトのトップページなどに貼り付けてみました。

こんな感じで表示しています。

HTML

<div class="coconala-widgets">
  <div>{{ウィジェット1つ目}}</div>
  <div>{{ウィジェット2つ目}}</div>
  <div>{{ウィジェット3つ目}}</div>
  <div>{{ウィジェット4つ目}}</div>
</div>

• {{ウィジェット○つ目}} の部分は、実際のウィジェットのHTMLに置き換えます。

CSS

.coconala-widgets {
  margin: 0 auto 2em;
  display: flex;
  flex-wrap: wrap;
}
.coconala-widgets >  div {
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
  max-width: 310px;
  aspect-ratio: 310/392;
}

CWV指標の1である CLS (Cumulative Layout Shift) は、ほぼ発生していないはずです。