WordPressにGoogle スプレッドシートを埋め込む

2022.10.15

Googleスプレッドシートの埋込み

WordPressに Google スプレッドシートを埋め込んで見ました。
埋め込んだ状態でスプレッドシートの編集が出来るんですね。
でも 私にとっては、表の必要部分(セル)だけを表示してくれれば良いのですが、編集メニューやセルの番号表示も出てきます。もしかすると、もっと目的にあった埋め込み方法が有るかも知れません。

元のスプレッドシートを変更した時に WordPress側の表示が連動して変わらなくても良いのであれば、セル部分をコピペして WordPressの表にした方が見易いと思います。但し、Wordpress本来の表は表示機能が乏しいので、表のプラグイン(Flexible Table Block)の利用をお勧めします。

埋込み手順

埋込み手順は以下の通り

  1. WordPressに埋め込みたい Google スプレッドシート(以下、GglSS) を開き、ファイル－共有－ウェブに公開 を選択します。
  2. 埋め込む を選択。公開対象を、下の ドキュメント 全体 か 特定のシート かを選択します。
  3. 下に表示されているコードをコピーします。
  4. 埋込みをしたい WordPressを開きます。右の設定(歯車)の右にある ︙ をクリックし、「コードエディター」を選択します。ビジュアルエディターからコードエディターに変わります。
  5. 埋込み位置にカーソルを持っていき、先程コピーしたコードをペーストします。
    これでGglSSの埋込みはできましたが、表示エリアが小さいと思います。
  6. 表示エリアを大きくするためには ファイル名の後ろに 「style=”width:70%;height:400px;”」を追記してください。上記の70% や 400px は適宜変更して表示サイズを調整してください。
    70%：表示幅全体を 100%とした場合の横幅。 400px：表示高さ。

src=”GglSSファイル名”部分を Google スプレッドシートのファイル名のみにすると下記の様な表示になりました。

コメント