GoogleスライドをWordPressに埋め込む方法！スマホ対応（レスポンシブ）も簡単

「セミナーや勉強会で使ったスライド資料を、そのままブログでも読者に見せたい」
「会社案内やサービス紹介のプレゼン資料を、Webサイトに掲載したい」
そんな場面、意外と多いんですよね。

PDFに書き出してダウンロードリンクを置くやり方もありますが、読者からするとファイルを落として開く手間がかかります。

せっかく見てほしい資料なのに、その一手間で離脱されてしまうのはもったいない話です。

そこで私がたどり着いたのが、Googleスライドを記事内に直接埋め込むという方法でした。

埋め込んでしまえば、読者は記事を読みながらブラウザー上でスライドをめくれます。専用のWordPressプラグインも要りません。Googleが発行するコードを貼り付けるだけで実装可能です。

ただ、初期状態のコードをそのまま貼ると、スマホで見たときに右側がはみ出します。私も最初にこれで一度つまずきました。

基本の埋め込み手順に加えて、小さな画面でも崩れない「レスポンシブ対応」のコツまで、実際に手を動かした順番でまとめていきます。

Googleスライドを埋め込むと何がうれしいのか

手順の前に、画像の貼り付けやPDF配布ではなく、なぜ埋め込みを選ぶのか。私が実際に使ってみて実感したメリットを3つ挙げます。

ページが重くならない

プレゼン資料は図解や画像を多用するぶん、ファイルサイズが膨らみがちです。これを画像として何枚も貼ったり、重いPDFをサーバーに置いたりすると、ページの読み込み速度がはっきり落ちます。

埋め込みの場合、データの実体はGoogleのサーバー上にあるものを呼び出して表示する仕組み。自分のWordPressサーバーに負荷をかけずに済むので、ページの軽さを保てます。

表示が遅いだけで読者は離れてしまうので、ここは効いてくるポイント。

資料を直すと記事側も自動で更新される

個人的には、これが一番の決め手でした。PDFや画像で公開していると、誤字を見つけたりデータを新しくしたりするたびに、ファイルを書き出し直してアップロードし直す作業が発生します。

これが地味に面倒なんですよね。

埋め込みなら、大元のGoogleスライドを編集するだけ。ブログに表示されているスライドも、そのまま最新の状態に切り替わります。メンテナンスの手間がぐっと減りました。

滞在時間が延びてSEOにもプラスに働く

読者が記事内でスライドをめくって読んでくれると、そのページでの滞在時間が自然と長くなります。

検索エンジンは長く留まられるページを価値あるコンテンツと評価する傾向があるため、結果的に検索順位にもよい影響が期待できます。

直接的な効果を保証するものではありませんが、読者にとって読みやすくなるのは間違いありません。

Googleスライドで埋め込みコードを取得する

ここから実際の作業です。まずはWordPressに貼り付けるためのHTMLコードを、Googleスライド側で発行します。

埋め込み時に確認したい設定

「埋め込む」タブには、いくつかの設定項目があります。後でレスポンシブ対応のカスタマイズを行うため、迷ったら次の設定にしておけば問題ありません。

スライドのサイズ

「小」「中」「大」「カスタム」から選べます。後でレスポンシブ化するため、デフォルトの「中」のままで構いません。

スライドを進める間隔（自動再生）

読者が操作しなくても、指定した秒数（デフォルトは3秒）でスライドが自動でめくられる設定です。

じっくり読んでほしい資料なら、チェックを外しておくのがおすすめ。読者のペースで読んでもらえます。

プレーヤーが読み込まれたらスライドショーを開始する

ページを開いた瞬間に自動再生を始めるかどうかの設定。こちらも基本的にはチェック不要です。

最後のスライドの後にやり直す

ループ再生の設定です。用途に合わせてお好みで決めてください。

WordPressの記事にコードを貼り付ける

続いて、コピーした埋め込みコードをWordPressの記事に貼り付けます。お使いのエディターによって手順が少し変わるので、ご自身の環境に合うほうをご覧ください。

ブロックエディター（Gutenberg）の場合

現在のWordPress標準エディターです。直感的な操作で埋め込めます。

クラシックエディターの場合

プラグイン（Classic Editor）を入れて昔ながらの画面を使っている方向けの手順です。

スマホではみ出さないレスポンシブ対応コード

ここまでで、スライドを埋め込むという基本の目的は達成できました。パソコンで見れば、きれいに表示されているはずです。ところが、ここで一つ大きな落とし穴があります。

お手持ちのスマホで、いま作ったプレビューを見てみてください。パソコンならブラウザーの幅をぐっと狭めてみるのでも構いません。

おそらく、スライドの右側が画面の外にはみ出したり、レイアウトが崩れたりしているはずです。私が最初につまずいたのも、まさにここでした。

なぜスマホではみ出すのか

理由はシンプルで、Googleスライドからコピーした初期状態のコードに、次のような指定が含まれているからです。

width="960" height="569"

これは「どんな画面で見られても、横幅を960ピクセル、高さを569ピクセルで表示しなさい」という命令です。一方で、最近のスマホの画面幅は375〜400ピクセル程度が主流。

つまり、400ピクセルしかない画面に960ピクセルの大きな枠を押し込もうとしているため、右側がスパッと切れてはみ出してしまうわけです。

解決策は、見ている人の画面サイズに合わせて自動で伸び縮みするよう、コードを少しだけ書き換えること。この調整がレスポンシブ対応です。

コピペで完了するコードの書き換え手順

難しそうに聞こえるかもしれませんが、やることは文字の置き換えだけ。2つの手順で終わります。

手順1 コード全体を div タグで囲む

まず、コピーした <iframe> から始まるコードの前後を、次のタグでサンドイッチのように挟みます。前に追加するのが以下のコード。

