Google Sites にCSSでスライドショー

GoogleSitesにスライドショーを、HTMLとCSSの記述のみで埋め込む方法について以下に説明します。

準備するスライド:600✕338pxの画像5枚を、google drive にアップロードしておく

GoogleSitesでの作成方法:(GoogleSitesでサイトが登録されているものとします)

・ページの挿入したいところで、挿入カラムの上部にある、「<>埋め込む 」をクリックし、ポップアップするウインドウで「埋め込みコード」タブの中に、下記のHTML、CSSを書き込み(CSSは以下の記載コードのように、<style type="text/css"> </css> の中に書き込みます)、スライドショーを挿入します。

・なお、HTMLの <img src="https://drive.google.com/uc?export=view&id=1TgAIQRKzyMjtdqIJMLw4x0YT_tux8x68"> の id は、google drive でアップロードしておいた画像の共有リンクを取得すると得られる id です。

・ページに表示される画像をクリックすると、表示枠が現れるので、横に拡大させて表示位置を好みで調節する。

本サンプル表示埋め込み用HTML/CSS

<div id="stage">
      <div id="photo1" class="pic"><img src="https://drive.google.com/uc?export=view&id=1TgAIQRKzyMjtdqIJMLw4x0YT_tux8x68"></div>
      <div id="photo2" class="pic"><img src="https://drive.google.com/uc?export=view&id=1YoR3QmPk9A2Os-b_UQjxEUuQaK_LpvZG"></div>
      <div id="photo3" class="pic"><img src="https://drive.google.com/uc?export=view&id=1g_74y6XYN5L5g8iaHmfwEPK-xg8xcBSM"></div>
      <div id="photo4" class="pic"><img src="https://drive.google.com/uc?export=view&id=1_c5iH6INpPCssBnbNkZ0xUmS_QwIhs4-"></div>
      <div id="photo5" class="pic"><img src="https://drive.google.com/uc?export=view&id=1vdzQlxBQjZA_Fwby-0XDjynngs8wx5Ex"></div>
</div>

<style type="text/css">
#stage {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 40s infinite;
-webkit-animation: imgTrans 40s ease-in infinite;
animation: imgTrans 40s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
#photo4 img{
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
#photo5 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
</style>