作成した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」ブロックに埋め込みコードを貼り付けてください