Googleスプレッドシート 誰でも簡単に表やグラフをウェブに公開・埋め込む方法

Googleスプレッドシート サイトに公開・埋め込みする方法 Googleスプレッドシート
記事内に広告が含まれています。
スポンサーリンク

今回は、Googleスプレッドシートの中でも、とても便利な機能の1つ、「ウェブに公開」する方法をご紹介させて頂きます。

作成したシートはもちろん、シート全体、指定したシート、グラフのみと公開の仕方は様々です。

公開の仕方には、以下の2通りがあります。

  • URLを公開する
  • サイトに埋め込む

公開するまでの手順はとても簡単ですが、埋め込みに関しては少し調整が必要になります。

ご自身のウェブサイトに表やグラフを埋め込むと、記事の内容によってはより内容を伝えやすい記事になりますので、ぜひ積極的に利用してみてください。

スポンサーリンク

ウェブに公開

Googleスプレッドシート 表やグラフを公開する方法

作成した表やグラフをウェブに公開してみましょう。

メニューバーの「ファイル」→「共有」→「ウェブに公開」をクリックします。

Googleスプレッドシート 表やグラフを公開する方法

設定画面が表示されますので、「リンク」の、「ドキュメント全体」をクリックします。

公開する範囲を選択出来ますので、公開したいシートやグラフを選択します。

Googleスプレッドシート 表やグラフを公開する方法

ウェブページ」をクリックして、公開する方法を選択します。

  • ウェブページ:URLをクリックすると指定したシートがブラウザに表示されます。
  • カンマ区切り形式(.csv):URLをクリックすると、CSVファイルがダウンロードされます。
  • タブ区切りの値(.tsv):URLをクリックすると、tsvファイルがダウンロードされます。
  • PDFドキュメント:URLをクリックすると、pdfファイルがダウンロードされます。
Googleスプレッドシート 表やグラフを公開する方法

赤い枠線の中に、選択した公開方法のURLが表示されますので、こちらをコピーして、メールやSNS、ウェブ等に貼り付けてください。

公開するコンテンツと設定」をクリックすると、一番下に、「変更が加えられたときに自動的に公開する」という場所がありますので、ここにチェックを入れておくと、公開したシートに変更を加えた時は、その内容が常に反映されるようになります。

公開を停止する時は、「公開停止」をクリックします。

スポンサーリンク

ウェブに埋め込む

シート(表)を埋め込む

Googleスプレッドシート 表やグラフを公開する方法 ウエブに埋め込む

先程は、URLを公開して、シートやグラフを表示したり、ダウンロードしたりするようにしました。

ここでは、直接ウェブサイトに埋め込む方法をご紹介します。

先ほどと同じ手順で、「ウェブ公開」画面を表示します。

埋め込む」をクリックして、公開する範囲を選択します。

Googleスプレッドシート 表やグラフを公開する方法 ウエブに埋め込む

範囲を選択したら、「公開」をクリックします。

ポップアップ画面が表示され、公開の許可を求められますので、「OK」をクリックします。

Googleスプレッドシート 表やグラフを公開する方法 ウエブに埋め込む

赤い枠線の部分に、ソースコードが表示されますので、「Ctrl + C」を押して、ウェブサイト等に貼りつけてください。

Googleスプレッドシート 表やグラフを公開する方法 ウエブに埋め込む

なお、このソースをそのまま埋め込むとシートの表示が非常に小さいサイズで表示されてしまいますので、少し調整が必要になります。

Googleスプレッドシート 表やグラフを公開する方法 ウエブに埋め込む

先程のソースコードの最後の部分にある、「false”」のあとに、「<style>タグ」を挿入します。

style=”width:800px; height:600px”

Googleスプレッドシート 表やグラフを公開する方法 ウエブに埋め込む

サイズは表やグラフ、ご自身のサイトに合わせて調整してください。

<style>タグ を利用すると、その他にも様々な変更を加えることが可能です。

WordPressを使用している場合は、カスタムCSSの欄にCSSを書き込んで表を調整することも可能です。

Googleスプレッドシート 表やグラフを公開する方法 ウエブに埋め込む

公開を停止するには、先程と同じように、「公開停止」をクリックしてください。

グラフを埋め込む

Googleスプレッドシート グラフをウェブに埋め込む方法

「ウェブに公開」画面から、範囲で「グラフ」を指定します。

(ここでは店舗来客数)

インタラクティブ」と「画像」の選択がありますので、好みの方を選択します。

  • インタラクティブ:マウスをのせるとグラフの詳細が表示されます。
  • 画像:一般的な画像です。

ウェブに公開」画面は、タブの「ファイル」から表示しましたが、グラフから直接表示させることも出来ます。

Googleスプレッドシート グラフをウェブに埋め込む方法

グラフの右上にある、3点リーダーをクリックすると、「グラフを公開」という項目がありますので、こちらをクリックしても「ウェブに公開」画面が表示されます。

Googleスプレッドシート グラフをウェブに埋め込む方法

ここでは、「インタラクティブ」を選択して、「公開」をクリックします。

許可を求められますので「OK」をクリックしてください。

Googleスプレッドシート グラフをウェブに埋め込む方法

赤い枠線の部分に、ソースコードが表示されますので、「Ctrl + C」を押して、ウェブサイト等に貼りつけてください。

Googleスプレッドシート グラフをウェブに埋め込む方法

棒グラフの上にマウスオーバー(マウスをのせる)すると、各棒の詳細が表示されます。

公開方法を「画像」にすると、マウスオーバーしても何も表示されません。

Googleスプレッドシート グラフをウェブに埋め込む方法

シートの時と同様に、「公開するコンテンツと設定」から「公開停止」をクリックすると、公開は終了します。

スポンサーリンク

まとめ

いかがでしたか。

個人的には、表を埋め込むよりも、グラフを埋め込むのに適した機能だと感じています。

「表」の場合は、挿入に際してひと手間必要ですし、表のサイズが大きいと画面をスクロールして見なくてはなりません。

サイトを訪れた際に、スクロールするのは少し面倒に感じる方も多いと思います。

また、今回は割愛していますが、「表」に関しては、AMP化したサイトでは上手く表示できない問題があったり、スマートフォンによっては非常に見えにくい場合があるようです。

ご自身のサイトに導入する際は、プレビュー画面で確認の上、挿入してください。

今回も最後までお読み頂きありがとうございました。

コメント