ポラロイド風画像の作成

Photoshop

ポラロイド写真

  1. 新規作成
    (カンバスサイズ: 800×600)

  2. カンバスを薄い色で塗りつぶす
    (後で、透明またはコルクの背景に変える)

  3. 新規レイヤーを作成→選択範囲
    (固定:300×300)

  4. 選択範囲を白で塗りつぶし、境界線の作成（サイズ 1px）

  5. シェイプツールで250×200の長方形を作成し、境界線を付ける。

  6. 選択ツールに持ち替えて、変形ツールで整列


  7. 載せたい写真画像を貼付けしてクリッピングマスク作成(レイヤーの境界線をaltクリック)

  8. 写真画像の内側に境界線を付ける。
    ※必ず、描画モード（標準）/ 距離0/ 角度90にする。


完成図

影をつける
  1. 写真の周りの白い部分を複製し、描画色を黒に塗りつぶす。

  2. フィルター → ぼかし → ガウス（半径5.5）

  3. 自由変形ツールで斜めにする。


  4. 長兄選択ツールで要らない箇所を選択しdeleteキーで消す。
完成

無料コラージュ作成サイト・ソフトまとめ

Web素材

コラージュ：たくさんの写真を組み合わせて作る画像のこと。


無料オンラインコラージュ作成サイト

Pixlr Express

URL link : Pixlr Express

  • 色々なエフェクトが簡単につけられる。

Pixlr Editor

URL link : Pixlr Editor

Photo Collage

URL link : Photo Collage

  • 要登録(無料)。

Fotor

URL link : Fotor

  • 写真の編集がワンタッチでできる。

bxslider

jQuery

jQueryスライドショー「bxslider」

  • bxSliderを使用したサイト

http://www.retaw-tokyo.com/



bxsliderを設置

  1. 公式サイトよりダウンロード → 解凍
  2. 基本的に必要なファイルの確認
    「jquery.bxslider.css」と「jquery.bxslider.min.js」と「images」があれば良い。
  3. htmlファイルの設置
「html」コードの設置


head内

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />


body内

<ul class="bxslider">
  <li><img src="images/r1.png" alt=""></li>
  <li><img src="images/r2.png" alt=""></li>
  <li><img src="images/r3.png" alt=""></li>
  <li><img src="images/r4.png" alt=""></li>
</ul>


html記述最下部 (※必ずhtmlが読み込まれてからscriptファイルが読み込まれるようにする。)

<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>


自動再生したい場合は

<script>
$(document).ready(function(){
         $('.bxslider').bxSlider({
          auto: true,
          autoControls: true
        });
    });
</script>

GoogleImgSearch

jQuery

Google画像検索っぽいスライドにするjQuery

※(レスポンシブ対応)

完成図


「html」コード
    • 全体構成上、リスト要素を「inline-block」や「inline」で制御。
      そのため<li>ごとの改行にはコメントアウトをして改行を削除しておく。
    • 画像サイズは自動的にサムネイルのサイズを生成してくれるため、１種類の大きさものを用意する。
      (今回は640×400px)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Google画像検索風スライダー</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link href="css/GoogleImgSearch.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/GoogleImgSearch.js"></script>
</head>

<body>
<div id="container">
<h1>jQuery GoogleImgSearch UI</h1>
<ul class="listCover">
	<li class="listItem">
		<img src="img/01.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/01.jpg" alt=""></div>
				<div class="secRight"><p>エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--/.listItem
  --><li class="listItem">
		<img src="img/02.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/02.jpg" alt=""></div>
				<div class="secRight"><p>エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li>
</ul><!--/.listCover-->
</div>
</body>
</html>
「css」コード
    • 詳細エリアの高さはスクリプト側で設定する。
      CSSで「height」の値は設定しない。
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
/*	outline: 0;*/
}

html {
	font-size: 75%;
	-webkit-text-size-adjust: none;
}

img {
	vertical-align: text-bottom;
	-ms-interpolation-mode: bicubic;
}

a {
	-webkit-tap-highlight-color: transparent;
}

