Hello! Gorila.

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

この記事は約2分で読めます。

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

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


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

スポンサーリンク

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

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

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

英語国語数学社会
A20301010
B809080100
C50707020
D504020100

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

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

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

次はメニューバーの[挿入]> グラフ を選択します。(上の方に並んでますよね)

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

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

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


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

線がつながります。

グラフをブログに載せる

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


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


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

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

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

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

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

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

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

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

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

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

ごり丸
ごり丸

簡単にできて便利だよね

Note
スポンサーリンク
Study Gorilla

コメント