GoogleSitesにPhotogallery

Google Sites にCSSでフォトギャラリー

GoogleSitesにLightboxタイプのフォトスライダーを、HTMLとCSSの記述のみで埋め込む方法について以下に説明します。

準備するスライド：サムネイル用 250✕141pxの画像10枚を、拡大表示用1980×1080の画像10枚を、google drive にアップロードしておく（もっと小さいサイズでも可）

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

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

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

・ページに表示される画像をクリックすると、表示枠が現れるので、表示位置、表示サイズを好みで調節する。

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

</div>

</label>

<span class="span_l">1/10　　　朝焼けの槍ヶ岳（水晶小屋より）</span>

</div>

<span class="span_l">2/10　　　朝焼けの常念岳・富士山</span>

</div>

</div>

</div>

<span class="span_l">5/10　　　立山・後立山連峰</span>

</div>

</div>

</div>

<span class="span_l">8/10　　　野口五郎岳</span>

</div>

<span class="span_l">9/10　　　真砂岳分岐から槍ヶ岳</span>

</div>

</div>

/*全サムネイルのコンテナー*/

#thumbs {

position: absolute;

width:80%;

left:10%;

top:10%;

margin:0 auto;

}

/*サムネイルのマウスオーバーでポインターを手のひら*/

#thumbs label img {

cursor: pointer;

width:18%;

}

/*ラジオボタンを非表示に*/

#r1, #r2, #r3, #r4, #r5, #r6, #r7,#r8,#r9,#r10,#r11,#r12 {

display: none;

}

/* 写真表示領域 */

#stage {

position:relative;

width:100%;

height:100%;

z-index:-100;

}

/*表示写真の初期配置（全部透明に）*/

.photo {

position:absolute;

width:90%;

left:5%;

top:5%;

background:#fff;

opacity:0;

transition: all 1s ease;

}

/* 表示写真のサイズを可変に */

.photo img {

width: 100%;

height: auto;

}

/* 写真の表題・閉じるボタン */

.span_l { float:left; margin:3px 0 0 5px; }

.span_r { float:right; font-weight:bold; margin:3px 10px 0 0; cursor:pointer;}

/*写真表示時の画面遮蔽スクリーン*/

#darkscreen {

position:fixed;

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

background:#000;

display:none;

opacity:0.6;

z-index:-5;

}

/*ボタン領域の設定*/

.cover_left, .cover_right {

position:absolute;

top:0;

width:40%;

height:93%;

cursor:pointer;

}

.cover_left {

left:0;

}

.cover_right {

left:60%;

}

/* ボタン領域の最上面を非表示に

#photo5 label .cover_left,#photo5 label .cover_right {

display:none;

}*/

/*ボタン領域内のボタン文字（＜、＞）の設定*/

.cover_left span, .cover_right span {

position: absolute;

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;

font-size: 40px;

font-weight: bold;

opacity:0;

top: 45%;

}

@media screen and (max-width: 480px) {

.cover_left span, .cover_right span {

font-size: 20px;

}

.span_l,.span_r {

font-size: 12px;

}

.cover_left span {

left: 5%;

}

.cover_right span {

left: 85%

}

/*ボタン領域hover時文字の設定*/

.cover_right:hover > span, .cover_left:hover > span {

opacity:1;

color:#EEE;

}

/* サムネイル、送りボタンチェックで#stageを表示 */

/*#r1:checked ~ #stage,#r2:checked ~ #stage,#r3:checked ~ #stage,#r4:checked ~ #stage,#r5:checked ~ #stage {*/

.rdbtn:checked ~ #stage {

z-index:100;

opacity:1;

}

/* サムネイル、送りボタンチェックで#darkscreenを表示 */

/*#r1:checked ~ label #darkscreen, #r2:checked ~ label #darkscreen, #r3:checked ~ label #darkscreen, #r4:checked ~ label #darkscreen, #r5:checked ~ label #darkscreen {*/

.rdbtn:checked ~ label #darkscreen {

display:block;

opacity:0.6;

z-index:90;

}

/* 各サムネイルがチェックされた時の#photo の表示 */

#r1:checked ~ #stage #photo1,#r2:checked ~ #stage #photo2,#r3:checked ~ #stage #photo3,#r4:checked ~ #stage #photo4,#r5:checked ~ #stage #photo5,#r6:checked ~ #stage #photo6,#r7:checked ~ #stage #photo7,#r8:checked ~ #stage #photo8,#r9:checked ~ #stage #photo9,#r10:checked ~ #stage #photo10 {

opacity:1;

z-index:101;

}

.photo:target {

opacity:1;

z-index:101;

}

</style>

Google Sites

Report abuse