More than 1 year has passed since last update.

ZendeskのヘルプセンターにGoogle Slidesを埋め込む方法（レスポンシブ対応）

Last updated at 2022-09-07Posted at 2022-03-19

これは何？

Zendeskのサポートサイト（Guide機能/ヘルプセンター）に、Google Slidesを埋め込む方法です。
埋め込みは簡単ですが、Zendeskに綺麗に埋め込むためには、横幅の調整とかが必要です。
なので、そのあたりのポイントを書いています。CSS詳しい方は、ご自身で色々カスタマイズしてくださいｗ

挿入イメージは，以下の通りです。
レスポンシブなので、PCでも、スマホでも、きちんと表示されます。

注意事項

CSSをカスタママイズしているヘルプセンターでは、もしかしたら表示が崩れるかもしれません。
その場合は、適宜調整してください。

また、Zendeskから、iframeは気を付けろというアナウンスがなされています。
実施は自己判断でお願いいたします。
https://support.zendesk.com/hc/ja/articles/4408886053658

やり方

CSSの編集（レスポンシブ対応）

まずは、ヘルプセンターのCSSをいじります。
google slideをレスポンシブ（画面の表示サイズに応じて、自動的にサイズを調整する）対応させるために必要な作業です。
とはいっても、めっちゃ簡単です。以下のような感じで追加します。

追加するコードはこちらです。

.google-slide {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.google-slide iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

なお、以下のサイトを参考にしています。ほぼそのままです...w
https://webdesignday.jp/inspiration/technique/css/4213/

Google Slideで公開設定

1. ウェブに公開設定をする。

2. 次の画面では、デフォルト設定のままで『公開』を押す。

3. iframe....何たらの文字列をコピーする。

Google slideの横幅の指定

1. テキストに貼り付け

上記３でコピーした内容をテキストエディターに貼り付けます。

2. slideをZendeskのヘルプセンターに埋め込んだ場合の横幅の調整

Zendeskのサイトに埋め込んだときに良い感じに見られるように横幅を調整します。
widthを100%、heightをautoに変更。

3. Zendeskに入れる内容の作成

次に以下の内容をコピーして、テキストエディターに貼り付けます。

<div class="google-slide">
ここに上記2の内容を入れる
</div>

そして、上の『ここに上記2の内容を入れる』を入れるのところを、２の<iframe.....に置換します。

完成図のイメージはこちらです。

<div class="google-slide">
  <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSgxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/embed?start=false&amp;loop=false&amp;delayms=5000" width="100%" height="auto" frameborder="0" allowfullscreen="true"></iframe>
</div>