TAGS :, , , ,

先日ここで、レスポンシブ対応のスライドショーとして、
「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」
と題して、クロスフェードで切り替わるレスポンシブスライドショーを紹介しましたが
フェード切り替えばかりじゃおもしろくないと思い
同様の構成で切り替わる際に、画像を分割してアニメーションするパターンを
実験的に作ってみたので紹介してみたいと思います。

jQueryでレスポンシブ対応の画像を分割して切り替えるスライドショーを作る実験

今回のスライダー動作はなかなか言葉では説明しずらいのでまず動作サンプルから。。。

「jQueryでレスポンシブ対応の画像を分割して切り替えるスライドショーを作る実験」サンプルを別枠で表示

サンプルでは6枚の画像を使用し、
切り替えの際には縦に20等分ストライプ上に分割した動きで切り替えています。

下に並べてあるサムネイルをクリックすることでも
メインビジュアル部分を切り替えることができる形になっています。
（左右のNEXT／BACKボタンで画像を切り替えることも可。）

サンプルでは最大幅を「800px」最小幅を「320px」として
ブラウザ幅によってスライドショー部分が拡大縮小します。（どちらの値も変更可）

簡単な動作仕様については以上になります。

全体構成についてまずはHTMLから。

◆HTML
<div class="slideShow">

<div class="mainView">
<ul class="vertical">
<li><a href="#1"><img src="img/photo1.jpg" alt=""></a></li>
<li><a href="#2"><img src="img/photo2.jpg" alt=""></a></li>
<li><a href="#3"><img src="img/photo3.jpg" alt=""></a></li>
<li><a href="#4"><img src="img/photo4.jpg" alt=""></a></li>
<li><a href="#5"><img src="img/photo5.jpg" alt=""></a></li>
<li><a href="#6"><img src="img/photo6.jpg" alt=""></a></li>
</ul>
</div><!--/.mainView-->

<div class="thumbNail">
<ul>
<li><img src="img/photo1.jpg" alt=""></li>
<li><img src="img/photo2.jpg" alt=""></li>
<li><img src="img/photo3.jpg" alt=""></li>
<li><img src="img/photo4.jpg" alt=""></li>
<li><img src="img/photo5.jpg" alt=""></li>
<li><img src="img/photo6.jpg" alt=""></li>
</ul>
</div><!--/.thumbNail-->

</div><!--/.slideShow-->

クラスやIDを付けた全体を囲う任意のブロック要素「.slideShow」の中に
メインビジュアル部分のブロック要素「.mainView」と
サムネイル部分のブロック要素「.thumbNail」を配置し
それぞれの中に＜ul＞リストを使って画像を並べます。

サンプルでは画像を6つにしていますが
これを増減させるには単純に＜li＞の数をそれぞれ同じ個数増減するだけです。

ページネーションや左右のNEXT／BACKボタンは
スクリプト側から生成するようにしているので
HTMLには記述しません。

＜ul＞にクラスを付けてありますが
「class=”vertical”」とすると縦向きストライプ分割
「class=”horizontal”」とすると横向きボーダー分割
で動作させることができるようになっています。

そしてCSSは以下の様になります。

◆CSS
/* .slideShow
------------------------- */
.slideShow {
	margin: 0 auto;
	text-align: left;
	display: none;
}

