css だけで作る スライドショー・フォトギャラリー

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

 無料でサイトを公開できるGoogle サイトは、googleドライブなど他のGoogleツールとの相性が良く、また、大きな広告も入らないということで、簡単なページで構成するようなサイトには使い勝手の良いツールと言えよう。しかし、画像やテキストボックスなどいろいろな要素を簡単に挿入できるのが便利であるという反面、見た目の良いデザインのページを作るには制約がある。
 本稿では、デフォルトの要素にはない「スライドショー」と「スライダー」を、HTML埋め込み機能を使って、ページに挿入する方法に関して記述する。

 すなわち、Google Driveにアップロードした画像をスライドのソースとして、スライドショー(Slideshow)とスライダー(Slider)を作成する方法に関する投稿である。

 google drive にアップロードされた画像を、自分のサイトに埋め込むには、以下のコードを挿入したいところに記述すればよい。
 <img src=”https://drive.google.com/uc?export=view&id=1Nvgzl_EC-MsmlR4yKLIThY2M4H_Mt-_b”>
 ここで、id=以下の文字列は、該当画像のgoogle drive の共有リンクを取得した時に得られるidである。
 (共有リンクは、https://drive.google.com/open?id=1Nvgzl_EC-MsmlR4yKLIThY2M4H_Mt-_b、となっている)

 以下のGoogleSitesのページに、スライドショーとスライダーのサンプルを、作成方法、HTML/CSSコードとともに示した。

 ・スライドショー: https://sites.google.com/view/slideshow-on-gglsites
 ・スライダー  : https://sites.google.com/view/slider-on-gglsites

 なお、ここで使用したHTMLとCSSのコードは、それぞれ、本サイトの「フェイドイン・アウト型スライドショー(レスポンシブ)」、「スライダー/左右移動型2(レスポンシブ)」と全く同じものである。