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

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

関連記事

Chrome

Chrome の「ピクチャー イン ピクチャー」機能を使って、YouTube の動画を最前面で再生する

目次1. Chrome の「ピクチャー イン ピクチャー」機能2. ピクチャー イン ピクチャーを行う方法3. プレイヤーの操作など3. おわりに 1. Chrome の「ピクチャー イン ピクチャー …

Web

インターネット上の情報とテレビ・新聞の情報

「ワイドナ」ネタツイートを宮崎駿監督発言と紹介? (日刊スポーツ) – Yahoo!ニュース(https://headlines.yahoo.co.jp/hl?a=20170529-018 …

Web

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)について説明します。

web development

HTTPレスポンスヘッダ COEP, COOP, CORP, CORS についてのメモ

HTTP Response Header である COEP, COOP, CORP, CORS についてのメモです。

Chrome

Chrome 96 で絵文字を太字にすると色がなくなる問題

Chrome 96 で絵文字を太字にすると色がなくなる問題について書いています。