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

こちらの記事で、自作の「西暦・元号・満年齢の早見表」を公開しました。

あわせて読みたい
【2025年版(令和7年版)】西暦・元号・満年齢の早見表 西暦・元号・満年齢の早見表 西暦2025年は、令和7年 平成から数えると37年 昭和から数えると100年 大正から数えると114年 明治から数えると158年 直接Googleスプレッド...

もともとExcelでつくっていたものをGoogleスプレッドシート(スプシ)にして体裁を整え、Webサイト(WordPress)の記事に埋め込みました。

スプシをWordPressで表示させる方法はいくつかあるのですが、今回はスプシの標準機能プラス、若干の表示修正でいくことにしました。

目次

Googleスプレッドシート(スプシ)を「公開」する

スプシを埋め込む

スプシをWordPressに埋め込むには、次の手順で進めます。

スプシの画面で、
左上の「メニュー」

「共有」

「🌎ウェブに公開」を選択。


すると、「ウェブに公開」ダイアログが出てくるので、
「埋め込む」を選択

埋め込みコードが表示されるのでコピー

WordPress記事作成画面に貼り付け
(ブロックエディタの場合は、「カスタムHTML」というブロックを使用)

表示を整える:スタイルシート

これだけだと、タテもヨコもちっちゃい表示で出てしまいます。

そこで、普通はスタイルシート(CSS)で調整することになります。

たとえば、以下のようにiframeに対して幅、高さ、枠線の種類(border:)、あと角を丸くする(border-radius: )みたいな工夫をしてもいいですね。

iframe{
 width: 530px;
 height: 400px;
 border: 8px solid #C0C0C0;
 border-radius: 10px 10px 10px 10px;
}

表示を整える:HTMLに直接記述

今回は上記のようにスタイルシートに記述しても幅がうまく調整できませんでした。
WordPressテーマの影響かどうか深く掘り下げてはいないですが。

なので、iframeのタグの中にサイズを直接記述することにしました。

スマホでもPCでも見やすい幅と高さを設定。
今回の例ではwidthとheightのプロパティを追記しました。

<iframe width="530" height="400" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ-JDUCkvao6-NWTA6y_ijAO4wU50RLeQ2Lo_CQXHBOAKw0acIyAZY3jpvQMvMM3A/pubhtml?widget=true&amp;headers=false"></iframe>

できあがりのページは、以下のリンクからご覧ください。

あわせて読みたい
【2025年版(令和7年版)】西暦・元号・満年齢の早見表 西暦・元号・満年齢の早見表 西暦2025年は、令和7年 平成から数えると37年 昭和から数えると100年 大正から数えると114年 明治から数えると158年 直接Googleスプレッド...

プラグインを使う方法 ⇒ 不採用

スプシの標準機能を使わずにWordPressのプラグインで表示させることも考えました。

WordPressのプラグイン追加画面から「google spreadseet」で検索すると、このように出てきました。
(WooCommerceとか関係ないのも出てきますが)

ただ、最新のWordPressに対応していない(バージョンアップがされていない)とか、インストール件数が5千件と少ないという状況でした。

そもそもプラグインは、セキュリティの面やメンテナンスの面から極力使わないのがベストです。

今回のように最近アップデートされていないとか、インストール件数が少ないとかいう場合には、使わずに他の方法を探すほうがいいですね。

たしかに、利用者が多いほど、標的にされやすくなる危険があります。
でも、トータルではメリットのほうが大きいかなと思っています。
大勢の人が使うことで事例が蓄積されて不具合やセキュリティの脅威が少なくなったり、開発中止になっても引き継ぐ人が出てきやすかったりするので。

表として記事に貼り付ける方法 ⇒ 不採用

普通にHTMLで表(テーブル)を組む方法もあるけれど、今回は使いませんでした。

行数がとても多くて見にくくなるので。

それに、毎年発生するちょっとした修正も手間がかかりそうだったので。
スプシを触っているだけで見やすい表ができるほうがいいかなと思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次