<div style="width: 100%; aspect-ratio: 16/9;">

後ろには </div> を追加します。もしスライドの縦横比が昔ながらの「4:3」なら、16/9 の部分を 4/3 に変えてください。

この aspect-ratio（アスペクトレシオ）というCSSプロパティを使うと、「横幅がどう変わっても、縦横の比率は16対9を保ちなさい」という指示が出せます。比率さえ固定できれば、あとは幅に合わせて勝手に縮んでくれるわけです。

手順2 width と height を「100%」に書き換える

次に、元のコードの中にある width="〇〇" height="〇〇" の数字部分を探します。この固定の数字を消して、両方とも 100% に書き換えてください。

変更前

width="960" height="569"

変更後

width="100%" height="100%"

書き換えのビフォーアフター

わかりやすいように、変更前と変更後のコードを並べておきます。ご自身のコードが「変更後」の形になるよう整えてください。まずはGoogleから取得したそのままの状態。

<iframe src="https://docs.google.com/presentation/d/e/2PACX-xxxxxx/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

<iframe src="https://docs.google.com/presentation/d/e/2PACX-xxxxxx/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

これをスマホ対応させると、次の形になります。

<div style="width: 100%; aspect-ratio: 16/9;">
  <iframe src="https://docs.google.com/presentation/d/e/2PACX-xxxxxx/embed?start=false&loop=false&delayms=3000" frameborder="0" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>

<div style="width: 100%; aspect-ratio: 16/9;">
  <iframe src="https://docs.google.com/presentation/d/e/2PACX-xxxxxx/embed?start=false&loop=false&delayms=3000" frameborder="0" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>

この「変更後」のコードを「カスタムHTML」ブロック（またはテキストエディター）に貼り付けてみてください。

パソコンでは横幅いっぱいに大きく表示され、スマホでは画面幅に合わせてキュッと縮み、はみ出すことなくきれいに収まるはずです。

もっと便利に使いこなすためのTips

基本設定は以上で十分ですが、知っておくと作業が楽になるコツと、事前に押さえておきたい注意点をまとめます。

「パターン」に登録して使い回す

今後ブログで何度もGoogleスライドを埋め込むなら、毎回 <div> を書いて 100% に直すのは手間です。

ブロックエディターをお使いなら、書き換え済みのレスポンシブ用コードを「パターン（旧:再利用ブロック）」として登録しておくのがおすすめ。

一度作っておけば、次からはそれを呼び出して src="URL" のURL部分だけ差し替えるだけで済みます。私もこれを登録してから、埋め込み作業が一気に短くなりました。

下部のコントロールバーは消せない

スライドを埋め込むと、下部にページ送りの矢印やGoogleスライドのロゴが入ったコントロールバーが自動で表示されます。

「このバーを消してスライドだけ見せたい」という声をよく聞きますが、現在のGoogleスライドの仕様上、これを完全に非表示にする公式な方法はありません。

読者が自分でスライドをめくるためのインターフェースでもあるので、仕様として割り切って使うのが現実的です。

公開範囲は埋め込む前に必ず確認する

「ウェブに公開」を行うと、そのスライドのURLを知っている人なら誰でも閲覧できる状態になります。

社外秘のデータや個人情報、公開前の資料などが含まれていないか、埋め込む前に内容を必ず見直す習慣をつけてください。

一部の会員や社員だけに共有したいときは、埋め込み機能は使いません。Googleドライブの共有設定で「特定のユーザーのみ」に権限を付与し、そのリンクを共有する。この使い分けが安全です。

よくある質問とトラブル対処

スライドの代わりに「アクセス権が必要です」と表示されます

「ウェブに公開」が正しく完了していない可能性があります。

Googleスライドに戻り、「ファイル」＞「共有」＞「ウェブに公開」を開いて、青い「公開」ボタンが押され「公開済み」の状態になっているか確認してください。

スライドの上下や左右に黒い余白ができてしまいます

指定した枠の縦横比（aspect-ratio）と、実際のスライドの縦横比がズレているのが原因です。最近のGoogleスライドは「16:9」が標準ですが、少し前に作られたものは「4:3」のことがあります。

スライドが4:3なら、コードの aspect-ratio: 16/9; を aspect-ratio: 4/3; に書き換えると、ぴったり収まります。

クラシックエディターでタブを切り替えたらコードが消えました

WordPressの自動整形機能により、<iframe> など一部のタグが、タブ切り替え時に削除されてしまうことがあります。

対策としては、「テキスト」タブで貼り付けたら「ビジュアル」タブには戻さず、そのまま「プレビュー」を押すか記事を公開してください。

何度も消えて不便な場合は、タグの削除を防ぐプラグイン（Advanced Editor Toolsの設定変更など）の導入も検討してみてください。

まとめ

一見ハードルが高そうな「コードの埋め込み」も、手順に沿えば数分で終わります。

やることは、Googleスライド側で「ウェブに公開」してコードを取得し、WordPressの「カスタムHTML」に貼り付け、<div> と aspect-ratio で幅・高さを100%に書き換えるだけ。この3ステップに尽きます。

レスポンシブ化のコツ（aspect-ratio で比率を固定し、幅と高さを100%にする）は、Googleスライドだけでなく、YouTube動画やGoogleマップを埋め込むときにもそのまま使えます。一度覚えておくと、いろいろな場面で応用できる便利な小技です。

セミナーのレポート記事、ノウハウの解説、ポートフォリオの紹介など、スライドが活きる場面はたくさんあります。まずは手元のテスト用スライドで一度埋め込んでみてください。

動いたときの「こんなに簡単だったのか」という手応えが、次の記事づくりのきっかけになるはずです。