スプレッドシートをWebページに埋め込む方法

共同編集などが便利なGoogleスプレッドシートだが、作成した表やデータなどをWebページで公開したいこともあると思うが、スプレッドシートは簡単にWordPressなどのブログやWebページに埋め込んで公開できるようになっている。その手順の紹介。

関連 Google スプレッドシートを共有する方法【スマホ・PC】

シェアする

目次

スプレッドシートを埋め込む手順

Webに公開したいスプレッドシートを開いたらメニューのファイルをクリックして、ウェブに公開…を選択。

この画面が開いたら、埋め込むのタブをクリックし、必要に応じて公開範囲の「ドキュメント全体」あるいは、個別の「シート」を選択して公開をクリック。

さらに確認のアラートウィンドウが開くのでOKをクリック。

すると埋め込むためのソースコードが表示されるので、それをコピペしてブログやWebページに貼り付けて公開するだけ。

カスタマイズ

上記のように、そのまま貼り付けてもいいが、多少の見た目をスタイルシートを使って変更することもできる。
<iframe src="https://docs.google.com/spreadsheets/d/e/xxxxxxxx/pubhtml?widget=true&amp;headers=true"></iframe>

<iframe
style="border:2px solid red; width:400px; height:200px" src="https://docs.google.com/spreadsheets/d/e/xxxxxxxx/pubhtml?widget=true&amp;headers=true"></iframe>

下記が埋め込みのカスタマイズサンプル。

指定のセルのみを表示

使う用途があるか分からないが、特定の範囲のセルのみを表示したい場合のやり方。

<iframe src="https://docs.google.com/spreadsheets/d/e/xxxxxxxx/pubhtml?widget=true&amp;headers=true"></iframe>

iframeタグのURLの後ろにサンプルのような&gid=0&range=A1:B6をつければOK。「range=A1:B6」はセルA1からセルB6の範囲の事を指す。
<iframe src="https://docs.google.com/spreadsheets/d/e/xxxxxx/pubhtml?widget=true&amp;headers=true&gid=0&range=A1:B6"></iframe>

編集の許可

スプレッドシートをWebページに埋め込んだら、閲覧だけではなく編集も許可をしたいこともあると思うが、残念ながら調べた限りではできない。なので、編集を許可したい場合は、編集許可設定したスプレッドシートへのリンクを貼って編集をしてもらうことになる。手順は下記を参考にしてもらえれば。

関連記事

フォローする
カテゴリ:Google