【Googleスプレッドシート】グラフをWordPressに埋込!公開URLでの共有

「Googleスプレッドシートで作ったグラフをWordPressの記事に表示したいけど、画像にすると更新が面倒……。」そんなお悩みはありませんか。スプレッドシートのグラフを公開URLとして共有すれば、元データを更新するだけでWordPress側のグラフも自動的に反映されます。この記事では、グラフを公開URLで発行し、WordPressに埋め込む手順を詳しく解説します。特別なプラグインは一切不要です。

Googleスプレッドシートのグラフを公開URLで共有する仕組み

スプレッドシートのグラフをWeb上で公開するには、「ウェブに公開」機能を使います。この機能を利用すると、グラフ専用の公開URLが生成されます。公開URLには埋め込み用のHTMLタグ(iframe)も含まれており、そのコードをWordPressのカスタムHTMLブロックに貼り付けることで、グラフを記事内に表示できます。公開設定は「すべての人が閲覧可」にする必要があります。また、グラフの元データを更新した場合、WordPress側のグラフも自動的に最新の状態に変わります。ただし、反映には若干のタイムラグがあることと、公開操作をやり直さなければならないケースもあるため、注意が必要です。

グラフを公開URLでWordPressに埋め込む手順

手順1: グラフを作成する

1. データを入力してグラフを作成
   スプレッドシートでグラフにしたいデータを選択し、「挿入」メニューから「グラフ」をクリックします。グラフエディタで好みのグラフタイプやデザインを設定してください。

手順2: グラフをウェブに公開する

1. グラフ単体を選択する
   グラフをクリックして選択状態にします。グラフの枠線が表示されれば選択されています。
2. 「ファイル」→「共有」→「ウェブに公開」
   メニューを辿り、「ウェブに公開」ダイアログを開きます。
3. 公開範囲と埋め込みを設定する
   ダイアログで「リンク」タブを選び、公開範囲を「すべての人が閲覧可」に設定します。次に「埋め込み」タブをクリックし、「グラフ」が選択されていることを確認します。表示サイズを指定することもできます。
4. 「公開」ボタンをクリック
   公開を開始すると、埋め込みコード(iframe)が表示されます。このコードをコピーしておきます。同時に公開URLもコピーできます。

手順3: WordPressに埋め込みコードを貼り付ける

1. WordPressの投稿編集画面を開く
   グラフを表示したい投稿または固定ページの編集画面を開きます。
2. 「カスタムHTML」ブロックを追加
   ブロックエディタ(Gutenberg)で「カスタムHTML」ブロックを追加します。
3. 埋め込みコードを貼り付ける
   先ほどコピーしたiframeタグをそのまま貼り付けます。コードは自動的に加工されず、そのまま表示されます。
4. プレビューして確認する
   公開前に「プレビュー」でグラフが正しく表示されるか確認します。グラフが表示されない場合は、コードの誤りや公開設定を再確認してください。

埋め込み時の注意点とよくあるトラブル

グラフが表示されない・白い枠だけ出る

最も多い原因は、公開設定が「制限付き」のままであることです。公開URLを取得する前に、スプレッドシート全体の共有設定を「リンクを知っている全員」に変更してください。また、コピーした埋め込みコードに誤りがないか、特に引用符や閉じタグを確認します。

グラフサイズが合わない・崩れる

公開時に指定したサイズが固定されてしまうため、レスポンシブ対応が必要な場合は、埋め込みコードにCSSを追加します。例えば、iframeに「style=”max-width:100%;”」を追記するか、WordPressのテーマのCSSで調整してください。また、グラフのアスペクト比を保つために、widthとheightを適切に設定しましょう。

データを更新してもグラフが反映されない

スプレッドシートのデータを変更しても、既存の公開URLではすぐに反映されない場合があります。その場合は、もう一度「ウェブに公開」ダイアログを開き、「公開」ボタンを再度クリックして再公開してください。キャッシュの影響で数分かかることもあります。

公開URL方式と埋め込みコード方式の比較

どちらの方法も基本的な仕組みは同じです。公開URL方式はWordPressの埋め込みブロックが対応している場合に簡単ですが、カスタムHTMLブロックを使う埋め込みコード方式のほうがサイズやスタイルを細かく制御できます。記事のデザインに合わせて使い分けてください。

まとめ

Googleスプレッドシートのグラフを公開URLで共有し、WordPressに埋め込む手順を解説しました。グラフを「ウェブに公開」で公開し、取得した埋め込みコードをWordPressのカスタムHTMLブロックに貼り付けることで、動的なグラフを記事内に表示できます。公開範囲の設定や再公開のタイミングに注意すれば、データ更新も自動反映されます。次は、公開URLを利用してグラフの自動更新間隔を調整したり、WordPressのテーマに合わせてCSSをカスタマイズしてみてください。また、他のGoogleドキュメント(ドキュメントやスライド)の埋め込みにも同じ手法が応用できます。