Googleスプレッドシートは便利な表ツールですが、ブログやWebサイトに貼り付けるとき、「表の一部だけを見せたい」「表示する行・列を絞りたい」というケースもあります。
この記事では、スプレッドシートの一部分だけをiframeでブログに埋め込む方法を紹介します。
見本
前提：表示範囲と公開範囲は別に考える
手順（通常の流れ）
ファイル→共有→ウェブに公開- 表示形式：
埋め込む - 表示したいシートを選択
- 表示される
<iframe>コードをコピー
公開設定ではファイル全体か対象シートを選びます。rangeは埋め込みの表示を絞る指定で、範囲外のデータへのアクセスを制限する設定ではありません。非公開データを含む表を公開し、rangeだけで隠す運用は避けてください。公開用の別ファイルへ、見せてよいデータだけを用意すると管理しやすくなります。
特定の範囲だけを埋め込む方法
以下のようにiframeコードに range パラメータを追加すれば、指定範囲のみ表示できます。
例：A1〜N13の範囲を表示
<iframe title="公開スプレッドシートの指定範囲 A1:N13" src="https://docs.google.com/spreadsheets/d/1wZtnlYqkMsoLr9ykiHo5PFf0t36jr4OYr8BQZcq1uNA/pubhtml?gid=1673223265&single=true&widget=true&headers=false&range=A1%3AN13" width="570" height="330" style="max-width:100%;border:0;" loading="lazy"></iframe>主要パラメータの解説
| パラメータ | 意味・効果 |
|---|---|
single=true | 指定シートを単独で表示する指定（公開権限は変更しない） |
widget=true | シートタブの表示指定。trueで表示 |
headers=false | 行列番号（A,1など）を非表示 |
range=A1%3AN13 | 表示したい範囲（A1:N13）をURLエンコードで指定 |
iframeタグに width や height を追加して表示サイズを自由に変更可能です。
見本
記事冒頭に表示
⚠ 注意点：閲覧権限と公開範囲
- ウェブ公開の閲覧対象はアカウントや組織設定にも依存します。個人情報や機密情報は公開用データへ含めないでください。
- 通常の共有設定と「ウェブに公開」は別に確認します。埋め込みを記事から削除しただけでは、公開URLの公開停止にはなりません。
まとめ
- iframeでスプレッドシートをブログに貼る場合、範囲指定でスリムに表示可能
range=パラメータを使うことで、閲覧者に見せたい範囲だけ表示できる- 表示サイズも
width/heightで調整でき、デザインにも柔軟対応
Googleスプレッドシートを活用した情報発信・レポート共有に、見せたい部分だけスマートに埋め込む技術をぜひ取り入れてください。
WordPressへの貼り付けと戻し方
上のコードはこのページの公開見本です。自分の表を埋め込むときは、Googleが生成した埋め込みコードを元にし、srcの公開URLとgidを自分のものへ置き換えます。既存の「?」は残し、追加パラメータは「&」でつなぎます。WordPressの「カスタムHTML」ブロックへ貼り付け、プレビューで確認してください。PHPのfunctions.phpへは貼りません。
max-width:100%は記事幅からのはみ出しを抑えますが、表の列を自動で折り返す指定ではありません。スマホでは表の内部を横にスクロールして読めるか確認します。titleは埋め込み内容を説明する名前へ変更し、heightは必要な高さに調整してください。
表示されない場合は、公開URL・gid・range、Google側の公開状態を確認します。ログイン中だけ見える状態になっていないかも確認してください。WordPressの編集権限やセキュリティ設定によりiframeが保存時に除去される場合もあります。
サイトから外すときはカスタムHTMLブロックを削除します。Google側での公開も止める場合は「ウェブに公開」画面の公開設定から停止します。ほかの記事にも埋め込んでいる場合は、それらの表示も止まる点を確認してください。
公開設定と各パラメータはGoogle公式の公開・埋め込みヘルプを参照しています。
