SQLの窓

2014年05月22日


jQuery + Shadowbox.js + Three.js で『画像を蝶のように飛翔させる』デモ表示

Three.js のネタ元は、canvas_geometry_birds です。あちらは鳥オブジェクトですが、少し変更して平面の画像を使えるように改造しています 

2014/05/22 : 画像のカスタマイズ方法です

結局、open_three.js は、ただ jQuery のプラグインとして IFRAME の中身を作っているだけなので、を外部にする必要は特にありません。以下のように実装すれば、背景画像は簡単に変更する事ができます。

とりあえず画像を変えてみたい場合は、こちらに 3D イラストのフリー素材があるので、画像をクリックして大きく表示して、大きな画像を右クリックして URL を取得して使ってみて下さい。( 下にあるソースでは、15行目で指定しています )

蝶の画像は、背景透過の PNG の必要があるので、フリーフォントで簡単ロゴ作成で作成して、Google のギャラリーにアップロードして使用していただくといいと思います。( 下にあるソースでは、12行目で指定しています )

※ ここでは、jQuery を 1.11.0 にしていますが(4行目)、古い IE だと動作しないかもしれないので、古いバージョンを使用しています。
<script>
// このページに jQuery が無い場合にロード
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"></"+"script>");
}
// ▼ 以下は Shadowbox と Three.js のコードロードします
</script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js"></script>
<script type="text/javascript">
// jQuery でボタンのイベントを取得して、好きな画像を飛ばします
$(function(){
	$("#start_button").openThree("http://winofsql.jp/image/s60_2.png");
});
// ここで背景画像を指定します
var img_url = "https://lh4.googleusercontent.com/-n2hqoMHMJfk/U2JsTXjEtbI/AAAAAAAATV0/hQZ5Oc_RIqA/s1200/uf3_001.jpg";
$.fn.extend({
	openThree: function(openThree_Param) {
		$(this).bind('click', function() {

			Shadowbox.open({ 
				player: 'iframe', 
				content: 'about:blank', 
				options: { 
					onFinish: function() {
						setTimeout(  function() {
							var doc = document.getElementById("sb-player").contentWindow.document;
							doc.write("<"+"style> body { background:url("+img_url+"); } </"+"style>");

							doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/three.min57.js\"></"+"script>");
							doc.write("<"+"script type=\"text/javascript\">image_url='" + openThree_Param + "';</"+"script>");
							doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/birds.js\"></"+"script>");
							doc.close();
						},100 );
					}
				} 
	
			}); 

		});
		return this;
	}
});
</script>

<button id="start_button">開始</button>

※ このコードをオンラインでテストしたい場合は、こちらから実行できます。このソースコードの右上ツールバーの中の左から2番目のアイコンでクリップボードにコピーされますので、リンク先で貼り付けて『新しく開く』ボタンをクリックしていただくとデモ画面が表示されます


以下は元々の記事です

※ 実行のクリックは、ページが完全にロードしてからでないと動作しないので注意して下さい。

ページ上のコンテンツに対して、jQueryのプラグインを作って、さらにそのプラグインでクリックイベントを登録して Three.js のデモ画面を Shadowbox.js が開いた IFRAME のウインドウに表示します
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js"></script>
<script type="text/javascript" src="https://lightbox.sakura.ne.jp/demo/three/open_three.js"></script>
<script type="text/javascript">
$(function(){
	$("#code140208003926").openThree($("#code140208003926").children("img").attr("src"));
	$("#code140208003927").openThree("http://winofsql.jp/image/s60_2.png");
	$("#code140208003928").openThree($("#code140208003928").attr("src"));
});
</script>

<button id="code140208003926"><img src="http://winofsql.jp/image/s60_1.png" /></button>
<button id="code140208003927"><img src="http://winofsql.jp/image/s60_2.png" /></button>
<input id="code140208003928" type="image" src="http://winofsql.jp/image/s60_3.png" style="border: solid 1px #000000;border-radius:10px;" />

loadShadowbox.js
if ( !window['lightboxTool'] ) {
	window.lightboxTool = {};
}
if ( !window.lightboxTool.initShadowbox ) {
	window.lightboxTool.initShadowbox = function ( ) {
		Shadowbox.init();
	}
}

