2013/10/22
jQueryプラグイン「Flippy」にオートプレイ(自動再生)対応に
2013/10/22
jQueryプラグイン「Flippy」にオートプレイ(自動再生)対応に

jQueryプラグイン「Flippy」にオートプレイ(自動再生)対応に

jQueryのプラグイン「Flippy」

このブログでサンプルのダウンロードが一番多いのが「Flippy」
結構な人気なんですね。

今回は知人からの依頼で「これをオートプレイにできないか」というものがあったので無理やり作ってみました。

>今回作ったサンプル
>Flippy サンプルダウンロード

Flippy_sample

今回変更したのはflippy.jsだけです。
ほかは以前のjQuery プラグイン サンプル 「Flippy」を参照ください。

・flippy.js

$(function(){
	var countFlippy = 0;
	
	$("#flippyBox").append('<div class="flippyContentBox"><img src="images/main_image_001.jpg" width="500" height="300" alt=""><div class="textBox">How to site : <a href="http://yasutake-blog.white-zip.com">http://yasutake-blog.white-zip.com/</a></div></div>');
	
	setInterval(function(){
		if ( countFlippy <= 3){
			++countFlippy
			functionCountFlippyTimeline()
		}else if(countFlippy >= 4){
			countFlippy = 0
			functionCountFlippyTimeline()
		}
	},3000);
	
	
	function functionCountFlippyTimeline() {
		
		if(countFlippy == 0){
			$("#flippyBox").flippy({
				content:$("#flippyContent001"),
				direction:"LEFT",
				duration:"750",
				autoplay:true
			});
		}else if(countFlippy == 1){
			$("#flippyBox").flippy({
				content:$("#flippyContent002"),
				direction:"LEFT",
				duration:"750",
				autoplay:true
			});
		}else if(countFlippy == 2){
			$("#flippyBox").flippy({
				content:$("#flippyContent003"),
				direction:"LEFT",
				duration:"750",
				autoplay:true
			});
		}else if(countFlippy == 3){
			$("#flippyBox").flippy({
				content:$("#flippyContent004"),
				direction:"LEFT",
				duration:"750",
				autoplay:true
			});
		}
		
		
		
		
		
	}
	
	
	$("#flippyGo001").click(function(e){
		e.preventDefault();
		$("#flippyBox").flippy({
			content:$("#flippyContent001"),
			direction:"LEFT",
			duration:"750",
			autoplay:true
		});
		countFlippy = 0;
	});
	
	$("#flippyGo002").bind("click",function(e){
		e.preventDefault();
		$("#flippyBox").flippy({
			content:$("#flippyContent002"),
			direction:"LEFT",
			duration:"750",
		});
		countFlippy = 1;
	
	});
	
	$("#flippyGo003").bind("click",function(e){
		e.preventDefault();
		$("#flippyBox").flippy({
			content:$("#flippyContent003"),
			direction:"LEFT",
			duration:"750",
		});
		countFlippy = 2;
	
	});

	$("#flippyGo004").bind("click",function(e){
		e.preventDefault();
		$("#flippyBox").flippy({
			content:$("#flippyContent004"),
			direction:"LEFT",
			duration:"750",
		});
		countFlippy = 3;
	
	});

});

画像の枚数を変える時は下の(画像の枚数-1)(画像の枚数)を変更するのと、

	setInterval(function(){
		if ( countFlippy <= 3(画像の枚数-1)){
			++countFlippy
			functionCountFlippyTimeline()
		}else if(countFlippy >= 4(画像の枚数)){
			countFlippy = 0
			functionCountFlippyTimeline()
		}
	},3000);

