共同編集などが便利なGoogleスプレッドシートだが、作成した表やデータなどをWebページで公開したいこともあると思うが、スプレッドシートは簡単にWordPressなどのブログやWebページに埋め込んで公開できるようになっている。その手順の紹介。
関連 Google スプレッドシートを共有する方法【スマホ・PC】
スプレッドシートを埋め込む手順
Webに公開したいスプレッドシートを開いたらメニューのファイルをクリックして、ウェブに公開…を選択。
この画面が開いたら、埋め込むのタブをクリックし、必要に応じて公開範囲の「ドキュメント全体」あるいは、個別の「シート」を選択して公開をクリック。
さらに確認のアラートウィンドウが開くのでOKをクリック。
すると埋め込むためのソースコードが表示されるので、それをコピペしてブログやWebページに貼り付けて公開するだけ。
カスタマイズ
上記のように、そのまま貼り付けてもいいが、多少の見た目をスタイルシートを使って変更することもできる。
<iframe src="https://docs.google.com/spreadsheets/d/e/xxxxxxxx/pubhtml?widget=true&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&headers=true"></iframe>
下記が埋め込みのカスタマイズサンプル。
指定のセルのみを表示
使う用途があるか分からないが、特定の範囲のセルのみを表示したい場合のやり方。
<iframe src="https://docs.google.com/spreadsheets/d/e/xxxxxxxx/pubhtml?widget=true&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&headers=true&gid=0&range=A1:B6"></iframe>
編集の許可
スプレッドシートをWebページに埋め込んだら、閲覧だけではなく編集も許可をしたいこともあると思うが、残念ながら調べた限りではできない。なので、編集を許可したい場合は、編集許可設定したスプレッドシートへのリンクを貼って編集をしてもらうことになる。手順は下記を参考にしてもらえれば。
- Googleスプレッドシートの便利な使い方まとめ
- Google スプレッドシートを共有する方法【スマホ・PC】
- スプレッドシートのチェックボックスでカウントする方法
- Googleフォームをスプレッドシートと連携して回答を集計・編集する方法
- Googleスプレッドシートでプルダウンリストを作成する方法
- スプレッドシートをWebページに埋め込む方法
- スプレッドシートのチェックボックス選択でセルの色を変更する方法
- スプレッドシートのプルダウン選択でセルの色を変更する方法
- GoogleマイマップのインポートでCSVやスプレッドシートを利用する方法
- スプレッドシートの関数を使ってGoogle翻訳する方法
- iPhoneでのスプレッドシートの編集方法・使い方
