作成したTier表をブログに埋め込む

作成したTier表をiframeで簡単にブログやWebサイトに埋め込み表示できます

1. 埋め込みウィジェットとは

公開されたTier表は、外部のブログやWebサイトにiframeで埋め込み表示できます。WordPressやはてなブログ、note、自作サイトなど、HTML編集が可能な場所であればどこでも設置できます。

埋め込みウィジェットはレスポンシブ対応で、PCでもスマートフォンでもきれいに表示されます。

2. 埋め込みコードを取得する

公開済みTier表の詳細ページで、「画像を作成」ボタンの隣にある「埋め込みコードをコピー」ボタンをクリックします。クリップボードにiframeタグがコピーされます。

コピーしたコードをブログ記事やWebページのHTML編集画面に貼り付けるだけで設置完了です。

3. カスタマイズする

埋め込みコードのwidth(横幅)とheight(高さ)を変更することで、表示サイズをカスタマイズできます。デフォルトはwidth="100%"、height="480"です。

ブログのレイアウトに合わせて調整してください。heightの推奨値はランク数やアイテム数に応じて300〜600程度です。

4. 埋め込みコード例

以下は埋め込みコードの例です。TIERBOARD_IDの部分を実際のTier表IDに置き換えてご利用ください。

<iframe src="https://sortpia.com/embed/TIERBOARD_ID" width="100%" height="480" frameborder="0" allowfullscreen></iframe>

便利なTips

  • ブログ記事でTier表を紹介する際に、埋め込みウィジェットを使うとインタラクティブに表示できます
  • WordPressでは「カスタムHTML」ブロックに埋め込みコードを貼り付けてください

さっそくTier表を作ってみよう

Tier表を作成する