この下の部分をコピペで追加して(何番目-1)の部分を書き換え、

		}else if(countFlippy == 3(何番目-1)){
			$("#flippyBox").flippy({
				content:$("#flippyContent004"),
				direction:"LEFT",
				duration:"750",
				autoplay:true
			});


この下の部分をコピペで追加して$(“#flippyContent001″)と(何枚目-1)を変更。

	$("#flippyGo001").click(function(e){
		e.preventDefault();
		$("#flippyBox").flippy({
			content:$("#flippyContent001"),
			direction:"LEFT",
			duration:"750",
			autoplay:true
		});
		countFlippy = 0(何枚目-1);
	});

画像の切り替え速度を変更するときは、下の(画像の切り替え速度(ミリ秒))の部分を変更してください。

	setInterval(function(){
		if ( countFlippy <= 3){
			++countFlippy
			functionCountFlippyTimeline()
		}else if(countFlippy >= 4){
			countFlippy = 0
			functionCountFlippyTimeline()
		}
	},3000(画像の切り替え速度(ミリ秒)));

これでボタンクリックもオートプレイも機能するようになります。

Date:2013/10/22
Category:jQuery, WEB全般, White Zip, フリーダウンロード, プラグイン
Tags:
Archive:http://yasutake-blog.white-zip.com/cat_web/jquery%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%8cflippy%e3%80%8d%e3%81%ab%e3%82%aa%e3%83%bc%e3%83%88%e3%83%97%e3%83%ac%e3%82%a4%e5%af%be%e5%bf%9c%e3%81%ab/1440/

Comments:(0)

jq-tiles-thum
2013/05/02
jQuery プラグイン サンプル 「jq-tiles」
jq-tiles-thum
2013/05/02
jQuery プラグイン サンプル 「jq-tiles」

jQuery プラグイン サンプル 「jq-tiles」

先日ご紹介したjQueryプラグイン「jq-tiles」。
これもMITライセンスなのでサンプルを作りました。
今回もプラグインの部分だけピンポイントで作りましたので、jQueryに慣れていない方も使っていただけるのではないでしょうか。

jq-tiles site・demo

関連記事:jQuery イメージをタイル状に切り替えるギャラリープラグイン 「jq-tiles」

>今回作ったサンプル
>jq-tiles サンプルダウンロード
jq-tiles

今回も必要なものだけに絞ってすぐに使えるようにしました。
必要なファイルは「jquery.tiles.js」「jquery.tiles.min.css」だけです。
今回のサンプルは<head>内に<script>を入れてますので、それも必要です。

・index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jq-tiles</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/jquery.tiles.min.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.tiles.js"></script>
<script type='text/javascript'>
$(function(){
	$('.slider').tilesSlider({ 
		random: true ,// タイルの動く順番がランダムに
		effect: 'default',// 動きのエフェクト
		x: 6,// 横軸のタイルの数
		y: 6,// 縦軸のタイルの数
		fade: true,// エフェクトをフェードさせる
		loop: true,// ループさせる
		auto: true,// オートプレイ
		slideSpeed: 3000,// 画像と画像のスライド間隔(ミリ秒)
		tileSpeed: 1000,// タイルのエフェクトの時間(ミリ秒)
	})
});
</script>
</head>

<body>
<div class="slider-wrap">
  <div class="slider">
    <p><strong>How to site:</strong> <a href="http://yasutake-blog.white-zip.com">http://yasutake-blog.white-zip.com/</a></p>
    <img src="images/main_image_001.jpg" width="640" height="480">
    <p><strong>Sausage:</strong> ground round sirloin ball tip beef ribs.</p>
    <img src="images/main_image_002.jpg" width="640" height="480">
    <p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p>
    <img src="images/main_image_003.jpg" width="640" height="480">
    <p>God job ?</p>
    <img src="images/main_image_004.jpg" width="640" height="480">
  </div>
</div>
</body>
</html>


<head>内と.slider-wrap内を作成するサイトにコピペするか、このまま修正して使ってください。
<head>内の<script>内各項目を変更することで様々なエフェクトが使えます。
オプションの詳細はプラグインページをご覧ください。

・style.css

@charset "utf-8";
@import url("reset-html5.css");  
body {
	height: 100%;
	width: 100%;
	background-color: #E9DBC9;
}
a {
	color: #FF6000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.slider-wrap {
	background: white;
	padding: 10px;
	height: 480px;
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
	width: 640px;
	margin-top: -240px;
	top: 50%;
	position: absolute;
	left: 50%;
	margin-left: -320px;
}

.slider-wrap .slider {
	width: 640px;
	height: 480px;
}



reset.cssとbody、.slider-wrap、.sliderの位置やサイズが入ってます。
サイトに合わせて変更、または入れ替えてください。

・jquery.tiles.min.css

圧縮タイプですので、css変更の時はDreamweaverなどのソフトを使うか、ブラウザの「要素を調査」や「要素を検証」などで要素を調べてファイル内検索からcssを変更してください。

・jquery.tiles.js

プラグイン本体です。そのままお使いください。

今回の「jq-tiles」はシンプルに仕上げれたと思います。前回作ったjQueryプラグイン「Flippy」のサンプルは、ちょっと特殊な部分があったのもあってファイル数や内容が多くなってしまいましたので。(「Flippy」はcssやjsなどを整理した方が使い易いと勝手に判断した結果です。もし使いにくいようでしたら本家サイトのサンプルを参考にされてください)

この「jq-tiles」は個人的に好きなプラグインです。
このサンプルを使っていただけたらうれしいです。

Date:2013/05/02
Category:jQuery, WEB全般, White Zip, フリーダウンロード, プラグイン
Tags:, , , , ,
Archive:http://yasutake-blog.white-zip.com/cat_web/jquery-%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%80%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%80%80%e3%80%8cjq-tiles%e3%80%8d/1184/

Comments:(0)

Flank_Brown_thum
2013/04/30
White ZipのWordPress用テーマ 「Flank Brown」
Flank_Brown_thum
2013/04/30
White ZipのWordPress用テーマ 「Flank Brown」

White ZipのWordPress用テーマ 「Flank Brown」

White ZipのWordPressテーマ第2弾!!
とは言っても「Flank Black」のマイナーチェンジ。
「Flank Brown」です。
エフェクトなんかは「Flank Black」と一緒ですが、テクスチャなどで雰囲気変えてます。

こちらも利用規約を読んで使ってください。
WordPressテーマの利用規約

Flank Brown

>PC用&スマートフォン用テーマセットを無料ダウンロード
>PC用テーマを無料ダウンロード

Flank_Brown_pc_sp

Flank_Brown

Flank_Brown_sp

PC用 PC用・スマートフォン用セット
テーマ名 Flank Brown
最新バージョン 1.0.1
価格 0円
ダウンロード ダウンロード ダウンロード
対応ブラウザ IE9以降
IE8,IE7 × *
Chrome
Firefox
Safari
Opera
スマートフォン・タブレット iPhone × *
Android × *
iPad × *
iPod touch × *

*はスマートフォン用テーマで表示。
※RSS・Atomに対応しました。
※スマートフォン用テーマのバグを修正しました。

特徴

オープニングアニメーション、カテゴリーと記事の横スライドメニュー、記事選択時のスライドエフェクトで魅力的なブログを演出してくれます。
LightBox(ポップアップ表示)、SNS(Facebook、twetter、Google+、Line)とEvernoteのシェアボタンを標準で装備。余分なプラグインいらずの高機能テーマです。
「プラグインとかスマホサイトとかいっちょんわからん!」という方用に「PC用&スマートフォン用テーマセット」を準備しました。
「PC用&スマートフォン用テーマセット」は、テーマをインストールするだけでPC用もスマートフォン用も両方適用されますので楽チンですよ。
「スマートフォン用は別に選びたい」方は「PC用テーマ」をどうぞ。
Flank Black とは雰囲気変わってアンティーク感・ヴィンテージ感を強くしました。
“歴史ある温もり”なイメージです。いかがでしょうか。

使い方

WordPressについては
WordPressのインストール(準備)
WordPressのインストール(インストール)
WordPressでテーマを変更しよう
をご覧ください。

こちらもWordPressの設定やサムネイル画像のサイズ、使用上の注意など、気を付けていただきたい部分が少々。

1.サムネイル画像のサイズ設定

管理画面の左メニュー「設定」>「メディア」にて、「サムネイルのサイズ」を「幅300」「高さ600」に、「アップロードしたファイルを年月ベースのフォルダに整理」のチェックをはずして「変更を保存」をクリックしてください。

2.カテゴリー用のサムネイル画像の設定方法

上部に表示されるカテゴリー用のサムネイルの設定方法です。
管理画面の左メニュー「メディア」>「新規追加」より、作成したカテゴリーのスラッグと同じファイル名で、150px * 150px 以上の正方形のJPG画像をアップロードします。
「”スラッグ名”.jpg」です。
例) gourmet.jpg

3.マルチサイトは非対応

カテゴリー用の画像のアップロード場所を限定していますので、マルチサイトではトップサイトのみしか画像が表示されません。
また、1で設定したように、「アップロードしたファイルを年月ベースのフォルダに整理」にチェックを入れてしまうと同じ理由で画像が表示されなくなりますので、必ずチェックは外してお使いください。

4.禁止事項

WordPressテーマの利用規約に加えて、課金サイト、有料コンテンツサイト、会員サイトなどのログインが必要なページを含むサイトにはご利用いただけません。

こういう古臭い温かさって大好きで、共感していただける方いらっしゃれば是非「Flank Brown」使ってください。
こちらも不具合などありましたらコメントください。

>PC用&スマートフォン用テーマセットを無料ダウンロード
>PC用テーマを無料ダウンロード

Date:2013/04/30
Category:2013年の作品, WEB全般, White Zip, WordPress, テンプレート・テーマ, フリーダウンロード
Tags:, , , , , , , , , , , , , , ,
Archive:http://yasutake-blog.white-zip.com/cat_2013/white-zip%e3%81%aewordpress%e7%94%a8%e3%83%86%e3%83%bc%e3%83%9e%e3%80%80%e3%80%8cflank-brown%e3%80%8d/1212/

Comments:(0)

Flippy_sample_thum
2013/04/30
jQuery プラグイン サンプル 「Flippy」
Flippy_sample_thum
2013/04/30
jQuery プラグイン サンプル 「Flippy」

jQuery プラグイン サンプル 「Flippy」

God job ? (みなさん、神掛かった仕事してますか?私はできていません。の意味)

先日紹介したjQueryプラグイン「flippy」。
MITライセンスということもあって、不純物を極力取り除いたサンプルページを作りました。

10/22
自動再生するように改良しました。

改良版は”jQuery プラグイン サンプル 「Flippy」”よりダウンロードできます。

Flippy site・demo
関連記事:jQuery くるりとボックスが切り替わるプラグイン Flippy

>今回作ったサンプル
>Flippy サンプルダウンロード
Flippy_sample

必要なものだけに絞ってすぐに使えるようにしました。
必要なファイルは「jquery.flippy.min.js」「flippy.js」「flippy.css」「flippy-content.css」

・index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Flippy</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/flippy.css" rel="stylesheet" type="text/css">
<link href="css/flippy-content.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.flippy.min.js"></script>
<script type="text/javascript" src="js/flippy.js"></script>
</head>

<body>
<div id="flippy">
  <div id="flippyBox"></div>
  <div id="flippyButtons">
    <a id="flippyGo001" class="flippyButton" href="#">1</a>
    <a id="flippyGo002" class="flippyButton" href="#">2</a>
    <a id="flippyGo003" class="flippyButton" href="#">3</a>
    <a id="flippyGo004" class="flippyButton" href="#">4</a>
  </div>
  <div id="flippyContents">
    <div id="flippyContent001" class="flippyContent">
      <div class="flippyContentBox">
        <img src="images/main_image_001.jpg" width="500" height="300" alt="">
        <div class="textBox">How to site : <a href="http://yasutake-blog.white-zip.com">http://yasutake-blog.white-zip.com/</a></div>
      </div>
    </div>
    <div id="flippyContent002" class="flippyContent">
      <div class="flippyContentBox">
        <img src="images/main_image_002.jpg" width="500" height="300" alt="">
        <div class="textBox">Include jQuery and HTML elements</div>
      </div>
    </div>
    <div id="flippyContent003" class="flippyContent">
      <div class="flippyContentBox">
        <img src="images/main_image_003.jpg" width="500" height="300" alt="">
        <div class="textBox">Great flip effect for your site !</div>
      </div>
    </div>
    <div id="flippyContent004" class="flippyContent">
      <div class="flippyContentBox">
        <img src="images/main_image_004.jpg" width="500" height="300" alt="">
        <div class="textBox">God job ?</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

<head>内と#flippy内を作成するサイトにコピペするか、このまま修正して使ってください。

・style.css

@charset "utf-8";
@import url("reset-html5.css");  
body {
	height: 100%;
	width: 100%;
	background-color: #E9DBC9;
}
#flippy {
	left: 50%;
	top: 50%;
	width: 500px;
	margin-top: -170px;
	margin-left: -250px;
}


