https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Common Rules > KeyビジュアルSET

KeyビジュアルSET


共用で用意されている、Jqeryベースのキービジュアルプラグイン2種類です。
「Skitter」・「Pogo」というスライダーを下記のとおり使用可能です。
最後尾に、「頭でっかちサイト」で使用する際の方法も紹介しています。
※前提としてJqueryの読み込みが必要です。

「CODE」ボタンをクリックすると参考コードを参照できます。


Jqueryの設置



Jquery CDN利用
JqueryはCDN利用してください。  Jqery CDN




iconファイルの設置



iconsディレクトリ・iconファイルの設置
ディレクトリ構造は変えず設置してください。(ディレクトリ名は「icons」)

タグ

root/
	├_common/					
	│ ├image/
	│ │ └keyV/
	│ │  └icons/			←keyVプラグインのicon画像
	





KeyビジュアルSET Skitter


キービジュアル 「Skitter」設置方法

PCサイトのみ使用可能です。(noneレスポンシブ)
Skitter設置サンプルページ



CSSファイル・JSファイルの設置
<head>内に、CSSファイル・JSファイルを読み込み
※Jqueryは、skitterのJSファイルの前に読み込み要

タグ

<<head>内>

<!-- kv用CSS for Skitter -->
<link rel="stylesheet" href="/_common/css/keyV/skitter.styles.min.css.gz" media="all">