/* .mainView
------------------------- */
.slideShow .mainView {
	width: 100%;
	position: relative;
}
.slideShow .mainView ul {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.slideShow .mainView ul li {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
}

/* .thumbNail
------------------------- */
.slideShow .thumbNail {
	width: 100%;
	overflow: hidden;
}

.slideShow .thumbNail ul {
	width: 110%;
}

.slideShow .thumbNail ul li {
	float: left;
	display: inline;
	overflow: hidden;
	cursor: pointer;
}

.slideShow .thumbNail ul li img {
	width: 100%;
}

.slideShow .thumbNail ul li.active {
	filter: alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}

/* sideNavi
------------------------- */
.slideShow .mainView .btnPrev,
.slideShow .mainView .btnNext {
	top: 0;
	width: 5%;
	height: 100%;
	position: absolute;
	z-index: 100;
}
.slideShow .mainView .btnPrev {
	left: -5%;
	background: transparent url(../img/btnPrev.png) no-repeat center center;
}
.slideShow .mainView .btnNext {
	right: -5%;
	background: transparent url(../img/btnNext.png) no-repeat center center;
}


/* =======================================
	ClearFixElements
======================================= */
.slideShow ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.slideShow ul {
	display: inline-block;
	overflow: hidden;
}

スライドショー部分の幅や高さは
スクリプト側から制御するので
CSS側では幅100%だけ入れておきます。

ブラウザ幅の判別などもスクリプト側で制御するので
CSSでのメディアクエリー指定も特に使用しておりません。
（実際にページに組み込む際にはページのレイアウト制御等々で使用することになると思いますが）

スライド左右のNEXT／BACKボタン部分の
色など見た目はCSSで指定しておきます。

そして実際の動作スクリプトは以下の様になります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	$(window).load(function(){
		var setWrap = $('.slideShow'),
		setMainView = $('.mainView'),
		setThumbNail = $('.thumbNail'),
		setMaxWidth = 800,
		setMinWidth = 320,
		sliceSplit = 20,
		thumbNum = 6,
		thumbOpc = 0.5,
		slideFadeTime = 1000,
		delayTime = 5000,
		easing = 'linear',
		sideNavi = 'on', // 'on' or 'off'
		autoPlay = 'on'; // 'on' or 'off'

		setWrap.each(function(){
			var thisObj = $(this),
			childMain = thisObj.find(setMainView),mainUl = childMain.find('ul'),mainLi = mainUl.find('li'),mainLiFst = mainUl.find('li:first'),mainLiImg = mainLi.find('img'),
			childThumb = thisObj.find(setThumbNail),thumbUl = childThumb.find('ul'),thumbLi = childThumb.find('li'),thumbLiFst = childThumb.find('li:first'),thumbLiLst = childThumb.find('li:last'),
			slicePattern = mainUl.attr('class');//縦[vertical]横[horizontal]

			mainLiImg.addClass('basisImg').css({width:'100%'});
			thisObj.css({width:setMaxWidth,display:'block'});

			// メインエリアにID設定
			mainLi.each(function(i){
				$(this).attr('id','view' + (i+1).toString()).css({zIndex:'98'});
				mainLiFst.css({zIndex:'99'}).stop().animate({opacity:'1'},slideFadeTime,easing);
			});

			// メイン画像をベースにエリアの幅と高さを設定
			var mainLiImg = mainLi.find('img'),
			baseWidth = mainLiImg.width(),
			baseHeight = mainLiImg.height();
			if(slicePattern == 'vertical'){
				var sliceWidth = Math.round(setMaxWidth / sliceSplit);
			} else if(slicePattern == 'horizontal') {
				var sliceHeight = Math.round(baseHeight / sliceSplit);
			}

			// 画像をスライス
			if(jQuery.support.opacity){ // IE8,7,6以外
				mainLi.each(function(){
					var targetList = $(this),
					sliceImg = targetList.find('img'),
					imgSrc = sliceImg.attr('src'),
					targetLink = targetList.find('a');

					sliceImg.css({visibility:'hidden'});
					if(slicePattern == 'vertical'){
						$.each(new Array(sliceSplit),function(i){
							i = i+1;
							targetLink.append('<span class="slice' + i + '" style="top:0;left:' + (sliceWidth*(i-1)) + 'px;width:0;height:' + baseHeight + 'px;display:block;position:absolute;overflow:hidden;"><img src="' + imgSrc + '" style="top:0;left:-' + (sliceWidth*(i-1)) + 'px;width:' + baseWidth + 'px;height:' + baseHeight + 'px;display:block;position:absolute;"></span>');
						});
						var targetSlice = targetLink.find('span');
						targetSlice.stop().animate({width:(sliceWidth)},slideFadeTime,easing);
					} else if(slicePattern == 'horizontal') {
						$.each(new Array(sliceSplit),function(i){
							i = i+1;
							targetLink.append('<span class="slice' + i + '" style="top:' + (sliceHeight*(i-1)) + 'px;left:0;width:' + baseWidth + 'px;height:0;display:block;position:absolute;overflow:hidden;"><img src="' + imgSrc + '" style="top:-' + (sliceHeight*(i-1)) + 'px;left:0;width:' + baseWidth + 'px;height:' + baseHeight + 'px;display:block;position:absolute;"></span>');
						});
						var targetSlice = targetLink.find('span');
						targetSlice.stop().animate({height:(sliceHeight)},slideFadeTime,easing);
					}
				});
			}

			// サムネイルクリック
			thumbLi.click(function(){
				if(!$(this).hasClass('active')){
					if(autoPlay == 'on'){clearInterval(setTimer);}

					var connectCont = thumbLi.index(this),
					showCont = connectCont+1,
					sliceSpan = mainLi.find('span');
					if(!jQuery.support.opacity){ // IE8,7,6はやむなくフェード
						mainUl.find('#view' + (showCont)).appendTo(mainUl).css({zIndex:'100',opacity:'0'}).stop().animate({opacity:'1'},slideFadeTime,easing);
					} else {
						if(slicePattern == 'vertical'){
							animSliceWidth = sliceSpan.width();
							mainUl.find('#view' + (showCont)).appendTo(mainUl).css({zIndex:'100'}).find('span').css({width:'0',opacity:'0'}).stop().animate({width:(animSliceWidth),opacity:'1'},slideFadeTime,easing);
						} else if(slicePattern == 'horizontal') {
							animSliceHeight = sliceSpan.height();
							mainUl.find('#view' + (showCont)).appendTo(mainUl).css({zIndex:'100'}).find('span').css({height:'0',opacity:'0'}).stop().animate({height:(animSliceHeight),opacity:'1'},slideFadeTime,easing);
						}
					}
					$(this).addClass('active');
					$(this).siblings().removeClass('active');

					if(autoPlay == 'on'){timer();}
				}
			});
			thumbLi.css({opacity:thumbOpc});
			thumbLiFst.addClass('active');

			// サイドナビボタン（有り無し）
			var agent = navigator.userAgent;
			if(sideNavi == 'on'){
				childMain.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
				var btnPrev = thisObj.find('.btnPrev'),btnNext = thisObj.find('.btnNext'),btnPrevNext = (btnPrev,btnNext);
				if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
					btnPrevNext.css({opacity:thumbOpc}).hover(function(){
						$(this).stop().animate({opacity:'0.9'},200);
					},function(){
						$(this).stop().animate({opacity:thumbOpc},200);
					});
				} else {
					btnPrevNext.css({opacity:thumbOpc});
				}
				btnPrev.click(function(){switchPrev();});
				btnNext.click(function(){switchNext();});
			}

			// レスポンシブ動作メイン
			function imgSize(){
				$('html,body').css({overflow:'hidden'});

				var windowWidth = parseInt($(window).width()),
				resizeLink = mainLi.find('a'),
				resizeImg = resizeLink.find('img.basisImg'),
				resizeSpan = resizeLink.find('span'),
				resizeSpanImg = resizeSpan.find('img');
				if(windowWidth >= setMaxWidth) {
					thisObj.css({width:setMaxWidth});
					childMain.css({width:baseWidth});
					mainUl.css({width:baseWidth});
					mainLi.css({width:baseWidth});
					resizeImg.css({width:baseWidth});
					thumbLi.css({width:((setMaxWidth)/(thumbNum))});
					if(sideNavi == 'on'){
						btnPrevNext.css({display:'block'});
					}
				} else if(windowWidth < setMaxWidth) {
					if(windowWidth >= setMinWidth) {
						thisObj.css({width:'100%'});
						childMain.css({width:'100%'});
						mainUl.css({width:'100%'});
						mainLi.css({width:'100%'});
						resizeImg.css({width:'100%'});
					} else if(windowWidth < setMinWidth) {
						thisObj.css({width:setMinWidth});
						childMain.css({width:setMinWidth});
						mainUl.css({width:setMinWidth});
						mainLi.css({width:setMinWidth});
						resizeImg.css({width:setMinWidth});
					}
					if(sideNavi == 'on'){
						btnPrevNext.css({display:'none'});
					}

					var reWidth = setThumbNail.width();
					thumbLi.css({width:((reWidth)/(thumbNum))});
				}

				var reSetImg = resizeLink.find('img.basisImg'),
				setImgWidth = reSetImg.width(),
				setImgHeight = reSetImg.height();

				childMain.css({height:setImgHeight});
				mainUl.css({height:setImgHeight});
				mainLi.css({height:setImgHeight});

				if(jQuery.support.opacity){ // IE8,7,6以外
					if(slicePattern == 'vertical'){
						var setSpWidth = Math.round(setImgWidth / sliceSplit);
						mainLi.each(function(){
							$(this).find('span').each(function(i){
								$(this).css({left:(setSpWidth*i),width:setSpWidth,height:setImgHeight}).children('img').css({left:-(setSpWidth*i),width:setImgWidth,height:setImgHeight});
							});
						});
					} else if(slicePattern == 'horizontal') {
						setSpHeight = Math.round(setImgHeight / sliceSplit);
						mainLi.each(function(){
							$(this).find('span').each(function(i){
								$(this).css({top:(setSpHeight*i),width:setImgWidth,height:setSpHeight}).children('img').css({top:-(setSpHeight*i),width:setImgWidth,height:setImgHeight});
							});
						});
					}
				}
				$('html,body').css({overflow:''});
			}
			$(window).resize(function(){imgSize();});
			imgSize();

			// サムネイルマウスオーバー
			if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
				thumbLi.hover(function(){
					$(this).stop().animate({opacity:'1'},200);
				},function(){
					$(this).stop().animate({opacity:thumbOpc},200);
				});
			}

			// ボタン移動動作
			function switchNext(){
				var setActive = thumbUl.find('.active');
				setActive.each(function(){
					var listLengh = thumbLi.length,
					listIndex = thumbLi.index(this),
					listCount = listIndex+1;

					if(listLengh == listCount){
						thumbLiFst.click();
					} else {
						$(this).next('li').click();
					}
				});
			}
			function switchPrev(){
				var setActive = thumbUl.find('.active');
				setActive.each(function(){
					var listLengh = thumbLi.length,
					listIndex = thumbLi.index(this),
					listCount = listIndex+1;

					if(1 == listCount){
						thumbLiLst.click();
					} else {
						$(this).prev('li').click();
					}
				});
			}

			// 自動再生（有り無し）
			if(autoPlay == 'on'){
				function timer(){
					setTimer = setInterval(function(){
						switchNext();
					},delayTime);
				}
				timer();
			}
		});
	});
});
</script>

