WordPress│指定範囲にだけGoogleスプレッドシートの表をiframeで埋め込む方法

Googleスプレッドシートは便利な表ツールですが、ブログやWebサイトに貼り付けるとき、「表の一部だけを見せたい」「シート全体を公開したくない」というケースもあります。

この記事では、スプレッドシートの一部分だけをiframeでブログに埋め込む方法を紹介します。

見本

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

前提:通常の埋め込みでは全シートが表示される

手順(通常の流れ)

  1. ファイルウェブに公開
  2. 表示形式:埋め込む
  3. 表示したいシートを選択
  4. 表示される <iframe> コードをコピー

この状態だと シート全体が表示され、閲覧者にすべてのセルが見えてしまうため注意が必要です。

特定の範囲だけを埋め込む方法

以下のようにiframeコードに range パラメータを追加すれば、指定範囲のみ表示できます。

例:A1〜N14の範囲を表示

<iframe width="600" height="400" src="https://docs.google.com/spreadsheets/d/?????&single=true&widget=true&range=A1%3AN14& "></iframe>

主要パラメータの解説

パラメータ意味・効果
single=true単一シート表示(ナビゲーション非表示)
widget=trueiframeウィジェットで表示
headers=false行列番号(A,1など)を非表示
range=A1%3AN14表示したい範囲(A1:N14)をURLエンコードで指定

iframeタグに widthheight を追加して表示サイズを自由に変更可能です。

見本

記事冒頭に表示

⚠ 注意点:閲覧権限と公開範囲

  • ウェブに公開する際、「全ユーザーに公開」になる点に注意。
  • 非公開データを扱う場合は閲覧制限やリンク共有の設定をしっかり確認してください。

まとめ

  • iframeでスプレッドシートをブログに貼る場合、範囲指定でスリムに表示可能
  • range= パラメータを使うことで、閲覧者に見せたい範囲だけ表示できる
  • 表示サイズも width / height で調整でき、デザインにも柔軟対応

Googleスプレッドシートを活用した情報発信・レポート共有に、見せたい部分だけスマートに埋め込む技術をぜひ取り入れてください。

  • URLをコピーしました!

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次