[オープン][BLOCK][レスポンシブ]曜日でスタート位置が決まる3ボタン統合スライドショーギャラリー cpBlHD_wsg_3b_zdwp

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　１週間分で7個のBLOCKデータを使い、今日の曜日のBLOCKデータからスタートするスライドショーギャラリーです。 2種類のデザインを掲載しています。操作ボタンは3個で、モバイルではサムネイルギャラリー部分のタップ、パソコンではスライドショーにマウスを重ねると出てきます。; 　このページのスライドショーの切り替えアニメーションはです。ページ最下部の「別のアニメーションを見る」内のリンクで、同じスライドショーで別アニメーションの解説ページが開きます。; 　スライドショーのデータは、クラス名"base"のdiv要素の中にクラス名"koboData"のdiv要素で、日曜日から始まる1週間分を記述してください。 div要素の中身は写真や文章などをHTMLで自由に書くことができます。写真のみを表示する場合はその背景画像に写真を設定します。; 　サムネイルのデータはクラス名"gal_base"のdiv要素の中の7個のimg要素です。すべて同じアスペクト比の画像を用意してください。スライドショーデータとサムネイルデータは、同じ順番で記述してください。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。

アスペクト比維持型
	⇔
ポラロイドorチェキ風デザイン
	⇔

・　下ギャラリー型スライドショーギャラリー

/** ページ全体。必要に応じて書き換えてください。 **/
body{font-family:"メイリオ";text-align:center;}

/** スライドショー全体。max-width:～px;に最大表示サイズを書く。 **/
.cpBlHD_wsg_h3b_zdwp_os{position:relative;top:0;left:0;width:100%;max-width:640px;margin:auto;overflow:hidden;}

/** 表示部分。アスペクト比維持型はpadding-top:～%;に写真の（高さ／幅）を％で書く。 **/
.cpBlHD_wsg_h3b_zdwp_os .base{position:relative;top:0;left:0;padding-top:75%;}

/** 個々のデータ。 **/
.cpBlHD_wsg_h3b_zdwp_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;background-size:cover;background-repeat:no-repeat;background-position:center;}
/** 個々のデータの中身。見本のデザインを使うときのみ使用。 **/
.cpBlHD_wsg_h3b_zdwp_os .base .koboData>div{font-size:16px;}
.cpBlHD_wsg_h3b_zdwp_os .base .koboData>div>div{font-size:30px;}
@media screen and (max-width: 600px){
.cpBlHD_wsg_h3b_zdwp_os .base .koboData>div{font-size:12px;}
.cpBlHD_wsg_h3b_zdwp_os .base .koboData>div>div{font-size:16px;}
}

/** サムネイル。 **/
.cpBlHD_wsg_h3b_zdwp_os .gal_base{position:relative;top:0;left:0;width:100%;display: flex;z-index:10;background-color:#fff;}
.cpBlHD_wsg_h3b_zdwp_os .gal_base img{cursor:pointer;transition-duration:.5s;}

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpBlHD_wsg_h3b_zdwp_os .but_sl{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;z-index:10;width:40px;height:40px;border:0;outline:0;border-radius:50%;line-height:40px;color:#fff;font-family:'メイリオ';font-size:10px;text-align:center;cursor:pointer;opacity:0;transition-duration:0.5s;background-color:rgba(0,0,0,0.5);}
.cpBlHD_wsg_h3b_zdwp_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpBlHD_wsg_h3b_zdwp_os .mae{position:absolute;top:0;bottom:0;left:0;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.5);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpBlHD_wsg_h3b_zdwp_os .mae::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(-135deg);position:absolute;top:0;bottom:0;left:4px;right:0;margin:auto;}
.cpBlHD_wsg_h3b_zdwp_os:hover .mae{left:calc(20% - 25px);opacity:1;}
.cpBlHD_wsg_h3b_zdwp_os .tugi{position:absolute;top:0;bottom:0;right:0;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.5);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpBlHD_wsg_h3b_zdwp_os .tugi::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(45deg);position:absolute;top:0;bottom:0;left:0;right:4px;margin:auto;}
.cpBlHD_wsg_h3b_zdwp_os:hover .tugi{right:calc(20% - 25px);opacity:1;}

</style>

<div class="koboData" target="_blank" title="クンシラン" style="background-image:url('http://miyakekobo.starfree.jp/dl/DATA/3.jpg');">
<div style="position:absolute;bottom:20px;left:20px;width:37%;text-align:left;padding:20px;color:#fff;background-color:rgba(0,0,0,0.7);border-radius:10px;">
<div style="wodth:100%;text-align:center;">日曜日の写真</div>
<br />
　この見本のスライドショーデータは、class="koboData"のdiv要素の背景画像に写真を設定し、中に文章のdiv要素を入れたBLOCK型です。
</div>
</div>

<div class="koboData" target="_blank" title="ガクアジサイ" style="background-image:url('http://miyakekobo.starfree.jp/dl/DATA/24.jpg');">
<div style="position:absolute;top:20px;right:20px;width:37%;text-align:left;padding:20px;color:#fff;background-color:rgba(30,50,60,0.7);border-radius:10px;">
<div style="wodth:100%;text-align:center;">月曜日の写真</div>
<br />
　背景に画像を表示しする場合、スタイルでbackground-size:cover;とすると、表示部分の大きさで写真をリサイズします。アスペクト比が合わずに上下左右にはみ出す部分は、自動的にトリミングされます。
</div>
</div>

