Web

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

投稿日:

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

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

「出品サービス」ページ

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

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

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

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) は、ほぼ発生していないはずです。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Let's Encrypt

Let’s Encrypt: ホスト名毎に証明書を分けて発行する

ホスト名毎に証明書を分けて発行すると便利です。

Web

モバイル ユーザビリティで問題が検出された?

モバイル ユーザビリティで問題が検出された?

Web

インターネットの説明に欠けているもの?

 株式会社日本レジストリサービス(以下JPRS、本社:東京都千代田区、代表取締役社長 東田幸樹)は、インターネット教育の支援活動の一環として、全国の中学校・高校・高等専門学校を対象に、マンガ小冊子『ポ …

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …

Web

ドメインとは?

ドメインについて説明します。