<!-- Jquery2.1.4 CDN START -->
<!--[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/_common/js/jquery-1.11.3.min.js"><\/script>')</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/_common/js/jquery-2.1.4.min.js"><\/script>')</script>
<!--<![endif]-->
<!-- Jquery END -->

<!-- kv用Scripts for Skitter -->
<script src="/_common/js/keyV/jquery.easing-1.3+skitter.min.js.gz"></script>




Skitter設定記述
<head>内に、上記SkitterのJS読み込み後に、Skitter設定記述
使わない設定は、行ごとにどんどん消してください(false設定の項目など)。読み込みが軽くなります。


<<head>内>

※iconsフォルダを→/_common/image/keyV/icons/ となるように置いてください。
<script>
	//kv用 Init
	$(document).ready(function() {
		var sW,sH,origin_w,origin_h;
		sW = 1000;							//※PCサイトの表示幅 (幅px指定要)
		
		origin_w = 1000;					//※オリジナル画像幅(px指定要)なるべく表示サイズとぴったりになるようにしてください。
		origin_h = 450;						//※オリジナル画像高さ(px指定要)
		sH = origin_h*sW/origin_w;			//表示高さ自動計算

		$('.box_skitter').css({width: sW, height: sH}).skitter({
			//画像
			//show_randomly:true,			//画像表示順をランダムに(true/false)
			interval: 2500,					//1枚画像表示秒(秒数ミリ秒で指定 標準2500=2.5秒)
			//エフェクト
			animation: 'random',			//エフェクト一括指定(random/randomSmartも可)
			//with_animations: ['paralell', 'glassCube', 'swapBars'],//エフェクト一括指定(複数一括指定する場合)
			velocity: 1.0,					//エフェクト速度(0~2の範囲で指定可、標準は1.0)小さくするほど遅く
			//オプション
			stop_over: false,				//画像上マウスホバーでスライドショーを停止(true/false)
			hideTools: true,				//trueでマウスホバー時に矢印ボタンやNavigationを表示(true/false)
			fullscreen: false,				//描画領域をブラウザ全体にフルスクリーン表示
				//矢印ボタン
				navigation: false,			//矢印ボタンの表示(true/false)
				theme: '',					//矢印ボタンのテーマ(default/minimalist/round/clean/square)矢印ボタン非表示の際は空に
				//ページャー
				numbers: false,				//ページャーに数字を使用(falseでページャー自体を非表示)
				//dots: true,				//ページャーにドットを使用(true/false)
				//thumbs: true,				//ページャーにサムネイルを使用(true/false)
				//numbers_align: 'left',	//ページャーの位置(center/left/right)
				preview: false,				//ページャー上マウスホバーで画像のプレビューを表示(true/false ドットor数字のみ)
				//進捗バー
				progressbar: false,			//上部に進捗バーを表示(true/false)
				progressbar_css: { backgroundColor: '#fff' },//進捗バーの色
				//キャプション
				label: false,				//画像下のキャプション表示(true/false)
				//width_label: '300px',		//キャプション表示幅(デフォルトで画像幅)
				labelAnimation: 'slideUp',	//キャプションの表示のエフェクト(slideUp/left/right/fixed)
				//ボタン
				controls: false,			//play/pauseボタン(true/false)
				controls_position: "leftTop",//play/pauseボタン位置(center/leftTop/rightTop/leftBottom/rightBottom)
				focus: false,				//Focus slideshowボタン(true/false)
				focus_position: "center"	//Focus slideshowボタン位置(center/leftTop/rightTop/leftBottom/rightBottom)
		});
	});
</script>



HTML記述
<body>KeyVタグ


<div style="width:1000px;margin:0px auto;">
	<!-- KV用 スライドショー -->
	<div class="box_skitter">
		<ul>
			<!--SEO的にSPEEDUPのため、imgタグにはwidth、height設定をすることをおすすめします!-->
			<li><img src="/_common/image/keyV/kv_01.jpg" width="1000px" height="450px" /></li>
			<!-- エフェクト個別指定可能(imgタグにclass="エフェクト名"で付与) -->
			<li><img src="/_common/image/keyV/kv_02.jpg" width="1000px" height="450px" class="fade" /></li>
			<li><img src="/_common/image/keyV/kv_03.jpg" width="1000px" height="450px" /></li>
			<li><img src="/_common/image/keyV/kv_04.jpg" width="1000px" height="450px" /></li>
			<li><img src="/_common/image/keyV/kv_05.jpg" width="1000px" height="450px" /></li>
			<li><img src="/_common/image/keyV/kv_06.jpg" width="1000px" height="450px" /></li>
		</ul>
	</div>
	<!-- KV用 スライドショーEND -->
</div>






KeyビジュアルSET Pogo


キービジュアル 「Pogo」設置方法

PCサイト/SMサイト共に使用可能です。(レスポンシブ)
Pogo設置サンプルページ



CSSファイル・JSファイルの設置
<head>内にPogo CSSファイル、<body>終了直前(footer.html末尾)にPogo JSファイルを読み込み
※JqueryはAbove the Foldで使用しない場合、<body>終了直前(footer.html末尾)で、Pogo JSファイル前に読み込み

タグ

<<head>内>

<!-- kv用CSS for pogo -->
<link rel="stylesheet" href="/_common/css/keyV/pogo-slider.min.css.gz" media="all" />


タグ

<<body>終了直前 OR footer.html 末尾>

<!-- Jquery2.1.4 CDN START -->
<!--[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/_common/js/jquery-1.11.3.min.js"><\/script>')</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/_common/js/jquery-2.1.4.min.js"><\/script>')</script>
<!--<![endif]-->
<!-- Jquery END -->

<!-- KV用Scripts for Pogo-->
<script src="/_common/js/keyV/jquery.pogo-slider.min.js.gz"></script>



Pogo設定記述
<body>終了直前またはfooter.htmlに、上記Pogo JS読み込み後に、Pogo設定記述
使わない設定は、行ごとにどんどん消してください(false設定の項目など)。読み込みが軽くなります。


<footer.html 末尾>

<script>
	// kv用 Init 
	※iconsフォルダを→/_common/image/keyV/icons/ となるように置いてください。
	$(document).ready(function(){//スライド複数設置可

	$('#kv-slider').pogoSlider({
		preserveTargetSize: true,		//スマホ
		responsive: true,				//レスポンシブ
		targetWidth: 1000,				//画像幅
		targetHeight: 450,				//画像高さ
		autoplay: true,					//自動再生
		//画像
		autoplayTimeout: 1500,			//1画像表示時間
		//エフェクト
		slideTransition: 'expandReveal',//エフェクトテーマ一括指定(1つのみ・複数エフェクトNG/ data-transition各要素で指定も可)
		slideTransitionDuration: 2000,	//エフェクト時間(data-duration要素で指定も可)
		//キャプション文・画像
		elementTransitionStart: 50,		//キャプションスタート時間
		elementTransitionDuration: 1500,//キャプションのエフェクト時間(data-duration要素で指定も可)
		elementTransitionIn: 'slideUp',	//キャプションの始まりエフェクトテーマ一括指定(data-in要素で指定も可)
		elementTransitionOut: 'slideDown', //キャプションの終わりエフェクトテーマ一括指定(data-out要素で指定も可)
		//オプション
		displayProgess: true,			//進捗バー表示 切替エフェクト"fold"は進捗バー表示falseにすると切替エラー発生
		generateButtons: false,			//次へ前へボタン
		buttonPosition: 'CenterHorizontal',		//次へ前へボタン位置(TopLeft/TopRight/BottomLeft/BottomRight/CenterHorizontal/CenterVertical)
		generateNav: false,				//ドットページャー表示
		navPosition: 'Bottom',			//ページャー位置(Top/Bottom/Left/Right)
		pauseOnHover: false,			//マウスホバー時にスライド停止
		baseZindex: 1					//スライドのz-index指定(必要時のみ)
	}).data('plugin_pogoSlider');

</script>



HTML記述
<body>KeyVタグ


<div style="width:1000px;margin:0px auto;">
	<!-- KV用 スライドショー -->
	<div class="pogoSlider" id="kv-slider">
		<!-- 画像1 divタグ背景に画像 --style="background-image:url(hoge.jpg);" data-属性でエフェクト等個別指定可-->
		<div class="pogoSlider-slide" data-transition="fade" style="background-image:url(/_common/image/keyV/kv_01.jpg);">
			<!-- キャプション画像・テキスト1 --cssで<p>のマージン0に OR キャプションに合わせ調整・data属性でキャプションのエフェクト指定(data-in、data-out)-->
			<p class="pogoSlider-slide-element mgt40 left" data-in="contract" data-out="contract" >
				<!-- imgタグにwidth="" height="" alt=""をSEO的に指定おすすめ -->
				<img src="/_common/image/keyV/text01.png" width="1000px" height="450px" alt="安心と信頼の商品作り" />
			<!-- キャプション画像・テキスト1 END -->
			</p>
		<!-- 画像1 END -->
		</div>
		<div class="pogoSlider-slide" data-transition="fold" style="background-image:url(/_common/image/keyV/kv_02.jpg);"></div>
		<div class="pogoSlider-slide" data-transition="shrinkReveal" style="background-image:url(/kv_demo/_common/image/keyV/kv_03.jpg);"></div>
		<div class="pogoSlider-slide" data-transition="barRevealDown" style="background-image:url(/_common/image/keyV/kv_04.jpg);"></div>
		<div class="pogoSlider-slide" data-transition="verticalSplitReveal" style="background-image:url(/_common/image/keyV/kv_05.jpg);"></div>
		<div class="pogoSlider-slide" data-transition="verticalSlide" style="background-image:url(/_common/image/keyV/kv_06.jpg);"></div>
		<div class="pogoSlider-slide" data-transition="expandReveal" style="background-image:url(/_common/image/keyV/kv_01.jpg);"></div>
		<div class="pogoSlider-slide" data-transition="zipReveal" style="background-image:url(/_common/image/keyV/kv_02.jpg);"></div>
		<div class="pogoSlider-slide" data-transition="slideOverLeft" style="background-image:url(/_common/image/keyV/kv_03.jpg);"></div>
		<div class="pogoSlider-slide" data-transition="slideRevealLeft" style="background-image:url(/_common/image/keyV/kv_04.jpg);"></div>
		<div class="pogoSlider-slide" data-transition="slide" style="background-image:url(/_common/image/keyV/kv_05.jpg);"></div>
	</div>
	<!-- KV用 スライドショーEND -->
</div>









Skitter&Pogo 「頭でっかちデザイン」設置方法


「頭でっかちデザイン」設置方法

Skitter設置サンプルページ
Pogo設置サンプルページ

「頭でっかちデザイン」設置考慮点
KV画像が常に中央表示される(PC)
ウインドウ縮小時、「頭でっかちKV」を左右削り=コンテンツ幅で表示(PC/SM)

ページの先頭へ


次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会