Site Overlay

Googleスライドをホームページに埋め込む

ホームページの中にスライドショーを入れたい。

そんなお客さんからの要望があったので、簡単にできる方法はないかな?と思い、色々調べてみた所「Googleスライド」を使ってホームページに埋め込めば簡単にできると書いてあったので、そのやり方を載せておきます。

本当だったら、javascriptやjqueryを使って作るんでしょうけど管理や更新が不便で、今回のお客さんには使い勝手が悪いのかなぁと思い、見栄えよりも簡単さを重視して、このやり方にたどり着きました。

Googleのアカウントがある事を前提に、まずはGoogleスライドのページで掲載したい写真を貼り付けていきます。使い方はパワーポイントと同じような感じですので、そんなに複雑な事はありません。

Googleスライドへのリンク

スライドを作成し、画面左上にある[ファイル]>[ウェブに公開]をクリックするとダイアログが開くので、[埋め込む]のタブをクリックします。


表示されているHTMLタグをコピーし、ホームページのスライドショーを掲載したい箇所にこのタグを貼り付けるだけでOKです。

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

レイアウトを調整したい場合は、[class=”g-slide”]を入れた[div]で囲んであげてください。class名は何でもいいです。今回のはとりあえずの例なので。

▼こんな感じでclassタグで囲みます。

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

で、このGoogleスライドの良かったところは、スライドショーをサイトに埋め込んだ後に、Googleスライドでどんどん写真を追加すると、ホームページのスライドショーにも反映されていくところです。修正の依頼があるたびに、いちいちHTMLを修正して、ファイルをサーバーにアップして、という手間がいらないのでとても便利に使えます!

スマホでキレイに表示させる場合は以下のタグをCSSファイルにコピペして入れるだけでOKです。

.g-slide{
position: relative;
overflow: hidden;
margin: 15px 0 20px 0;
padding-bottom: 50%;
padding-top: 65px;
}
.g-slide iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

埋め込んだスライドはこんな感じでホームページに埋め込むことが出来ます。

頻繁に画像をアップしていかないといけない更新作業の負担は、これを使えばかなり削減することが出来そうなので、Googleスライドはこれから便利に使っていければなと思います。

Scroll UpScroll Up