Googleスプレッドシートをブログの投稿記事に埋め込む方法

2021年09月29日ブログの極意Googleスプレッドシート

Google

Chromebook を利用するようになって、すっかり自分で利用するファイルは「Googleドキュメント」や「Googleスプレッドシート」になりました。特に、「Googleスプレッドシート」を頻繁に利用するようにまりました。そんなスプレットシートを本ブログの投稿記事に埋め込む方法を投稿しておきます。

これ・・・なんてことはありませんが、「Google ドキュメント、スプレッドシート、スライド、フォームを公開する – パソコン – ドキュメント エディタ ヘルプ」に詳細が記載れています。

公開するための手順

下記に「Googleスプレッドシート」を公開するための手順を記載します。

  1. Googleスプレットシートのファイルを開きます。
  2. 上部の [ファイル] 次に [ウェブに公開] をクリックします。
  3. 表示されたウィンドウで [埋め込む] をクリックします。
  4. 公開オプションを選択します（スプレッドシート全体を公開するか、シート別に公開するかを選択します）。
  5. [公開] をクリックします。
  6. テキスト ボックス内の HTML をコピーして、サイトやブログに貼り付けます。

Googleスプレッドシートの編集

更に知っておきたいのが、スプレッドシートの編集。これも上記のヘルプに記載があります。特に、スプレッドシートの一部を表示したり非表示にしたりするには、公開するために提供されるHTMLコードの以下を編集します。

  • gid=: シート ID。
  • range=: ウェブに公開されている行と列。A1:B14 などです。
  • widget=: true または false。true の場合、シートタブが下部に表示されます。
  • headers=: true または false。true の場合、行番号と列文字が表示されます。
  • chrome=: true または false。true の場合、タイトルとフッターが表示されます。

実は、WordPress の埋め込み機能が使えないので、実際には HTML コードを実際に書く必要があります。

埋め込みのサンプル

上記を参考に実際に「Googleスプレッドシート」を公開する時のコードを以下に表記します。また、下記のコードを埋め込んだ時の埋め込みを表示しておきます。

<iframe width="100%" height="330" src="<GoogleスプレッドシードのURL>/pubhtml?
gid=<提供されるID>
&single=false
&widget=false
&headers=false
&chrome=false
&range=a2:h14"></iframe>