ブログで簡単にグラフが使える！Google スプレッドシートの便利な使い方【ampでもOK】

ブログでグラフを使いたいときどうしていますか？

javascriptやcssでもできますし、グラフ用のWebサービスもいろいろとありますよね。


今回はその選択肢の一つとして、Googleスプレッドシートを紹介したいと思います。

まずはスプレッドシートでグラフを作る

作りたいグラフの元となるデータを打ち込む

まずはデータがないとグラフ作れません。
必要な数値を入力していきましょう。

	英語	国語	数学	社会
A	20	30	10	10
B	80	90	80	100
C	50	70	70	20
D	50	40	20	100

グラフにしたいデータを選択

ShiftやCtrlを使って、グラフにしたいデータを選択しましょう！

メニューバーの「挿入」タブからグラフを選ぶ

次はメニューバーの［挿入］> グラフ　を選択します。（上の方に並んでますよね）

右側にグラフエディタが表示されるので、イメージに近いグラフを選択していきましょう。

未入力がある場合には「null値を表示」チェック

折れ線グラフなどの場合、空欄があると線がつながりません。


そういったときは、カスタマイズ（グラフエディタの設定の隣）　>　グラフの種類のnull値を表示をチェックします。

線がつながります。

グラフをブログに載せる

諸々カスタマイズが完了したら、ブログに載せましょう！


出来上がったグラフ本体の右上、⁝←こんなやつをクリック。


表示された項目から『グラフの公開』を選択します。

リンク→画像と進み
表示されたURLをコピーして好きなところに貼り付けたら完成です。（ワードプレスなら画像扱いでOK！）

↓のような感じになります。

ampエラー【属性「seamless」はタグ「amp-iframe」で使用できません。】が出たら

属性「seamless」はタグ「amp-iframe」で使用できません。

seamlessを消しましょう。
それでけでOKです。

HTML上で消すだけでいいです。
seamless=””となっていれば全部消してもいけます。

グラフがスマホだとずれる

埋め込みでやるとそうなりますよね＞＜

諦めてリンクでやりましょう。