reset.cssとbody、#flippyの位置とwidthだけが入ってます。
サイトに合わせて変更、または入れ替えてください。

・flippy.css

#flippy{
	position: absolute;
}

#flippyBox{
	color: #333;
	font-family: MuseoSans-500;
	font-size: 20px;
	min-width: 500px;
	width: 500px;
	min-height: 300px;
	height: 300px;
	margin: 0;
	position: relative;
}

#flippyBox .top{
	padding:5px;
}

#flippyButtons{
	text-align: center;
	line-height: 20px;
	margin-top: 20px;
}

#flippyContents{
	display: none;
}

.flippyButton{
	background: #333;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333)) #333;
	background: -moz-linear-gradient(0 100% 90deg, #333, #666) #333;
	
	color: #b6d635;
	padding: 5px 10px;
	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	margin: 0 5px;
}


.flippyButton:hover{
	text-decoration:none;
	background: #333;
}

#Flippyの概観に関してのCSSです。
サイトに合わせて#Flippyのpositionや#flippyBoxのサイズを調整してください。

・flippy-content.css

.flippyContentBox {
	position: absolute;
	height: 300px;
	width: 500px;
	left: 0px;
	top: 0px;
	overflow: hidden;
}
.flippyContentBox .textBox {
	padding: 20px;
	width: 460px;
	position: absolute;
	left: 0px;
	bottom: 0px;
	color: #FFF;
	background-color: #000;
	opacity:0.7;
}
.flippyContentBox .textBox a {
	color: #FBEDD5;
	text-decoration: none;
}
.flippyContentBox .textBox a:hover {
	text-decoration: underline;
}

#flippyContents内のCSSです。
#flippyBoxのサイズに合わせて.flippyContentBoxのサイズを調整してください。

・jquery.flippy.min.js

プラグイン本体なので、そのまま使用してください。

・flippy.js

$(function(){
	
	$("#flippyBox").append('<div class="flippyContentBox"><img src="images/main_image_001.jpg" width="500" height="300" alt=""><div class="textBox">How to site : <a href="http://yasutake-blog.white-zip.com">http://yasutake-blog.white-zip.com/</a></div></div>');

	$("#flippyGo001").click(function(e){
		e.preventDefault();
	
		$("#flippyBox").flippy({
			content:$("#flippyContent001"),
			direction:"LEFT",
			duration:"750"
		});
	});
	
	$("#flippyGo002").bind("click",function(e){
		e.preventDefault();
	
		$("#flippyBox").flippy({
			content:$("#flippyContent002"),
			direction:"LEFT",
			duration:"750",
		});
	
	});
	
	$("#flippyGo003").bind("click",function(e){
		e.preventDefault();
	
		$("#flippyBox").flippy({
			content:$("#flippyContent003"),
			direction:"LEFT",
			duration:"750",
		});
	
	});

	$("#flippyGo004").bind("click",function(e){
		e.preventDefault();
	
		$("#flippyBox").flippy({
			content:$("#flippyContent004"),
			direction:"LEFT",
			duration:"750",
		});
	
	});

});

はじめの$(“#flippyBox”).append(‘ … ‘)は、最初の画面です。
今回は#flippyGo001をそのままコピペしていますが、好きなようにHTMLを配置できます。
また、この$(“#flippyBox”).append(‘ … ‘)の一行を削除して、index.html内の<div id=”flippyBox”></div>に入れても同じようにできます。
それ以降は、各#flippyContents内に関する項目です。

$("ボタンのID").bind("click",function(e){
		e.preventDefault();
	
		$("#flippyBox").flippy({
			content:$("表示させる要素のID"),
			direction:"エフェクトの種類(LEFT/RIGHT/TOP/BOTTOM)",
			duration:"エフェクトの時間(ミリ秒)",
		});
	
	});

他にもオプションがあるので、プラグインページをご覧ください。

私がjQueryのプラグインを触りはじめた時、サンプルページのどこが必要でどこが不必要なのかさっぱり分からず苦労した記憶があります。

コードが解ればなんてことないのですが、昔の私のようにhtmlとcssがちょっとできる程度で手を出してしまう方も多いかと思います。
実際、jQueryは知識がなくても簡単にできるところがいいところなんで、更に使いやすいように紹介できればと思って、シンプルなサンプルを作ってみました。
今後もライセンスが許されるものはサンプル配布できればと思っています。

Date:2013/04/30
Category:jQuery, WEB全般, White Zip, フリーダウンロード, プラグイン
Tags:, , , , ,
Archive:http://yasutake-blog.white-zip.com/cat_web/jquery-%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%80%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%80%80%e3%80%8cflippy%e3%80%8d/1090/

Comments:(0)

0426
2013/04/26
White ZipのWordPress用テーマ 「Flank Black」
0426
2013/04/26
White ZipのWordPress用テーマ 「Flank Black」

White ZipのWordPress用テーマ 「Flank Black」

White ZipのWordPressテーマ配布を開始します!
せっかく配布するので、「無料でクオリティの高いものを世に送ろう!」と意気込んで作りました!
配布用となるとやはり気を使いますね。
あらゆる事態を想定しないといけないわけですからね。
ちゃんと利用規約も作りましたので、読んで使ってください。
WordPressテーマの利用規約

Flank Black

>PC用&スマートフォン用テーマセットを無料ダウンロード
>PC用テーマを無料ダウンロード
flank_bk_image

001

flank_bk_image_sp

  PC用 PC用・スマートフォン用セット
テーマ名 Flank Black
最新バージョン 1.0.1
価格 0円
ダウンロード ダウンロード ダウンロード
対応ブラウザ IE9以降
IE8,IE7 × *
Chrome
Firefox
Safari
Opera
スマートフォン・タブレット iPhone × *
Android × *
iPad × *
iPod touch × *

*はスマートフォン用テーマで表示。
※RSS・Atomに対応しました。
※スマートフォン用テーマのバグを修正しました。

特徴

オープニングアニメーション、カテゴリーと記事の横スライドメニュー、記事選択時のスライドエフェクトで魅力的なブログを演出してくれます。
LightBox(ポップアップ表示)、SNS(Facebook、twetter、Google+、Line)とEvernoteのシェアボタンを標準で装備。余分なプラグインいらずの高機能テーマです。
「プラグインとかスマホサイトとかいっちょんわからん!」という方用に「PC用&スマートフォン用テーマセット」を準備しました。
「PC用&スマートフォン用テーマセット」は、テーマをインストールするだけでPC用もスマートフォン用も両方適用されますので楽チンですよ。
「スマートフォン用は別に選びたい」方は「PC用テーマ」をどうぞ。

使い方

WordPressについては
WordPressのインストール(準備)
WordPressのインストール(インストール)
WordPressでテーマを変更しよう
をご覧ください。

インストールしてしまえば何てことないのですが、WordPressの設定やサムネイル画像のサイズ、使用上の注意など、気を付けていただきたい部分が少々。

1.サムネイル画像のサイズ設定

管理画面の左メニュー「設定」>「メディア」にて、「サムネイルのサイズ」を「幅300」「高さ600」に、「アップロードしたファイルを年月ベースのフォルダに整理」のチェックをはずして「変更を保存」をクリックしてください。

2.カテゴリー用のサムネイル画像の設定方法

上部に表示されるカテゴリー用のサムネイルの設定方法です。
管理画面の左メニュー「メディア」>「新規追加」より、作成したカテゴリーのスラッグと同じファイル名で、150px * 150px 以上の正方形のJPG画像をアップロードします。
「”スラッグ名”.jpg」です。
例) gourmet.jpg

3.マルチサイトは非対応

カテゴリー用の画像のアップロード場所を限定していますので、マルチサイトではトップサイトのみしか画像が表示されません。
また、1で設定したように、「アップロードしたファイルを年月ベースのフォルダに整理」にチェックを入れてしまうと同じ理由で画像が表示されなくなりますので、必ずチェックは外してお使いください。

4.禁止事項

WordPressテーマの利用規約に加えて、課金サイト、有料コンテンツサイト、会員サイトなどのログインが必要なページを含むサイトにはご利用いただけません。

やっぱりデザインするっていうのは楽しいものですね。
不具合などありましたらコメントください。
ご要望があればオリジナルテーマの作成もやりますのでお気軽にご相談ください。
これからこのテーマのデザイン違いや全く違ったテーマも作っていきますので是非使ってください。

>PC用&スマートフォン用テーマセットを無料ダウンロード
>PC用テーマを無料ダウンロード

Date:2013/04/26
Category:2013年の作品, WEB全般, White Zip, WordPress, テンプレート・テーマ, フリーダウンロード
Tags:, , , , , , , , , , ,
Archive:http://yasutake-blog.white-zip.com/cat_2013/white-zip%e3%81%aewordpress%e7%94%a8%e3%83%86%e3%83%bc%e3%83%9e%e3%80%80%e3%80%8cflank-black%e3%80%8d/1016/

Comments:(0)