スクリプト開始部分にある設定値の内容は以下の様になっています。

var setWrap = $(‘.slideShow’) スライドショー全体を囲うブロック要素名（IDでも可）
setMainView = $(‘.mainView’) メインビジュアル部分を囲うブロック要素名（IDでも可）
setThumbNail = $(‘.thumbNail’) サムネイル部分を囲うブロック要素名（IDでも可）
setMaxWidth = 800 スライドショー部分の最大幅
setMinWidth = 320 スライドショー部分の最小幅
sliceSplit = 20 画像切り替えの際に分割させる数
thumbNum = 6 一行に並べるサムネイル数
thumbOpc = 0.5 サムネイルの非アクティブ時の透過度
fadeTime = 700 フェードアニメーションスピード
delayTime = 5000 スライドアニメーション待機時間
easing = ‘linear’ スライドアニメーションイージング
sideNavi = ‘on’ 左右NEXT／BACKの表示／非表示（非表示の場合は「off」等）
autoPlay = ‘on’ 自動切換え動作のON／OFF（自動切換えさせない場合は「off」等）

これらの設定値を変更することでもろもろ調整が可能になっています。

スクリプト全体はあまりシンプルと言える構成ではありませんが
少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。

画像サイズ（比率）によって各エリアの幅と高さを取得して制御していることもあり
使用する（切り替える）画像は全て幅と高さを同サイズのものを使用する必要があります。

