1:はじめに
Google Spreadsheetで生成したグラフをWPの固定記事や投稿記事に埋め込む場合、埋め込みタグを生成するとiframeのコードが生成されるかと思います。
しかし、これをそのまま貼り付けても、デバイス別に横幅が最適化されることはなく、Spreadsheetのグラフの元のサイズがどのデバイスでもそのまま表示されるといった現象に遭遇します。
この解決方法の一つをこの記事では提示します。
2:Google Spreadsheetのグラフ（iframe）の準備
以下は、Googlespreadsheetで、WPに連携するグラフのiframeのコードを取得する操作です。
このあたりは本論とは異なりますが、ここで解説しておきます。
①グラフの選択:
まず、Google スプレッドシートを開き、埋め込みたいグラフが含まれるシートを表示します。グラフの任意の部分をクリックし、右上に表示される「…」マークを選択してください。
②グラフの公開:
出現するメニューから「グラフを公開」を選び、「ウェブに公開」画面が表示されたら、「埋め込む」タブを選択し、「公開」ボタンをクリックします。「公開してもよいか？」という確認メッセージが表示されたら、「OK」を選択します。
③埋め込みコードの取得:
公開操作後、表示される埋め込みコードをコピーします。この時、グラフを「インタラクティブ」形式で表示するか、「画像」形式で表示するかを選べます。「インタラクティブ」では、ユーザーがグラフにカーソルを合わせると詳細が表示されますが、「画像」形式では固定画像として表示されます。
④WordPressに貼り付け:
WordPress の編集画面で、グラフを表示したいページまたは投稿を開き、「カスタムHTML」ブロックを追加して、先ほどコピーした埋め込みコードを貼り付けます。プレビューを確認し、問題なければページを公開または更新します。
これで、たしかに、GooglespreadsheetのグラフがWPで投稿はできます。
しかし、実際にやってみると、レスポンシブ対応（スマホでの表示におけるサイズ最適化）がされないことがすぐにわかります。
解決方法は次で解説します。
3:サイズ最適化の方法│IMGタグで読み込む
このような現象を解決するために、iframeの元のページ側（つまり今回はGooglespreadsheet）にCSSを埋め込む方法もありますが、今回はGooglespreadsheetなので、そのような対応はできません。
そこで、読み込む側（＝WP）で、できることをします。
以下は実際に、うまくいったコードです。
<img width="100%" height="416" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/u/5/d/e/2PACX-1vRETVNZV27LMXp6HzfAjmc5ib76zYCZw9AbSS5S4tRNV_gJDKbR8Mt2Zn4H3foEtrI1l2zggs53qy-Q/pubchart?oid=1638100067&format=image"></img>
このように、標準機能で提供されるiframeタグではなく、imgタグで呼び出すようにします。
WP上で、iframeでwidth="100%"を指定しても、有効ではありませんが、imgタグでは有効なことが確認できています。
動作環境について確認したい方は、以下のサイトも参考にされると良いかと思います。
▼上記のコードでレスポンシブ対応が確認できたサイト：
https://money-no1.com/
※ギフト券買取業界の比較サイトに飛びます。サービス内容自体は、上記のコードとは無関係です