Googleスプレッドシートで作成したグラフをWordPressサイトに埋め込む方法

Googleスプレッドシートで作成したグラフをウェブサイトに張り付けたい場合、グラフを画像として保存しなくても、Gooleスプレッドシートの機能でグラフを簡単に埋め込むことが可能です。

Googleスプレッドシートで作成したグラフをウェブサイトに埋め込む手順

Googleスプレッドシートを立ち上げる

ウェブサイトに表示させたいGoogleスプレッドシート選択し、スプレッドシートを開きます。スプレッドシートを開きましたら、グラフのどこでも良いのでクリックします。

すると、右上に「・・・」と縦に並んだマークが出現しますので、①ここをクリックします。クリックするとメニューが開きますので、②「グラフを公開」をクリックします。

すると、下記画面が表示されますので、①「埋め込む」を選択し、②「公開」をクリックします。

公開してもよいか?という確認が画面上部に表示されますので「OK」をクリック

すると、埋め込み用のタグが表示されますので、タグをコピーします。

タグをコピーしたら、ウェブページにタグを貼り付けます。

ウェブページ(投稿・固定ページ)に張り付け

グラフを表示させたいページ(投稿・固定ページ共通)を開きます。開きましたら、「テキスト」をクリックします。

※テキストモードで貼り付けないとうまく表示されません。

タグを貼り付け、「プレビュー」で確認してみます。

ウェブページにGoogleスプレッドシートで作成したグラフを埋め込むことができました。

インタラクティブ表示と画像の違い

埋め込みタグを取得する際、下記のように「インタラクティブ」と「画像」という選択肢が出てきますが、この違いは次の通りです。

インタラクティブ

インタラクティブを選択すると、グラフをウェブサイトに表示させた際、ユーザーがグラフの部分にマウスオーバーすると、グラフの縦軸と横軸のタイトル、数値を表示せる事ができます。

画像

画像を選択すると、画像ファイルとして出力されるため、マウスオーバーしても変化はありません。

 

まとめ

以上、Googleスプレッドシートで作成したグラフをWordPressサイトに埋め込む方法を解説いたしました。

ユーザーにスプレッドシートで作成したグラフを見せたい時は、グラフをキャプチャーして画像ファイルを作成しなくても、直接グラフを埋め込むことにより簡単に表示させる事ができます。

この方法の良いところは、画像をわざわざ作成しなくても良いという点と、グラフの数値を変更した際、Googleスプレッドシートのグラフと埋め込んだグラフが連動していますので、新たに画像を作成する手間が必要ありません。

非常に便利な機能ので、グラフをウェブサイトに公開するような時は、スプレッドシートの埋め込み機能を使うという方法を検討されてみて下さい。

Follow me!

PROFILE

瀬間 隆司
瀬間 隆司WordPress講座講師
上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法


期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」