スプレッドシートの埋め込みをレスポンシブで表示させる方法!

グーグルのスプレッドシートのグラフを作ってウエブで公開したものの、スマホのサイズがはみ出してしまうと悩んでいるかと思います。

私もうまくいかず悩みましたが、Geminiに聞きながら2時間ほど格闘し下記のようにようやくできるようになりました。

スマホとPCで確認していただくとレスポンシブになっていることがご確認できるかと思います。

今回、スプレッドシートの埋め込みをレスポンシブに表示する方法をご紹介します。

frameborder=”0″ scrolling=”no”>

この記事の執筆者:ユウ, 博士 Ph.D.

大阪大学 大学院卒業。外資系IT企業でマネージャーとして勤務。スマートフォン、サーバー、AI、自動車に使用されるデバイスを開発。グーグルやクアルコムに採用。これまで行ってきた仕事で奨励賞やGrand Awardを受賞。運営しているサイトで役に立つ情報を発信中(年間5万PV)。電気工事士。安全衛生推進委員会 委員長として社員の健康と安全を向上。FAST WING運営者情報

本サイトではプロモーションを含みます。

設定方法

WordPressの記事内にカスタムHTMLブロックを挿入し、下記のNoteからコードをコピーし先程のカスタムHTMLにペーストします。

さらにこのコードにおいて上から3行目の <iframe src=”ここにスプレッドシートのURL” を自分のグラフのものに変更して終了です。

まとめ

以上でパソコンとスマホの表示がそれぞれ別々に表示されるので、グラフがはみ出る悩みを解決できます。

すこしだけ手間がかかりますが、確実に表示することが可能です。

実際私のサイトもこの手法で対応しています。

グーグルが修正してしてくれるまでこの手法を使うといいと思います。

サイトやブログの収益化にはアフィリエイトを行うといいでしょう。詳細は下記を参考にしてください。

アフィリエイトサイトのおすすめは下記をどうぞ。

おすすめの商品リンクは下記の記事をどうぞ。

私のサイトの収益は下記に公開しています。

タイトルとURLをコピーしました