<div class="koboData" target="_blank" title="ハス" style="background-image:url('http://miyakekobo.starfree.jp/dl/DATA/7.jpg');">
<div style="position:absolute;top:20px;left:20px;width:37%;text-align:left;padding:20px;color:#fff;background-color:rgba(100,30,90,0.7);border-radius:10px;">
<div style="wodth:100%;text-align:center;">火曜日の写真</div>
<br />
　背景に画像を表示しする場合、スタイルでbackground-size:contain;とすると、表示部分に収まる大きさで写真をリサイズします。アスペクト比が合わない場合は上下左右に余白ができます。
</div>
</div>

<div class="koboData" target="_blank" title="ハナミズキ" style="background-image:url('http://miyakekobo.starfree.jp/dl/DATA/4.jpg');">
<div style="position:absolute;bottom:20px;left:20px;width:37%;text-align:left;padding:20px;color:#fff;background-color:rgba(0,60,30,0.7);border-radius:10px;">
<div style="wodth:100%;text-align:center;">水曜日の写真</div>
<br />
　このスライドショーは、曜日によって最初に表示される画面が決まります。水曜日はこの画面からスタートします。
</div>
</div>

<div class="koboData" target="_blank" title="正月桜" style="background-image:url('http://miyakekobo.starfree.jp/dl/DATA/10.jpg');">
<div style="position:absolute;bottom:20px;left:20px;width:37%;text-align:left;padding:20px;color:#fff;background-color:rgba(150,150,150,0.7);border-radius:10px;">
<div style="wodth:100%;text-align:center;">木曜日の写真</div>
<br />
　このスライドショーは本来マルチコンテンツデータ型のため、div要素以外にもa要素を使用してバナー型にでき、混在させる事もできます。
</div>
</div>

<div class="koboData" target="_blank" title="オダマキ" style="background-image:url('http://miyakekobo.starfree.jp/dl/DATA/2.jpg');">
<div style="position:absolute;bottom:20px;right:20px;width:37%;text-align:left;padding:20px;color:#fff;background-color:rgba(240,103,166,0.7);border-radius:10px;">
<div style="wodth:100%;text-align:center;">金曜日の写真</div>
<br />
　この見本ではサムネイル一覧を下部に置いていますが、HTMLの配置を逆にすれば、上部に置くこともできます。
</div>
</div>

<div class="koboData" target="_blank" title="さつき" style="background-image:url('http://miyakekobo.starfree.jp/dl/DATA/5.jpg');">
<div style="position:absolute;top:20px;left:20px;width:37%;text-align:left;padding:20px;color:#fff;background-color:rgba(90,60,60,0.7);border-radius:10px;">
<div style="wodth:100%;text-align:center;">土曜日の写真</div>
<br />
　このスライドショーは、曜日によって最初に表示される画面が決まります。土曜日はこの画面からスタートします。
</div>
</div>

</div>

</div>

</div>

,l=n.querySelector(".base"),f=n.querySelector(".gal_base"),a=n.querySelector(".but_sl"),k=n.querySelector(".mae"),d=n.querySelector(".tugi"),e=l.querySelectorAll(".koboData"),u=f?f.querySelectorAll("img"):"",v=e.length,h,t=0,p=0,g=1,w=!1,it=new Date,rt=it.getDay(),o=Copyright,b=HomePage,nt=MailAddress,ut=ContentType,c={iy:v,ya:ya,ke:ds},i=document.createElement("a"),s=function(n){w||(w=!0,g=n>t?1:-1,p=t,t=n,t+=c[b.substr(8,2)],t%=c[nt.substr(1,2)],document.querySelector(".c_"+o).href.substr(8,2)===o.substr(1,2)&&setTimeout(ft,50))},ft=function(){clearTimeout(h);af(n,l,ya,e[t],e[p],g);f&&(u[p].style.opacity=1,u[t].style.opacity=.3);setTimeout(function(){y&&tt();w=!1},c[nt.substr(2,2)]+100)},tt=function(){clearTimeout(h);h=setTimeout(function(){s(t+1)},c[b.substr(11,2)])},r;if(n.mp=document.createElement("div"),l.appendChild(n.mp),n.mp.style.position="absolute",n.mp.style.top="0px",n.mp.style.left="0px",n.mp.style.zIndex=0,n.mp.style.width="100%",n.mp.style.height="100%",n.mp.style.display="none",n.mp.style.transitionProperty="transform,left,clip",n.mp.style.backgroundColor="#fff",f)for(r=0;r<v;r++)u[r].style.width=100/v+"%",u[r].ind=r,u[r].onclick=function(){this.ind!=t&&s(this.ind)};k&&(k.onclick=function(){s(t-1)});d&&(d.onclick=function(){s(t+1)});a&&(a.innerHTML=y?"pause":"play",a.onclick=function(){y?(clearTimeout(h),y=!1,this.innerHTML="play"):(y=!0,this.innerHTML="pause",s(t+1))});t=rt;f&&(u[t].style.opacity=.3);e[t].style.zIndex=2;e[t].style.opacity=1;window.addEventListener("load",function(){document.querySelector(".c_"+o)||(document.body.appendChild(i),i.setAttribute("href",b),i.setAttribute("class","c_"+o),i.innerHTML=ut+" (C) "+o,i.style.display="none",i.style.fontSize="12px",i.style.width="250px",i.style.margin="1ex auto");y&&tt()})}(document.getElementById("

　以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。可能ならば、スタイルシート部分はHEAD内に移動してください。また、スタイルシートとスクリプトをそれぞれ別ファイルにし、ページに読み込んで使用する事も可能です。

・　ポラロイドorチェキ風スライドショーギャラリー: 　写真の枠を白色にしているためスライドショーの親要素の背景色をベージュにしてありますが、下部のソースコードにはその部分はありません。ご自身のページのデザインに合わせて、スライドショーを張り付ける部分のスタイルシートで背景色を設定してください。