(function() {
var str;
var userAgent = window.navigator.userAgent.toLowerCase();
if ( !window.Shadowbox ) {

	str="";
	str+="<link rel=\"stylesheet\" type=\"text/css\" href=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.css\"> \n";
	str+="<"+"script type=\"text/javascript\" src=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.js\" charset=\"utf-8\"></"+"script> ";
	document.write(str);

	if (window.attachEvent){
		window.attachEvent('onload', lightboxTool.initShadowbox );
	}
	else {
		window.addEventListener('load', lightboxTool.initShadowbox, false);
	}

}
})();



open_three.js
$.fn.extend({
	openThree: function(openThree_Param) {
		$(this).bind('click', function() {

			Shadowbox.open({ 
				player: 'iframe', 
				content: 'about:blank', 
				options: { 
					onFinish: function() {
						setTimeout(  function() {
							var doc = document.getElementById("sb-player").contentWindow.document;
							doc.write("<"+"style> body { background-color:#fff; } </"+"style>");

							doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/three.min57.js\"></"+"script>");
							doc.write("<"+"script type=\"text/javascript\">image_url='" + openThree_Param + "';</"+"script>");
							doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/birds.js\"></"+"script>");
							doc.close();
						},100 );
					}
				} 
	
			}); 

		});
		return this;
	}
});

見せたいのは、Three.js の 3D のデモ画面ですが、Three.js の実行はページの一部で実行するのはとても難しい問題があります。しかし、IFRAME 内に表示すればたいていの問題は解決します。



ただ、IFRAME を使う場合殆どの場合は、外部ドメインにページを作っておいて src 属性でその URL を指定するのが通常です。しかし、それではいろいろ管理が面倒で拡張性が無いので JavaScript の document.write で動的に書き出しています。この方法は昔から Google 等が行っていますし、完全なクロスブラウジングです。

書き出すものも、javascript のライブラリにまとめて SCRIPT 要素のまま書き出します。この際少しルールがあり、依存するライブラリは別々の SCRIPT 要素内から書き出す必要があります。それさえ守れば特に問題も無く動作するのですが、書き出す為の文字列を作るのが手作業では無理があるので自作のツールで行っています。

実装そのものは、jQuery のプラグインでまとめています。こうしておくと好きなコンテンツのクリックイベントとしてデモを表示する事ができます。画像は、プラグインの『openThree』の引数として渡すようになっています。

動作環境は、やはり Google Chrome 推奨です。

※ 背景は、ソースコードからは変えてあります


posted by lightbox at 2014-05-22 12:54 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2014年02月14日


別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション

実行ページ
( IE は IE11 以上でないと動作しません )


画像を THREE.ImageUtils.loadTexture で読み込んで、3D オブジェクトにテクスチャとして使用します。公式の説明は発見していませんが、Google+ と Picasa(実質 Google+と同じ) の画像データは、access-control-allow-origin: * を返すので、このような処理に適しています。

ここでは、一つの画像を繰り返し貼り付ける事を想定しています。単純に一枚の画像を面にフィットさせる場合は縦・横のサイズは自由ですが、繰り返して貼りつける場合には、64、128、256、512といったサイズである必要があります( 縦と横が同じサイズの正方形である必要はありませんが、正方形以外のサイズはあまり意味がありません )

サイズが自由である事の確認は、リンク先のページで任意の画像( Google+ のどなたの画像でも OK )のURL をセットして、x、y方向の繰り返しを 1 と 1 にして送信ボタンをクリックすると処理されますのでご確認下さい。また、そのサイズで複数繰り返しを行うとうまく処理されないのも確認できます。 







access-control-allow-origin ヘッダ が返されていますが、Three.js の機能として、THREE.ImageUtils.crossOrigin = "*"; を実行する必要があります。

この処理は、ここ最近のバージョンでやっときちんと実装されたものだと思います。いつ変更されたかは確認していませんが、少なくとも r57 のバージョンで実行すると、設定しなくても動作してしまいます。しかし、r65 では設定が必要になっていますので、実装する場合はバージョンに注意する必要があります。( Three.js は仕様変更が頻繁なので、現実的にはバージョンアップで常に確認する必要があります )
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/three.min65.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/user_play1.js"></script>

<div id="three_area" style='width:600px;height:600px;'></div>

<script type="text/javascript"> 
 
var camera, scene, renderer; 
var user_play; 
 
// 処理開始 
build_3d_world(); 
 
