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

メールアドレスが公開されることはありません。

関連記事

Web

Source Map に関する情報

目次1. Source Map とは?従来の問題点ソースマップ(Source Map)ソースマップに関連するファイルを整理するソースマップの動作ソースマップは誰が作るのか?2. Chrome ブラウザ …

CSS

Simple.css の使いみちについて

Simple.css の使いみちについて書いています。

Web

JSFiddle を使って HTML/CSS/JavaScript をウェブページに埋め込む

JSFiddle というサービスを使って、ウェブページに HTML/CSS/JavaScript を埋め込んでみましょう。 目次1. JSFiddle とは?2. ウェブページに埋め込む手順(1) ア …

Web

window.opener を使って元ウィンドウの情報が取得できるかどうかの実験

ウェブブラウザでウェブページを表示している場合、ブラウザのウィンドウを表す window というオブジェクトが存在しており、JavaScript から利用することができます。 window.opene …

Web

CORS の プリフライト・リクエストを発生させて観察する

CORS の プリフライト・リクエストを発生させて観察するページを作成しました。