グーグルスプレッドシートのグラフをレスポンシブで自動表示させる方法

グーグルのスプレッドシートのグラフを作ってウエブで公開したものの、スマホのサイズがはみ出してしまうと悩んでいるかと思います。

私も色々試してみましたがうまくいかず、パソコン用とスマホ用に分けることでうまくいきました。

今回、パソコンとスマホ表示を切り替えることでグラフをレスポンシブに表示する方法をご紹介します。

パソコンとスマホ用の2種類のグラフを用意

まずはじめにパソコン用のグラフとスマホ用のグラフを用意します。

左の大きいグラフがパソコン用。

右の小さい方がスマホ用です。

次にパソコン用のグラフとスマホ用のグラフのコードを下記のようにコピーします。

自分のサイトにはhtml形式でパソコン用とスマホ用のコード下記のようにペーストします。

コードはグラフ右上の三つの点をクリックすると出てきます。

<iframe width="600" height="371" seamless="" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSVcL427V1VoXe5eqv03r8X_9VNHhS_ev1bTpl7QExWh34gTtOA_TyPzAtxbjuzu0buC_JMVHgSPjU8/pubchart?oid=1275108995&format=interactive"></iframe>

<iframe width="391" height="241" seamless="" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSVcL427V1VoXe5eqv03r8X_9VNHhS_ev1bTpl7QExWh34gTtOA_TyPzAtxbjuzu0buC_JMVHgSPjU8/pubchart?oid=1646547738&format=interactive"></iframe>

切り替え判断のコードを追加

今度は下記のように<iframe の後にclass=”pc” class=”sp”を追加します。

この記述で切り替え判断を行います。

pcがパソコン用。

spがスマホ用になります。

<iframe class="pc" width="600" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSVcL427V1VoXe5eqv03r8X_9VNHhS_ev1bTpl7QExWh34gTtOA_TyPzAtxbjuzu0buC_JMVHgSPjU8/pubchart?oid=1275108995&format=interactive"></iframe>

<iframe class="sp" width="391" height="241" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSVcL427V1VoXe5eqv03r8X_9VNHhS_ev1bTpl7QExWh34gTtOA_TyPzAtxbjuzu0buC_JMVHgSPjU8/pubchart?oid=1646547738&format=interactive"></iframe>

CSSの切り替えコード追加

さらにテーマエディターのstyle.cssで下記のコードをコピー&ペーストします。

カスタマイズから追加CSSで入力してもOKです。

このコードでパソコンとスマホ表示の切り替えを行います。

/* パソコンで見たときは"pc"のグラフを表示 */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマホで見たときは"sp"のグラフを表示 */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

まとめ

以上でパソコンとスマホの表示がそれぞれ別々に表示されるので、グラフがはみ出る悩みを解決できます。

すこしだけ手間がかかりますが、確実に表示することが可能です。

実際私のサイトもこの手法で対応しています。

グーグルが修正してしてくれるまでこの手法を使うといいと思います。

サイトやブログの収益化にはアフィリエイトを行うといいでしょう。詳細は下記を参考にしてください。

アフィリエイトサイトのおすすめは下記をどうぞ。

おすすめの商品リンクは下記の記事をどうぞ。

私のサイトの収益は下記に公開しています。

この記事の執筆者:ユウ

IT企業に20年以上勤務。行ってきた仕事で奨励賞やGrand Awardを受賞。博士号取得。現在、マネージャーとして勤務し、外国企業とのやり取りを英語で行いながら開発を進めている。個人のサイト運営も20年ほど行っており、年に約100万円程度の収益のあるサイトに育てる。現在、クラウドシステムはアマゾンAWSを使用しており、AWSや役に立つサイト運営情報も発信中。AWSに関する情報発信ではグーグルトップページで表示。

プログラミング
ユウカレッジ
タイトルとURLをコピーしました