ゴルフ松庵

メンバーライフを満喫しシングルプレーヤーを目指す!ブログ

折れ線グラフをSTINGER6を使ったブログにレスポンシブに表示する

   

先日紹介せていただいたgoogleのスプレッドシートで使ってスッキリとした折れ線グラフを作る。の続きで、作ったグラフをブログにレスポンシブに表示する方法になります。

スポンサーリンク

公開用URLの取得

googleスプレッドシート_公開1

グラフオブジェクトの右上の▼をクリックして「グラフを公開…」選択します。

 

googleスプレッドシート_公開2

「リンク」と「画像」の組み合わせで「公開」ボタンを押します。確認ダイアログが出力されるので「OK」を押します。

 

googleスプレッドシート_公開3

URLが出力されます、このURLをWordpressに貼り付けるのでこの画面のまま放置しておくか、テキストファイルか何かに貼り付けて退避しておきます。

 

WordPress側での作業

投稿ページまたは固定ページの編集画面において(当ブログの場合は固定ページ)、「テキスト」タブを選択してテキストモードでの作業になります。

googleスプレッドシート_WP設定1

「img」ボタンを押すと、URLの入力ダイアログ画面が出力されるので先ほどのURLをここに貼り付けて「OK」ボタンを押します、続いて代替テキスト(alt)を設定して完成です。

ビジュアルモードに戻るとグラフが表示されてます。

googleスプレッドシート_WP設定2

これで完了です。
このように出来上がったのがハンディキャップページのグラフになります。

 

さて、iphoneで確認です。

縦の見え方

グラフレスポンシブiphone縦

横での見え方

グラフレスポンシブiphone横

はい、レスポンシブになってます。

 

最後に

グラフに関するプラグインは色々ありました。

毎月の更新作業(グラフへの反映含む)の作業が大変でないことと、レスポンシブに表示できることを条件にしてたどり着いたのが、googleスプレッドシートのグラフを使用した方法になりました。

 

 - WordPress