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

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

関連記事

DokuWiki

DokuWiki: Layout Switcher Plugin

DokuWiki用プラグイン「Layout Switcher Plugin」のページです。 目次1. 概要2. インストールと設定(1) プラグインファイルのダウンロード(2) プラグインをサーバーに …

Firefox

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

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

Web Components

1つのWebページに複数のHTML要素サンプルを記述する

1つのWebページに複数のHTML要素サンプルを記述する方法を紹介します。

SQLite

PHP + SQLite を利用してアクセスカウンターを作る

PHP + SQLite を利用してアクセスカウンターを作ります。

Web

複数のGoogleアカウントのGmailページを一括で開く

複数のGmailアカウントのメールページを一括で開く方法について書いています。