サンプルでは画像切り替えの際に、全体を20分割して切り替えていますが
「sliceSplit」の値を変えることで分割させる数を設定させることができるようになっています。
※分割数を増やしすぎると動作が重くなるので適度の数で。

上で説明済みですが切り替えるパターンは
HTMLソース上で＜ul＞に対してクラスを
「class=”vertical”」とすると縦向きストライプ分割
「class=”horizontal”」とすると横向きボーダー分割
といった形で切り替えることが可能になっています。

サンプルではサムネイルを1行に6つ全て並べていますが
「thumbNum = 6」を「3」とすることで1行に3つ並べて2行にわたって表示する形になります。

「sideNavi = ‘on’」を「off」とすれば左右のボタンは表示されなくなります。
（記述は「off」でなくても「on」じゃなければ何でもいいです・・・）

１ページ内に複数設置する場合は自動スライド機能は一つ目のスライダーのみにしか動作しないので
必要なければ「autoPlay = ‘on’」を「off」としていただければと思います。
（こちらも記述は「off」でなくても「on」じゃなければ何でもいいです・・・）

自動切換え動作を止めて、縦向きストライプ分割と横向きボーダー分割の2パターンを並べて、スライドアニメーションにイージングを追加したパターンのサンプルを別枠で表示

対象ブラウザはIE8,7,6も視野に入れて作っていたつもりなのですが
この記事の公開日時寸前で
きちんと動作していないことに気付き（デベロッパーツールやIE TESTERでは動いていた・・・）
どうあがいてもスライス部分がこのままの構成では
うまく動作してくれないようだったので
やむを得ず強引にIE8より古いものはフェード切り替えにしてあります。。（勉強不足でした・・・）
※また改訂版を作れたら・・・