function build_3d_world() { 
 
	// カメラ 
	camera = new THREE.PerspectiveCamera( 70, 1, 1, 10000 ); 
 
	// シーン 
	scene = new THREE.Scene(); 

	// MeshBasicMaterial( 影を使わない ) を使用しているのでライトは必要ありませんが、実行してもかまいません
//	scene.add( new THREE.AmbientLight( 0xffffff ) );

	// 別ドメインの場合必要です( access-control-allow-origin: * の例 )
	THREE.ImageUtils.crossOrigin = "*";

	// 画像は、repeat.set で繰り返しで貼り付ける事ができますが、
	// その為には、64、128、256、512といったサイズである必要があります 
	// 別ドメインの場合は、access-control-allow-origin: ヘッダを返す必要がありますが、
	// Google+ や Picasa の画像は全てかえすようです
	var map = THREE.ImageUtils.loadTexture( "https://lh5.googleusercontent.com/-Xgh7ru0xoXs/UvujW9la76I/AAAAAAAASd4/IFWELp7fpA8/s512/st.png" );
	map.wrapS = map.wrapT = THREE.RepeatWrapping = 1000;
	map.repeat.set( 2, 2 );

	object = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), new THREE.MeshBasicMaterial( { map: map } ) );

	object.position.set( 0, 0, 0 );
	scene.add( object );
 
	// レンダラー 
	renderer = new THREE.WebGLRenderer();
	// 以前は、div の背景色で設定していましたが、クリアカラーを指定するようになっています
	renderer.setClearColor( 0x444444 );
	renderer.setSize( 600, 600 ); 
 
	// 実装 
	document.getElementById("three_area").appendChild( renderer.domElement ); 
 
	// アニメーション 
	// 150 は回転効果の半径です
	user_play = new THREE.UserPlay1( scene, camera, renderer, animate, 150 ); 
	user_play.start(); 
 
} 
// ループ処理 
function animate() { 
 
	// アニメーションを行う為の次のフレームの呼び出し処理です
	requestAnimationFrame( animate ); 
	// この中で回転効果を処理しています
	user_play.render(); 
 
} 
 
</script>
THREE.ImageUtils.loadTexture で返されるのは THREE.Texture オブジェクトです。ここで最も重要な THREE.Texture の機能は、wrapSwrapT プロパティです。これは、平面における繰り返し方向に対するオプションをセットするプロパティで、それぞれ x 方向と y方向と考えて下さい。( S: 水平, T: 深さ, H: 高さ / 内部で、Vector2 に対応しているので、x と y )

オプションの値は 3つ 用意されていて、以下のようになっています
THREE.RepeatWrapping = 1000;
THREE.ClampToEdgeWrapping = 1001;
THREE.MirroredRepeatWrapping = 1002;
デフォルトは THREE.ClampToEdgeWrapping で、テクスチャを面に対して伸縮してセットする事を意味します。THREE.RepeatWrappingTHREE.MirroredRepeatWrapping は、それぞれテクスチャを繰り返してマッピングするもので、前者は境界毎に同じものが繰り返され、後者は境界毎に反転されたものが使用されます。 ただ、繰り返し処理を使っていても、繰り返す回数を 1 回だけにすると THREE.ClampToEdgeWrapping と同じ結果になります。 ※ map.repeat.set( 1, 1 ); 以下の処理は、Three.js の構築部分のみを明確にするためにアニメーション部分を外に出しています。 user_play1.js
THREE.UserPlay1 = function ( scene, camera, renderer, animate, radius ) {

	this.scene = scene;
	this.camera = camera;
	this.renderer = renderer;
	this.radius = ( radius !== undefined ) ? radius : 600;

	this.theta = 0
	this.animate = animate;


};
THREE.UserPlay1.prototype = {
	constructor: THREE.UserPlay1,
	start: function() {
		this.animate();
	},
	render: function() {
		this.theta += 0.1;

		this.camera.position.x = this.radius * Math.sin( THREE.Math.degToRad( this.theta ) );
		this.camera.position.y = this.radius * Math.sin( THREE.Math.degToRad( this.theta ) );
		this.camera.position.z = this.radius * Math.cos( THREE.Math.degToRad( this.theta ) );

		this.camera.lookAt( this.scene.position );
		this.renderer.render( this.scene, this.camera );
	}

};
これらのコードは、THREE.CanvasRenderer でも動作します。但しその場合はセグメントの境界が表示されてしまうので、THREE.MeshBasicMaterial のオプションとして overdraw: true を追加します。また、キューブのセグメント数( 4, 4, 4 ) は、THREE.CanvasRenderer での処理時に効力を発揮します( セグメント単位の画像のゆがみ表現となるので、セグメント数が少ないと全体としての歪みが大きくなります )