strong {
	font-weight: bold;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td {
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

a:focus {
/*\*/
	overflow: hidden;
/**/
}

option {
	padding-right: 10px;
}

/* ------------------------------
	HTML5 ELEMENTS
------------------------------ */
header,article,aside,section,footer,
nav,menu,details,hgroup,summary {
	display: block;
}


body {
	overflow-y: scroll;
}
*html body {overflow-y: auto;} /* IE6 */
*:first-child+html body {overflow-y: auto;} /* IE7 */

h1 {
	margin-bottom: 20px;
	padding: 10px 0;
	background: #000;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

/* .listCover
------------------------- */
.listCover {
	margin: 0 auto;
	text-align: left;
}

/* .listItem
------------------------- */
.listCover .listItem {
	padding: 10px 0;
	text-align: center;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	cursor: pointer;
}
.listCover .listItem img {
	width: 120px;
}
.listCover .active {
	background: url(../img/activeArrow.gif)  no-repeat bottom center;
}
.listCover .listItem .selfRep {
	display: none;
}

/* .expandField
------------------------- */
.expandField {
	padding: 0;
	width: 100%;
	text-align: left;
	display: block;
	background: #222;
	float: left;
	position: relative;
	overflow: hidden;
}
.expandField .btnClose {
	top: 10px;
	right: 0;
	width: 60px;
	height: 60px;
	display: block;
	background: url(../img/close.png) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .btnPrev {
	top: 120px;
	left: 0;
	width: 60px;
	height: 60px;
	display: block;
	background: url(../img/prev.png) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .btnNext {
	top: 120px;
	right: 0;
	width: 60px;
	height: 60px;
	display: block;
	background: url(../img/next.png) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .selfRepInner {
	padding: 20px 50px;
	text-align: center;
	position: relative;
}
.expandField .selfRepInner .secLeft,
.expandField .selfRepInner .secRight {
	width: 50%;
	float: left;
}
.expandField .selfRepInner .secLeft {
	text-align: center;
}
.expandField .selfRepInner .secRight {
	text-align: left;
	width: 40%;
	color: #fff;
}

/* ===========================================
	SizeAdjustment
=========================================== */
@media screen and (max-width: 600px) {
	.expandField .selfRepInner .secLeft img {
		width: 80%;
	}
}
@media screen and (max-width: 480px) {
	.expandField .selfRepInner .secLeft {
		display: none;
	}
	.expandField .selfRepInner .secRight {
		width: 100%;
		float: none;
	}
}

/* =======================================
	ClearFix
======================================= */
.listCover:before,
.listCover:after,
.expandField .selfRepInner:before,
.expandField .selfRepInner:after {
	content: " ";
	display: table;
}
.listCover:after,
.expandField .selfRepInner:after {clear: both;}
.listCover,
.expandField .selfRepInner {*zoom: 1;}
「jQuery」コード
    • サムネイルの画像サイズ変更
      スクリプトの「listBaseWidth = 130,」(一覧画面の＜li＞の幅)と
      cssの「.listCover .listItem img {width: 120px;}(imgサイズ)」を行う。
// JavaScript Document

$(function(){
	var setList = $('.listCover'),  //全体を囲う＜ul＞のクラス名
	setItem = $('.listItem'),  //＜li＞に対するクラス名
	setReplace = $('.selfRep'),  //詳細エリアで表示する要素のクラス名
	listBaseWidth = 130,  //一覧画面の＜li＞の幅
	thumbOpacity = 0.8,  //サムネイルマウスオーバー時の透過度
	expandHeight = 340,  //詳細エリアの高さ
	expandFadeTime = 300,  //詳細エリア展開時のスライドスピード
	expandEasing = 'linear',  //詳細エリア展開時のイージング
	switchFadeTime = 1000,  //詳細エリア展開後のNEXT／BACK切り替え時のフェードスピード
	switchEasing = 'linear';  //詳細エリア展開後のNEXT／BACK切り替え時のイージング

	setList.each(function(){
		var targetObj = $(this);

		var findItem = targetObj.find(setItem),
		findElm = targetObj.find(setReplace);

		// リストアイテムクリック
		findItem.click(function(){
			if($(this).hasClass('active')){
				closeExpandActive = targetObj.find('.expandField');
				closeExpandActive.stop().animate({height:'0',opacity:'0'},expandFadeTime,expandEasing,function(){
					closeExpandActive.remove();
				});
				findItem.removeClass('active');
			} else {
				var setExpand = $('.expandField'),
				findExpand = targetObj.find(setExpand),
				thisElm = $(this).find(setReplace).html();

				// 展開ボックス制御
				if(0 < findExpand.size()){
					findExpand.empty().html(thisElm);
					$(this).after(findExpand).next().append('<span class="btnPrev"></span><span class="btnNext"></span><span class="btnClose"></span>');
					var setReplaceInner = $('.selfRepInner'),
					findInner = targetObj.find(setReplaceInner);
					findInner.css({opacity:'0'}).stop().animate({opacity:'1'},switchFadeTime,switchEasing);
				} else {
					$(this).after('<li class="expandField">' + thisElm + '</li>').next().css({height:'0', opacity:'0'}).stop().animate({height:expandHeight, opacity:'1'},expandFadeTime,expandEasing).append('<span class="btnPrev"></span><span class="btnNext"></span><span class="btnClose"></span>');
				}

				// スクロール位置調整
				var thisOffset = $(this).find('img').offset();
				$('html,body').animate({scrollTop:(thisOffset.top-10)},200,'linear');

				// 操作ボタン動作
				function switchNext(){
					var setActiveN = targetObj.find('.active');
					setActiveN.each(function(){
						var listLenghN = findItem.length,
						listIndexN = findItem.index(this),
						listCountN = listIndexN+1,
						findItemFirst = findItem.first();

						if(listLenghN == listCountN){
							findItemFirst.click();
						} else {
							$(this).next().next().click();
						}
					});
				}
				function switchPrev(){
					var setActiveP = targetObj.find('.active');
					setActiveP.each(function(){
						var listLenghP = findItem.length,
						listIndexP = findItem.index(this),
						listCountP = listIndexP+1,
						findItemLast = findItem.last();

						if(1 == listCountP){
							findItemLast.click();
						} else {
							$(this).prev().click();
						}
					});
				}
				function switchHide(){
					closeExpand = targetObj.find('.expandField');
					closeExpand.stop().animate({height:'0',opacity:'0'},expandFadeTime,expandEasing,function(){
						closeExpand.remove();
					});
					findItem.removeClass('active');
				}

				$(this).addClass('active').siblings().removeClass('active');

				var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnClose = targetObj.find('.btnClose');
				btnPrev.click(function(){switchPrev();});
				btnNext.click(function(){switchNext();});
				btnClose.click(function(){switchHide();});

			}
		});

		// サムネイルロールオーバー
		var agent = navigator.userAgent;
		if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
			findItem.hover(function(){
				$(this).stop().animate({opacity:thumbOpacity},200);
			},function(){
				$(this).stop().animate({opacity:'1'},200);
			});
		}

		// リキッド操作
		function listAdjust(){
			var ulWrap = targetObj.width(),
			ulNum = Math.floor(ulWrap / listBaseWidth),
			liFixed = Math.floor(ulWrap / ulNum);
			findItem.css({width: (liFixed)});
		}
		$(window).resize(function(){listAdjust();}).resize();
		$(window).load(function(){setTimeout(function(){listAdjust();},200);}); // for IE8
	});
});

Fancy box

jQuery

Fancy boxの設置

  1. 公式サイトよりダウンロード→解凍
  2. 「source」フォルダを「fancybox」にリネーム
  3. サムネイル用とクリックしたときに出る画像を2種類用意。
    (サムネイル : 200×133 メイン画像 : 640×400)
  4. htmlの設置

htmlの設置

  • head内に記述
<link rel="stylesheet" href="css/style.css" media="all">
<link rel="stylesheet" href="css/jquery.fancybox.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
  • body内に記述
<ul id="itemContainer">
<li><a class="fancybox" href="img/main-image1.jpg" data-fancybox-group="gallery"><img src="img/1.jpg" style="width:154px" alt="" /></a></li>
<li><a class="fancybox" href="img/main-image2.jpg" data-fancybox-group="gallery"><img src="img/2.jpg" alt="" /></a></li>
</ul>

<script>
$(document).ready(function() {
	$(".fancybox").fancybox({
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});
  • メイン画像サイズの変更
$(document).ready(function() {
	$('.fancybox-media').fancybox({
		maxWidth	: 640,//クリックした後に出てくる画像の大きさ指定
		maxHeight	: 337,
		openEffect  : 'none',
		closeEffect : 'none',
		helpers : {
			media : {}
		}
	});
});
</script>