かなり強引に実験的に作ったものですが
画像を分割して切り替えるスライドショーを実装する際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

SHARE

Related Posts

Comments (12)

  • Choma | 2014.02.01 20:08

    お世話になります。Chomaと申します。
    いつもこちらのサイトで勉強させていただいております。ありがとうございます。
    一点気になる箇所があったので、コメントさせていただきました。
    文章中に「メインビジュアルの画像は＜a＞タグで囲ってありますがリンクする必要がない場合はこのタグは不要です。」とございますが、＜a＞タグをはずすと画像が表示されなくなります。
    おそらく、原因は画像をスライスする処理をtargetLink（＜a＞タグ）をアペンドする形で行われているからだと思われるのですがいかがでしょうか。
    私はjQueryはまだ勉強中でして、指摘事項が見当違いでしたら、大変申し訳ございません。
    もし、よろしければ私のメールアドレスの方にご回答いただけると幸いです。
    これからもBlackFlag 様のサイトは感謝の気持ちを持ちつつ、拝見させていただきます。
    以上、何卒よろしくお願い致します。

  • BlackFlag | 2014.02.04 0:27

    ＞Chomaさん
    コメントありがとうございます。
    当ブログをいろいろとご活用いただいている様で
    嬉しく思っております。

    ご質問頂きました件についてですが
    他の記事の本文を流用して書いた際の消し忘れでした。
    失礼致しました。

    当記事のスクリプトでは＜a＞タグを使用するベースになっているので
    必要なタグになります。

    リンクさせたくない場合には
    ＜a＞タグのhrefに「javascript：void(0);」を入れて
    CSSで「cursor: default」にすることで
    見た目上リンクさせていない様に見せる方法になるかと思っております。

    ご検討ください。
    よろしくお願いします。

  • Jack | 2014.12.03 16:41

    いつも、参考にさせてもらってます。

    こちらのサイトを利用させてもらえて助かっております。ありがとうございます。
    まだまだ、初心者ですのでご指導下さい。

    今回、こちらのスライダーと、https://black-flag.net/jquery/20130709-4710.htmlが理想に近いので、
    利用したいのですが、

    こちらのスライダーをベースに、
    メイン画像の両サイドに1枚前の画像と次の画像を透過で表示させるには、どうしたら良いでしょうか？

    　　　　　 ┏ ファーストビュー領域 ┓
    ┏━━━━━━┓┏━━━━━━┓┏━━━━━━┓
    ┃　画像C ｜＜┃┃メイン画像　┃┃＞｜画像A　 ┃　「　＞　」の背景は透過で次の画像が見える
    ┗━━━━━━┛┗━━━━━━┛┗━━━━━━┛　（クリックでスライド）
    　　　　　｜　　■■■■■■■■ ｜
    　　　　　｜　　■■■■■■■■ ｜「サムネイル」ロールオーバーで、メインがスライドで切り替わる
    　 ┗━━━━━━━━━━━━┛

    ※サムネイルはリストでスタイル制御が望ましいです。

    画像は分割しないで、スライドするだけで良いのですが、
    このように実装するにはどうしたらよいでしょうか？

  • BlackFlag | 2014.12.08 0:50

    ＞Jackさん
    コメントありがとうございます。
    当記事のスライドショースクリプトをお試しいただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    実装されようとしている動作は
    ご記載いただいた「https://black-flag.net/jquery/20130709-4710.html」
    こちらのスライダー動作とどの部分が違うのでしょうか。。
    （実装されようとしている動作が分からないです・・・）

    サムネイル（ページネーション）の部分が
    クリックではなくロールオーバーで動作させる、ということでしたら
    記事内スクリプトの124行目の「click」を「hover」に変えてみては如何でしょうか。

    お試しください。
    よろしくお願いします。

  • Jack | 2014.12.08 19:02

    回答ありがとうございます。
    hoverは試してみました。ありがとうございます。

    すみません。質問が言葉足らずでした。。。

    目的としては、
    「サムネイルを自由に装飾」しながら、上記（https://black-flag.net/jquery/20130709-4710.html）のように前後の画像を透過で見えるようにしたかった為、
    こちらのソースなら可能かと思いまして、ご質問させていただきました。

    サムネイル自体に枠や、上部・下部に▲を付けたり、テキストを追加したり、ロールオーバーでスライドショー・クリックでページジャンプ…と、
    色々試したい事がありまして。。。

    もし、「https://black-flag.net/jquery/20130709-4710.html」の
    サムネイル部分を自由に装飾することが可能であれば、それはそれで良いのですが。
    （見た目は理想に近いので）

    なにぶん初心者でして、お手上げ状態なのです。。。

    ご指導、よろしくお願いいたします。

  • BlackFlag | 2014.12.12 0:52

    ＞Jackさん
    サムネイルの装飾に関しては
    https://black-flag.net/jquery/20130709-4710.html
    こちらのサンプル２にあるように
    サムネイルに個別にクラスが付与されるようになっておりますので
    基本的にはその範囲で制御する形になります。
    （個別に違う画像を指定させることは可能です）

    サムネイル個々に画像以外の部分で
    形状等カスタマイズさせることも可能ではありますが
    別途スクリプトを組む必要があると思っております。

    以上になりますが
    よろしくお願いします。

  • Jack | 2014.12.13 10:33

    返答ありがとうございます。

    やはり、https://black-flag.net/jquery/20130709-4710.htmlでは、サムネイルの装飾は難しいようですね。。。

    では、
    当初の目的である。こちらのコードを元に、画像を分割なしで前後の画像を透過で見せることは可能でしょうか？

    可能であれば、どのように組めば良いでしょうか？

    お手数ですが、よろしくお願いします。

  • BlackFlag | 2014.12.14 1:45

    ＞Jackさん
    当記事のスクリプトはその様な構成では想定しておりませんので
    ちょっとしたカスタマイズなどでは実現は厳しいかと思っております。

    またその様な構成でのスライダーができましたら
    ここで紹介させていただきます。

    よろしくお願いします。

  • Jack | 2014.12.17 10:57

    返答ありがとうございます。

    やはり厳しいですか。。。

    BlackFlagさんのスクリプトかなり活用させて頂いていますので、
    期待しております。

    是非、新しいスクリプトをよろしくお願いいたします！

  • まめ太 | 2017.09.13 15:06

    自分のサイトを作るのに、あれこれと試してみているところです。
    以前からこちらのサイトは拝見させて頂いています。
    初心者で大変ご迷惑をおかけすると思うのですが、いくつかどうしてもわからなくて教えて頂きたいことがあります。多分単純なところのミスか書き漏れなどだとは想像しています。

    ①urlのように作ってみました。headerの絵とこちらのスライドショーのエリアとの間がどうしても消せません。どのように詰めたら良いのかおわかりになりますか？（白い線が入っています）

    ②メインのスライド用の大きな写真がありますが、横は左右移動させられるものの、上下が上手く調整できません。cssを色々と書き直してみましたが均等に空けられません。どのようにしたらできますか。

    ③スライド下の小さな写真ですが、何故かしらずれてしまい、右の写真が欠けてしまいました。基本的なところはいじっていませんので、これも何故ずれてしまったのか。元々作っていたデータが影響しているのはわかるのですが、重なる名前もありません。

    ④やってみたいのは、この状態を60%位に小さくし左側に寄せて、右側にコメントを書けるようにしてみたいと考えています。上下左右の調整が上手くいかないので、恐らくそれが原因だとは思いますが…レスポンス使用にしたいので、cssではfloatとwidth50%を入れてみましたが、どうもこれも効きません。

  • まめ太 | 2017.09.19 10:54

    先日ご質問させて頂きましたが、どうにか他の方法で設置することができました。ありがとうございました！
    これからも参考にさせて頂きたいと思います。^^

  • BlackFlag | 2017.09.24 9:02

    ＞まめ太さん
    コメントありがとうございます。
    当記事のスクリプトをご活用いただいているようで
    うれしく思っております。

    問題となっていた点も解消できたようでよかったです。

    他にもいろいろと紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「＜」「＞」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して