3D の原理の専門的な部分はよく解らないのですが、WebGL では平面のセグメント数が少なくても良いように感じています。『 object = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshBasicMaterial( { map: map } ) );』

関連する資料

ポリゴンメッシュ



posted by lightbox at 2014-02-14 17:43 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2013年04月08日


Three.js( Canvas ) デモコード( 背景画像、前景画像、鳥画像変更可 ) : 200のオブジェクトが舞います。

ボタンを押すと、こんな感じの画像が表示されて、背景と前景の間を 3D オブジェクトが鳥のように舞います。

前景画像は背景透過。
鳥画像は、縦横 60px 推奨( 大きいと無駄にメモリを使うだけなので )
※ オブジェクトは、マウスカーソルを避けようとします。

貼り付け用ソースコード
<input type="button" value="表示開始" onclick='three_canvas_bird()' />
<iframe
	src="about:blank"
	id="birds"
	name="birds"
	scrolling="no"
	width="600"
	height="450"
	marginwidth="0"
	marginheight="0"
	style='display:block;border:solid 1px #000000;'
></iframe>
<script type="text/javascript">
function three_canvas_bird() {
	var background_img = "https://lh3.googleusercontent.com/-FZouzPuFejo/UVSH_NqCE8I/AAAAAAAAMeg/iahQIvqs9k0/s600/_img.jpg";
	var forground_img = "https://lh6.googleusercontent.com/-jwlcFaTFj2g/UVSJlDFpiEI/AAAAAAAAMeo/N5I5-coboAk/s500/_img.png";
	var bird_img = "http://winofsql.jp/image/s60_1.png";

	var doc = document.getElementById("birds").contentWindow.document;
	doc.write("<"+"style> body { background:url("+background_img+") no-repeat; } </"+"style>");

	doc.write("<"+"script type=\"text/javascript\" src=\"http://homepage2.nifty.com/lightbox/three/three.min57.js\"></"+"script>");
	doc.write("<"+"script type=\"text/javascript\">image_url=\""+bird_img+"\";</"+"script>");
	doc.write("<"+"script type=\"text/javascript\" src=\"http://homepage2.nifty.com/lightbox/three/birds.js\"></"+"script>");
	doc.write("<div style='position:absolute;left:0px;top:0px;width:100%;height:100%;background:url("+forground_img+") no-repeat center bottom;'></div>");
	doc.close();
}
</script>




posted by lightbox at 2013-04-08 19:14 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2013年03月26日


Three.js + Shadowbox 飛翔する200人の初音ミク

画像は  です。大きい画像を指定しても強制的にこのサイズで描画します。つまり、大きくするとメモリが無駄になるだけです。

実行は、Google Chrome 推奨ですが、Three.js とは言え、Canvas を使用しているので他のブラウザでも動作はします。速度的に Google Chrome 推奨です。( 今日自分の iPhone で見たら物凄く遅いですが、一応動作していました )
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js" charset="utf-8"></script>
<script type="text/javascript">
function openThree(your_image_60) {
	Shadowbox.open({ 
		player: 'iframe', 
		content: 'about:blank', 
		options: { 
			onFinish: function(target) {
				setTimeout(  function() {
					var doc = document.getElementById("sb-player").contentWindow.document;
					doc.write("<"+"style> body { background-color:#fff; } </"+"style>");

					doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/three.min57.js\"></"+"script>");
					doc.write("<"+"script type=\"text/javascript\">image_url='" + your_image_60 + "';</"+"script>");
					doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/birds.js\"></"+"script>");
					doc.close();
				},100 );
			}
		} 
	
	}); 
}

</script>
<input type="button" value="飛翔する200人の初音ミク" onclick="openThree('http://lh3.googleusercontent.com/-4Em5315jEAI/T_GVyEMF5BI/AAAAAAAAHBg/s78i3fY94vU/s60/Black_Eagle_Miku_Elf4.png')" />
元の大きな画像はこちらです。左上と右上の部分が座標移動しているだけですが、羽ばたいているように見えると思います。

Three.js のオリジナルはこちらから見る事ができます

ここでは、Three.js の内容では無く、Shadowbox を使って IFRAME 内に動的にページを作成する事が重要です。Three.js では、通常画像の URL を指定する事によってその画像をページ内に大きく表示してくれますが、HTML ページを指定すると IFRAME を使用します。

