先日紹介せていただいたgoogleのスプレッドシートで使ってスッキリとした折れ線グラフを作る。の続きで、作ったグラフをブログにレスポンシブに表示する方法になります。
目次
公開用URLの取得
グラフオブジェクトの右上の▼をクリックして「グラフを公開…」選択します。
「リンク」と「画像」の組み合わせで「公開」ボタンを押します。確認ダイアログが出力されるので「OK」を押します。
URLが出力されます、このURLをWordpressに貼り付けるのでこの画面のまま放置しておくか、テキストファイルか何かに貼り付けて退避しておきます。
WordPress側での作業
投稿ページまたは固定ページの編集画面において（当ブログの場合は固定ページ）、「テキスト」タブを選択してテキストモードでの作業になります。
「img」ボタンを押すと、URLの入力ダイアログ画面が出力されるので先ほどのURLをここに貼り付けて「OK」ボタンを押します、続いて代替テキスト（alt）を設定して完成です。
ビジュアルモードに戻るとグラフが表示されてます。
これで完了です。
このように出来上がったのがハンディキャップページのグラフになります。
さて、iphoneで確認です。
縦の見え方
横での見え方
はい、レスポンシブになってます。
最後に
グラフに関するプラグインは色々ありました。
毎月の更新作業（グラフへの反映含む）の作業が大変でないことと、レスポンシブに表示できることを条件にしてたどり着いたのが、googleスプレッドシートのグラフを使用した方法になりました。