2018.07.12Googleスプレッドシートで作成したグラフをWebページに埋め込む方法をお探しの方向け。Googleスプレッドシートで作成したグラフは、画像として保存しなくても、Googleマップのように、Webページに埋め込んで表示させる事ができます。この記事では、Googleスプレッドシートで作成したグラフをWebページに埋め込む方法を解説します。出力されたコードをそのまま貼り付けるとエラーが出るまとめスポンサーリンクGoogleスプレッドシートで作成したグラフをWebページに埋め込む手順Googleスプレッドシートシートで作成したグラフをWebページに埋め込む手順を解説します。手順3:取得したタグをWebページ(投稿・固定ページ)に貼り付ける上記のとおりです。手順1:埋め込み表示させたいグラフを選択まず最初に、Webページに埋め込み表示させたいグラフを選択します。Googleスプレッドシートを立ち上げ、表示させたいグラフがあるシートを開きます。シートを開いたら、グラフのどこでも良いのでクリックして下さい。グラフをクリックすると、1右上に「・・・」と縦に並んだマークが出現するのでここをクリックします。メニューが開いたら、2「グラフを公開」を選択して下さい。「グラフを公開」を選択すると、「ウェブに公開」というメニューが表示されますので、1「埋め込む」タブを選択して、2「公開」をクリックします。下図のように埋め込み表示用のタグが表示されますので、タグをコピーして下さい。タグをコピーしたら、Webページにタグを貼り付けます。インタラクティブ表示と画像の違い埋め込みタグを取得する際、下図のように、インタラクティブと画像という選択肢が表示されます。インタラクティブ画像2つの違いは次のとおりです。インタラクティブインタラクティブを選択すると、Webサイトにグラフを表示させる際、ユーザーがグラフの部分にマウスオーバーすると、グラフの縦軸と横軸のタイトル、数値を表示せる事ができます。画像を選択すると、画像ファイルとして出力されるため、マウスオーバーしても変化はありません。手順3:取得したタグをWebページ(投稿・固定ページ)に貼り付けるグラフを表示させるページにタグを貼り付けます。グラフを表示させたいページの編集画面(投稿・固定ページ共通)を開きます。開いたら「テキスト」タブをクリックして下さい。取得したタグをテキストモードで貼り付けないとWebページに表示されません。テキストモードに変更したら、取得したタグを貼り付け、「公開(更新)」をクリックします。プレビューで確認プレビューで確認してみると、Googleスプレッドシートで作成したグラフがWebページに埋め込み表示されていることが確認できます。以上でWebページにGoogleスプレッドシートのグラフを埋め込み表示させる方法は完了です。Googleスプレッドシートで作成したグラフをWebサイトに埋め込む時の注意点Googleスプレッドシートで作成したグラフをWebサイトに埋め込む際に、注意点が1つだけあります。出力されたコードをそのまま貼り付けるとエラーが出る上記のとおりです。出力されたコードをそのまま貼り付けるとエラーが出るモバイル表示を高速化するAMPを導入している場合、出力されたコードをそのまま貼り付けると、AMPでエラーが出ます。AMPテスト」で調べてみると、下図のようにエラーが表示されました。AMPでエラーが出ないようにするには修正が必要です。Googleスプレッドシートを埋め込んでAMPでエラーが出た時の修正方法AMPエラーが出ないように修正する方法を解説します。タグの一番後ろの方に、「seamless=””」というタグがありますので、ここを削除して下さい。下図のように、「scrolling=”no”」で終わるように修正します。修正したら、「更新」ボタンをクリックして設定を保存しましょう。AMPテスト」で確認してみましょう。AMPエラーが解消されましたね。以上でGoogleスプレッドシートを埋め込んだ時のAMPエラーの修正は完了です。まとめ以上、Googleスプレッドシートで作成したグラフをWebページに埋め込む方法について解説しました。Googleスプレッドシートで作成したグラフを公開したい時は、グラフをキャプチャーしなくても、直接グラフを埋め込むことで、Webページに表示させる事ができます。この方法のメリットは、画像をわざわざ作成しなくても良いという点と、グラフの数値を変更した際に、画像を差し替える必要が無いという事です。Googleスプレッドシートのグラフと埋め込んだグラフが連動しているため。便利なので、グラフをWebページに公開する時は、是非お試しください。ちなみに、GoogleマップをWebページに埋め込み表示させる方法に興味がありましたら、「GoogleマップをWebサイトに埋め込む方法【最短ルートの表示も解説】」をどうぞ。隆司ブログ・Webマーケティング・SEO、アフィリエイトの情報など、実践していることや、ITガジェット・RPA・チャットボット・ドローンなどの情報を発信。me!WordPressを活用したWebマーケティング、SEOを中心に情報を発信しています。このブログを通してブログマーケティングに取り組んでいます。隆司ブログ・Webマーケティング・SEO、アフィリエイトの情報など、実践していることや、ITガジェット・RPA・チャットボット・ドローンなどの情報を発信。t("").html(tocplus.visibility_show).text():default:t(this).html(tocplus.visibility_hide),t.cookie&&(o?t.cookie("tocplus_hidetoc","1",{expires:30,path:"/"}):t.cookie("tocplus_hidetoc",null,{path:"/"})),t("#toc_container").css("width",tocplus.width).removeClass("contracted"),t("ul.toc_list").show("fast")}})}}});タイトルとURLをコピーしました。