昨今、他のページを埋め込むのは自分のサイトでもいろいろ難しい問題がありますが、ここでは document.write を使って同一ドメインのページを表示しているのと同等の IFRAME を動的に作成する方法を示しています。

自分で IFRAME を用意してもいいのですが、どうせなので Shadowbox の美しいウインドウを使ってみました。また、表示する内容も Three.js のサンプルを改造して『初音ミク』の画像を飛ばせています。Three.js の部分は全て JavaScript に書き込んで、画像だけを変更可能にしています。

Shadowbox も、自分のサイトにホスティングして、記事毎に動的にロードする方法を示していますが、もしよろしかったらこの部分はご自由にお使い下さい。( ホスティングをそのまま使ってもいいですし、コードを転用なさってもかまいません )


posted by lightbox at 2013-03-26 00:09 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2012年05月07日


最新のThree.js(2012/04/22-r49)は、IEで動かないバグがあります。それと、CanvasRenderer からLambert で テクスチャの処理が削除されました

何故か無条件に console.log でリビジョンを表示するようになっているので、IE の場合はF12 で開発者ツールを開かないとエラーで実行されません。そこで先頭で以下のコードを追加しておくといいです。
if(!window["console"]){window["console"]={};window["console"]["log"]=function(){}}
それから、光に対応している MeshLambertMaterial の CanvasRenderer の処理でテクスチャ処理が削除されているので、代わりに MeshBasicMaterial を使用します。もともと、CanvasRendererでは、無理やり Google Chrome でしかまともに動かない darker というものを使っていたのですが、無理が生じてきたものと思われます。結果的に、WebGLRenderer と CanvasRenderer では Materialを分けて使う運用になると思います。

CanvasRenderer で MeshBasicMaterial への移行

実際、ソース上では MeshBasicMaterial として仕様変更されているのですが、他の部分が完全に右へならえになっていないので、CanvasRenderer を使いたい場合は注意が必要です。

★ WEB 実行サンプル


1) 3D モデルをロードしたい場合は、JSONLoader のイベント内で MeshFaceMaterial を使う

mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial());
これは、ポリゴンの3角形データが内部で配列になっていて、それを統括するのが MeshFaceMaterial です。MeshFaceMaterial は定義上名前だけの器として内部にはなにもありません。ただ、さらにデータ内の shading を Basic にする必要がありますし、これらは今後のバージョンアップで仕様変更される可能性もあります。

※ データを変更しない場合、テクスチャが一枚だけならこれでも表示されます

var param = {
	map: THREE.ImageUtils.loadTexture('texture.png'),
	overdraw: true
};
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( param ));

2) 単純ポリゴンでは、パラメータでテクスチャを渡して MeshBasicMaterial を直接使う

キュープ等では MeshBasicMaterial でテクスチャは自分でロードします。
var image = new Image()
image.onload = function () {
	var texture = new THREE.Texture( this );
	texture.needsUpdate = true;
	material = new THREE.MeshBasicMaterial({map: texture});
	// キューブ
	cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300), material);
	cube.overdraw = true;
	scene.add(cube);
};
image.src = 'texture.png';



posted by lightbox at 2012-05-07 01:58 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2012年03月21日


Three.js r48 で JSONLoader が Opera で動作しない原因と対処方法

IE9 は未確認で、来週まで確認できません。

Google Chrome と Firefox では、XMLHttpRequest オブジェクトに定数が
定義されていて、r48 からその定数を使ってステータスチェックしているの
で Opera では全く動きません。

ですから、以下のような記述を JSONLoader が使われる前に記述して下さい。
<script type="text/javascript">
if( !XMLHttpRequest.DONE ) {
	console.log("setting");
	XMLHttpRequest.prototype.DONE = 4
	XMLHttpRequest.prototype.HEADERS_RECEIVED = 2
	XMLHttpRequest.prototype.LOADING = 3
	XMLHttpRequest.prototype.OPENED = 1
	XMLHttpRequest.prototype.UNSENT = 0
}
</script>
r47 では数字で条件書いておられるのでこれがなくても動作します。

r48 の Three.js の該当部分を直接変更する方法もありますが、どうもこの作者さんは
 WebKit 以外に興味無いようなので、今後も良く起こりそうです。外部から変更したほうが、
多くの人にとって使いやすいものになると思います。




タグ:トラブル
posted by lightbox at 2012-03-21 19:23 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり