「セミナーや勉強会で使ったスライド資料を、ブログの読者にも共有したい」
「会社案内やサービス紹介のプレゼン資料を、Webサイトにそのまま掲載したい」
そんな風に考えたことはありませんか？
資料をPDFに書き出してダウンロードリンクを設置するのも一つの手ですが、読者にとっては「わざわざファイルをダウンロードして開く」という手間がかかってしまいます。
そこでおすすめなのが、「GoogleスライドをWordPressの記事内に直接埋め込む」という方法です。
Googleスライドの埋め込み機能を使えば、読者はブログ記事を読みながら、そのままブラウザ上でスライドをめくって閲覧することができます。
しかも、特別なWordPressプラグインは一切不要。発行されたコードをコピペするだけで、誰でも簡単に実装可能です。
この記事では、GoogleスライドをWordPressに埋め込む基本的な手順から、スマートフォンなどの小さな画面でもはみ出さずに綺麗に表示させる「レスポンシブ（スマホ）対応」の必須テクニックまで分かりやすく解説します。
Web制作の専門知識がない初心者の方でも、この記事を読みながら操作すれば必ず設定できますので、ぜひ一緒にやってみましょう！
GoogleスライドをWordPressに埋め込む3つのメリット
具体的な手順に入る前に、なぜPDFのダウンロードや画像の貼り付けではなく、「Googleスライドの埋め込み」がおすすめなのか、その絶大なメリットを3つご紹介します。
1. サイトが重くならない（ページ表示速度の維持）
プレゼンテーション資料は、画像や図解を多用するためファイルサイズが大きくなりがちです。
これを画像として何枚もブログに貼り付けたり、重いPDFファイルをサーバーにアップロードしたりすると、ページの読み込み速度が著しく低下する原因になります。
Googleスライドを埋め込む場合、データ自体はGoogleの強力なサーバー上にあるものを読み込んで表示するため、あなたのWordPressサーバーに負荷をかけることなく、サクサクと動くページを維持できます。
2. 資料を修正すると、ブログ上のスライドも自動更新される
これが最大のメリットと言っても過言ではありません。
PDFや画像で公開した場合、資料に誤字脱字を見つけたり、データを最新のものに更新したりする際、再度ファイルを書き出してWordPressにアップロードし直すという非常に面倒な作業が発生します。
しかし埋め込み機能なら、大元のGoogleスライドを編集するだけで、ブログに表示されているスライドもリアルタイムで最新の状態に切り替わります。メンテナンスの手間が劇的に削減されます。
3. 読者の滞在時間が延び、SEO効果も期待できる
読者が記事内でスライドをポチポチとめくって読んでくれることで、そのページでの「滞在時間」が自然と長くなります。
Googleなどの検索エンジンは、「読者が長く留まるページ＝価値のあるコンテンツ」と評価する傾向があるため、結果的にブログのSEO（検索順位向上）にも良い影響を与える可能性があります。
ステップ1：Googleスライドで「埋め込みコード」を取得する
それでは、実際に作業を進めていきましょう。まずは、WordPressに貼り付けるための「HTMLコード」をGoogleスライド側で発行します。
1. 埋め込みたいスライドを開く
まずは、ご自身のGoogleドライブにアクセスし、ブログに掲載したいGoogleスライドのファイルを開きます。
※まだスライドが完成していない場合でも、テスト用のスライドで手順を確認することができます。
2. 「ウェブに公開」メニューを選択する
画面左上のメニューバーから、以下の順番でクリックしていきます。
- 「ファイル」 をクリック
- メニューの中にある 「共有」 にマウスカーソルを合わせる
- 右側に表示される 「ウェブに公開」 をクリック
※古いバージョンのGoogleスライド画面では、「ファイル」の直下に「ウェブに公開」がある場合があります。
3. 「埋め込む」タブで設定を行う
「ウェブに公開」という設定ウィンドウがポップアップで表示されます。 上部に「リンク」と「埋め込む」という2つのタブがあるので、右側の「埋め込む」タブをクリックして切り替えてください。
ここで、埋め込み時の表示に関する設定を行います。
スライドのサイズ
「小」「中」「大」「カスタム」から選べます。後ほどレスポンシブ（スマホ）対応のカスタマイズを行うため、ここではデフォルトの「中」のままで構いません。
スライドを進める間隔（自動再生）
読者が操作しなくても、指定した秒数（デフォルトは3秒）で勝手にスライドがめくられるようにする設定です。じっくり読んでもらいたい資料の場合は、チェックを入れない（自動再生しない）ことをおすすめします。
プレーヤーが読み込まれたらスライドショーを開始する
ページを開いた瞬間に自動再生を始めるかどうかの設定です。こちらも基本的にはチェック不要です。
最後のスライドの後にスライドショーを最初からやり直す
ループ再生の設定です。用途に合わせてお好みで設定してください。
4. コードを公開してコピーする
設定が完了したら、下部にある 「公開」 という青いボタンをクリックします。
画面上部に「選択した部分を公開してもよろしいですか？」という確認メッセージ（ブラウザのアラート）が表示されるので、「OK」 をクリックします。
すると、ウィンドウ内に <iframe src="https://docs.google... で始まる長い英数字のHTMLコードが表示されます。
このコードが、あなたのスライドを呼び出すための魔法の呪文です。キーボードの Ctrl + C（Macの方は command + C）を押すか、右クリックしてコード全体を漏れなくコピーしてください。
これでGoogleスライド側の準備は完了です！
ステップ2：WordPressの記事にコードを貼り付ける
次に、先ほどコピーした埋め込みコードをWordPressのブログ記事に貼り付けていきます。
お使いのWordPressエディタ（編集画面）の種類によって少しだけ手順が異なりますので、ご自身の環境に合った方法をご覧ください。
パターンA：ブロックエディタ（Gutenberg）をお使いの場合
現在のWordPressの標準エディタです。直感的な操作で簡単に埋め込むことができます。
記事の編集画面を開くスライドを挿入したい記事の編集画面を開きます。
「カスタムHTML」ブロックを追加するスライドを表示させたい場所で、ブロック追加ボタン（黒い「＋」マーク）をクリックします。
検索窓に「HTML」と入力するか、「ウィジェット」の項目の中から 「カスタムHTML」 というブロックを見つけてクリックします。
コードを貼り付ける追加された「カスタムHTML」ブロックの入力欄に、先ほどGoogleスライドでコピーしたコードをそのまま貼り付けます。
プレビューで確認するブロックの上部にある「プレビュー」というボタンをクリックすると、コードが実際の表示に切り替わります。スライドが正しく表示されていれば成功です！
パターンB：クラシックエディタをお使いの場合
以前からWordPressを使っている方で、プラグイン（Classic Editor）を入れて昔ながらの画面を使っている場合の手順です。
「テキスト」モードに切り替える記事の編集画面を開きます。右上に「ビジュアル」と「テキスト」という2つのタブがあります。
コードを貼り付ける時は、必ず 「テキスト」タブ（HTML編集モード） に切り替えてください。「ビジュアル」のまま貼り付けると、コードがただの文字列として表示されてしまいます。
コードを貼り付けるスライドを表示させたい箇所に、コピーしたコードを貼り付けます。
表示を確認する「ビジュアル」タブに戻るか、画面右上の「プレビュー」ボタンを押して、スライドが四角い枠として表示されているか確認します。
【超重要】スマホではみ出さない！レスポンシブ対応の魔法のコード
さて、ここまでで「スライドを埋め込む」という基本的な目的は達成できました。
パソコンからブログを見た場合は、綺麗にスライドが表示されているはずです。
しかし、ここで一つ大きな問題が発生します。
お手持ちのスマートフォンで、先ほど作成したプレビュー画面を見てみてください。（もしくはパソコンのブラウザの幅をグッと狭めてみてください）。
おそらく、スライドの右側が画面の外にはみ出してしまったり、レイアウトが崩れたりしているはずです。
なぜスマホではみ出してしまうのか？
理由は単純で、Googleスライドからコピーした初期状態のコードには、以下のような指定が含まれているからです。
width="960" height="569"
これは、「どんな画面で見られても、横幅を絶対に960ピクセル、高さを569ピクセルで表示しなさい」という命令です。
最近のスマートフォンの画面幅は375〜400ピクセル程度が主流です。
つまり、400ピクセルしかない画面に960ピクセルの巨大な画像を押し込もうとしているため、当然右側がスパッと切れてはみ出してしまうのです。
これを、「見ている人の画面サイズに合わせて、自動で伸び縮みする（レスポンシブ対応）」 ようにコードを少しだけ書き換える必要があります。
コピペで完了！レスポンシブ対応コードへの書き換え手順
難しそうに聞こえるかもしれませんが、安心してください。以下の手順通りに文字を置き換えるだけで完了します。
手順1：コード全体を <div> タグで囲む
まず、コピーした <iframe> から始まるコードの前後を、以下のタグでサンドイッチのように挟み込みます。
【前に追加するコード】
<div style="width: 100%; aspect-ratio: 16/9;">
※もしスライドの縦横比が昔ながらの「4:3」の場合は、16/9 の部分を 4/3 に変更してください。
【後ろに追加するコード】
</div>
この 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](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](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>この「変更後」のコードを、WordPressの「カスタムHTML」ブロック（またはテキストエディタ）に貼り付けてみてください。
パソコンで見ると横幅いっぱいに大きく綺麗に表示され、スマホで見ると画面幅に合わせてスライドがキュッと縮んで、はみ出すことなく完璧に表示されるはずです！
応用編：もっと便利に使いこなすためのTips
基本的な設定は以上で完璧ですが、さらに一歩進んだ便利な使い方や、知っておくべき注意点をまとめました。
1. 「再利用ブロック（パターン）」に登録して作業を効率化
今後、ブログで何度も別のGoogleスライドを埋め込む予定がある場合、毎回 <div> タグを書いたり 100% に書き換えたりするのは面倒ですよね。
ブロックエディタをお使いなら、書き換え済みのレスポンシブ用HTMLコードを「パターン（旧：再利用ブロック）」としてWordPressに登録しておくことを強くおすすめします。
登録しておけば、次回からはそのパターンを呼び出し、src="URL" のURL部分だけを新しいスライドのものに差し替えるだけで、一瞬でスマホ対応のスライド埋め込みが完了します。劇的に作業スピードが上がる時短テクニックです。
2. スライド下部のコントロールバー（黒い帯）について
スライドを埋め込むと、下部にページ送りの矢印やGoogleスライドのロゴが入った「コントロールバー」が自動的に表示されます。
「このバーを消して、スライドだけを純粋に見せたい」というご質問をよくいただきますが、結論から言うと、現在のGoogleスライドの仕様上、このコントロールバーを完全に非表示にする公式な方法はありません。
読者が自分でスライドをめくるための重要なインターフェースでもあるため、これは「仕様」として割り切って使うのがベストです。
3. 情報漏洩に注意！公開範囲の確認
「ウェブに公開」を行うと、そのスライドのURLを知っている人であれば、世界中誰でも閲覧できる状態になります。
社外秘のデータ、個人情報、公開前の極秘プロジェクト資料などがスライドに含まれていないか、埋め込む前に必ず内容をダブルチェックする習慣をつけましょう。
もし一部の会員や社員だけに共有したい場合は、ブログへの埋め込み機能は使わず、Googleドライブの共有設定で「特定のユーザーのみ」に権限を付与し、そのリンクを共有するという使い分けが必要です。
よくある質問（トラブルシューティング）
- スライドの代わりに「アクセス権が必要です」というエラー画面が表示されてしまいます。
-
手順の「ウェブに公開」が正しく行われていない可能性があります。
Googleスライドの画面に戻り、「ファイル」＞「共有」＞「ウェブに公開」を開き、青い「公開」ボタンが押されて「公開済み」の状態になっているか再度確認してください。
- スライドの上下や左右に、黒い余白（帯）ができてしまいます。
-
指定した枠の縦横比（aspect-ratio）と、実際のスライドの縦横比がズレていることが原因です。
最近のGoogleスライドは「16:9（ワイドスクリーン）」が標準ですが、少し前に作られたスライドは「4:3（標準）」で作られていることがあります。
スライドの縦横比が4:3の場合は、コードの
aspect-ratio: 16/9;の部分をaspect-ratio: 4/3;に書き換えてみてください。ぴったりと収まるはずです。 - クラシックエディタで、ビジュアルタブとテキストタブを切り替えたらコードが消えました！
-
WordPressの仕様（自動整形機能）により、
<iframe>などの一部のHTMLタグが、タブの切り替え時にセキュリティ上の理由で自動的に削除されてしまうことがあります。対策としては、「テキスト」タブでコードを貼り付けたら「ビジュアル」タブには戻さず、そのまま「プレビュー」ボタンを押すか記事を公開してください。
何度も消えてしまって不便な場合は、「Iframe」というタグの削除を防ぐプラグイン（例：Advanced Editor Toolsの設定変更など）を導入することをおすすめします。
まとめ：Googleスライドを活用して、リッチなブログ記事を作ろう！
いかがでしたでしょうか？
一見難しそうに見える「コードの埋め込み」も、手順に沿って進めればたった数分で完了することがお分かりいただけたかと思います。
おさらいすると、重要なポイントは以下の3つです。
- Googleスライド側で「ウェブに公開」をしてコードを取得する。
- WordPressの「カスタムHTML」（またはテキストモード）でコードを貼り付ける。
- スマホではみ出さないように、
<div>タグとaspect-ratioを使って幅・高さを100%に書き換える（レスポンシブ化）。
このレスポンシブ化のテクニック（aspect-ratio: 16/9;）は、Googleスライドだけでなく、YouTube動画やGoogleマップをWordPressに埋め込む際にも全く同じように使えます。
そのため、非常に強力で汎用性の高いWeb制作の小技です。覚えておいて絶対に損はありません。
文字だけのブログよりも、視覚的に訴えかけるスライド資料が埋め込まれた記事は、読者の満足度を飛躍的に高めてくれます。
セミナーのレポート記事、ノウハウの解説記事、ポートフォリオの紹介など、様々な場面でGoogleスライドの埋め込み機能を活用し、より魅力的で伝わるコンテンツ作りに役立ててください！
