Tier表をブログへ埋め込む方法 - iframeコード・高さ調整・表示されない時の確認
公開: 2026-06-10 ／ Sortpia編集部
Sortpiaでは、公開済みTier表の共有メニューからiframeコードをコピーし、外部ブログやWebサイトへ表示できます。標準コードは幅100%、高さ480pxで、専用の`/embed/:id`ページを遅延読み込みします。ただし、貼り付け先が外部iframeを許可していることが前提で、すべてのブログサービスや料金プランで動くわけではありません。この記事では、コードの内容、表示範囲、高さ調整、セキュリティ属性、表示されない場合の代替を説明します。
共有メニューから埋め込みコードをコピーする
公開済みTier表の編集画面で「共有」を開き、「埋め込みコードをコピー」を選びます。クリップボードへの書き込みに成功すると通知が表示されます。ブラウザがクリップボード権限を拒否した場合は失敗通知になるため、サイト権限を確認して再実行します。
コードの`src`には現在のSortpiaのオリジンと`/embed/対象ID`が入り、`width="100%"`、`height="480"`、`frameborder="0"`が設定されます。IDを推測で書き換えず、対象Tier表から生成したコードを使ってください。下書き、非公開、削除済み等で外部から取得できないTier表は表示されません。
埋め込み専用ページに表示される内容
埋め込みページは、Tier表のタイトル、ランク、配置済みアイテムとラベル、元の公開ページへ進む「Sortpiaで見る」リンク、Powered by表記を表示します。通常ページのヘッダー、編集操作、未配置パレット、説明文、コメント、いいね、共有メニューは含まれません。
アイテムをホバーして詳細を開く機能や、埋め込み内で配置を変更する機能はありません。元ページへのリンクは新しいタブで開きます。Tier表本体を後から更新した場合、iframeは次回読込時に現在取得できる内容を表示しますが、貼り付け先やブラウザのキャッシュで反映が遅れる可能性があります。
HTMLを許可する編集欄へ貼り付ける
WordPress等では、通常の段落ではなくカスタムHTML相当のブロックへコードを貼ります。編集画面だけで判断せず、公開前プレビューと実際の公開URLをログアウト状態で確認します。CMS、利用プラン、投稿権限、テーマ、セキュリティプラグインによって、iframeが削除、無効化、別表示へ変換される場合があります。
特定サービスやプランなら必ず動くとは断定できません。まず利用中サービスの最新公式ヘルプで、任意の外部iframe、許可ドメイン、HTML編集の条件を確認します。組織サイトでは管理者の埋め込み許可リストやContent Security Policyも確認してください。
480pxで収まらないTier表は高さを調整する
標準幅はコンテナの100%、高さは480pxです。幅は親要素に合わせて変わりますが、高さはTier表の内容に応じて自動伸長しません。ランクやアイテムが多いとiframe内に続きがあり、固定高さの中でスクロールが必要になる場合があります。
必要に応じてコードの`height="480"`を600、800等へ変更し、PCとスマートフォンの両方で確認します。万能な推奨値はありません。親記事の横幅、文字サイズ、ランク数、アイテム折返しで必要高さが変わります。極端に縦長ならTier表を用途別に分割し、記事内の占有面積も抑えます。
sandbox・リファラー・遅延読込の意味
標準コードの`sandbox`は、スクリプト、同一オリジン動作、リンク先のポップアップ等、埋め込み表示に必要な範囲を許可します。完全にスクリプトを止める設定でも、あらゆる危険をなくす保証でもありません。属性を無条件に削除・拡張せず、貼り付け先のセキュリティ方針に従います。
`referrerpolicy="strict-origin-when-cross-origin"`は外部遷移時のリファラー範囲を制御し、`loading="lazy"`は画面外のiframe読込を遅らせる指定です。遅延読込だけでCore Web Vitalsへの影響がゼロになるとは限らないため、複数埋め込みを載せる場合は実ページで速度を測定します。
表示されない場合とSEO上の代替
表示されない場合は、保存後のHTMLにiframeが残っているか、Tier表が公開中か、ブラウザ開発者ツールにCSPやframe関連エラーがないかを確認します。セキュリティ設定を無条件に緩めず、CMS管理者または公式サポートへ、対象ドメインとエラーを伝えます。
iframeを許可できない場合は、権利を確認したPNG画像、短い評価条件、公開Tier表への通常リンクを組み合わせます。埋め込み内の文字が親記事の本文として検索評価されるとは限らないため、記事側にも対象、評価軸、主な判断、更新日を独自の文章で説明します。埋め込みだけで滞在時間や検索順位が上がるとは断定しません。
よくある質問
Q. 埋め込みコードはどこでコピーできますか？
A. 公開済みTier表の編集画面で共有メニューを開き、「埋め込みコードをコピー」を選びます。
Q. 標準サイズは何pxですか？
A. 幅は100%、高さは480pxです。高さは自動伸長しないため、内容と親ページに合わせて調整します。
Q. コメントやいいねも埋め込み内で使えますか？
A. いいえ。専用ページはタイトル、ランク、配置済みアイテム、元ページへのリンク等を表示し、コメントや編集操作は含みません。
Q. WordPressやnoteで必ず動きますか？
A. 保証されません。サービス、プラン、権限、セキュリティ設定ごとに外部iframeの許可条件を確認してください。
Q. iframeが使えない場合は？
A. PNG画像、独自の説明文、公開Tier表への通常リンクを組み合わせます。画像の権利と代替テキストも確認してください。
さっそくTier表を作ってみよう
Sortpiaなら、登録から公開まで5分。無料で何個でも作れます。
関連記事
- Tier表をPNG画像で保存する方法 - 背景・枠・ラベルと端末別の動作 — 画像作成画面の設定と保存方法を端末別に確認し、共有前の欠落や権利問題を防ぐガイドです。
- Tier表をX・SNSで共有する方法 - OGP画像・共有シート・キャッシュの確認 — 共有先で正しいタイトルと画像を表示するために、公開範囲・サムネイル・キャッシュ・権利を確認する手順です。
- Tier表の画像をAIで生成する方法｜プロンプトと権利確認の手順 — AI生成画像をTier表へ追加する操作と、生成物の利用が自動的に保証されない点を含む安全な確認手順。