前回、Googleスプレッドシートをホームページに埋め込む手順を解説しました。ところが、パソコンでは綺麗に表示されていた表が、スマホで開くと横に切れてしまう・文字が小さすぎて読めない——そんな経験はありませんか。
今回はこの「スマホでの見え方問題」を解消していきます。対策は大きく2つです。ひとつはスプレッドシート側で列を整理すること、もうひとつはWordPress側のCSSでiframeを画面幅に合わせて伸縮させることです。どちらもコピー＆ペーストで完結する作業なので、身構えずに進めていきましょう。
なぜスマホで見づらくなるのか
先に原因を押さえておくと、これから紹介する対策の意味がすんなり頭に入ります。
📝 スマホで見づらくなる2つの原因
| 原因 | 具体的な症状 | 対策 |
|---|---|---|
| 列数が多い（野手シートは19列） | 表が横に広すぎてスマホ画面に収まらず、右側が切れる | 列を絞る・列幅を狭くする |
| iframeの幅が固定されている | 画面の横幅より広い固定幅のiframeが、スマホ画面をはみ出す | CSSでiframeをレスポンシブ化する |
前回の埋め込みコードではwidth="100%"を指定しましたが、実はこれだけでは不十分なケースがあります。iframeの枠自体は画面幅に合わせて100%になっていても、中身のスプレッドシートの表が横に広ければ、その中身がはみ出してしまうからです。これこそが「スマホで横に切れる」問題の正体です。
対策①：スプレッドシート側で表示列を整理する
19列すべてをスマホの狭い画面に美しく収めるのは、正直なところ至難の業です。そこで「スマホで必ず見たい列」と「なくても困らない列」を仕分けし、後者を非表示にするのが現実的な解決策になります。
⚠️ 非表示にする ≠ 削除する
Googleスプレッドシートの「列を非表示」は、列のデータを消すのではなく表示だけをオフにする機能です。計算式は非表示にした列のデータを引き続き参照でき、いつでも再表示することもできます。
例えば、野手シートの19列を「スマホでの優先度」で仕分けると、次のようになります。
| 列 | 項目名 |
タイトルとURLをコピーしました
|
|---|
コメント