SQLの窓

2014年11月29日

r69 で再チェックしました / Three.js(r53) で追加された LineDashedMaterial のサンプルを簡素化して解りやすくしました



中央に点線でキューブが回るだけのサンプルですが、LineDashedMaterial の確認だけならこれで十分です。

cube ファンクションで 12 個の 線が作成されていますが、一つの線に Vector3 座標を二つ使って線を引いています。THREE.LinePieces を使っているので、二点のペアをを繋げるので連鎖はしません。デフォルトの THREE.LineStrip を使うと、点が連鎖して描画されるので、一筆書きになります。

このサンプルでは正確に立方体を作成する為に、『二点のペア』を使っているので、同一座標がある事に注意して下さい。

r53 では WebGL、r56 で Canvas

※ WebGL では、	geometryCube.computeLineDistances(); でキューブのデータを完成させる必要があります。また、{ antialias: true } を WebGLRenderer の引数に渡さないと、ラインの表示の乱れが大きいです

更新履歴にそうあります。このサンプルコードは r56 で動作しますし、r53 〜 r55 までなら、WebGLRenderer で動作するはずです。ですが、いずれにしても点線が動作するのは Google Chrome か Firefox だけなので注意して下さい。 IE11 で動作していました。

canvas でのデモ

WebGL でのデモ
( three69.min.js のみで動作します )

▼ CanvasRenderer
※ 利便性の為に、jQuery を使用しています。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/three69.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/renderers/Projector.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/renderers/CanvasRenderer.js"></script>

<div id="three_canvas_container"></div>

<script type="text/javascript">
var WIDTH = 600;
var HEIGHT = 600;
var renderer, scene, camera, stats;
var object;

$("#three_canvas_container")
	.css({
		width: WIDTH+"px",
		height: HEIGHT+"px"
	});


init();		// 仕様作成
animate();	// アニメーション開始

// ***********************************
// 描画仕様作成
// ***********************************
function init() {

	// 遠近法カメラ作成
	camera = new THREE.PerspectiveCamera(
		// 視野の上下角度
		40,
		// カメラビューのアスペクト比
		WIDTH / HEIGHT,
		// 表示可能な一番近い距離
		1,
		// 表示可能な一番遠い距離
		200
	);

	// 座標におけるカメラの位置
	camera.position.z = 150;

	// シーン作成	
	scene = new THREE.Scene();

	// 一辺 50 のキューブの座標を作成	
	var geometryCube = cube( 50 );

	// ラインでキューブを作成	
	object = new THREE.Line(
		geometryCube,
		// 点線の仕様を決定
		new THREE.LineDashedMaterial( {
			color: 0xffaa00,
			dashSize: 3,
			gapSize: 1,
			linewidth: 2
		} ),
		// 二つの座標をペアとして使用する
		THREE.LinePieces
	);

	// シーンにオブジェクト(ラインで作成したキューブ)を追加	
	scene.add( object );

	// Canvas で描画します	
	renderer = new THREE.CanvasRenderer( );
	// 描画サイズの設定
	renderer.setSize( WIDTH, HEIGHT );
	// 描画領域の色を設定します
	renderer.setClearColor( 0x404040 );

	// 描画対象とする three_canvas_container に Three.js の
	// 描画システムを実装	
	var container = $( '#three_canvas_container' )[0];
	container.appendChild( renderer.domElement );

}

// ***********************************
// ラインによるキューブ作成
// ***********************************
function cube( size ) {
	
	var h = size * 0.5;
	
	var geometry = new THREE.Geometry();
	
	geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
	geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
	geometry.vertices.push( new THREE.Vector3( h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, h, h ) );
	geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
	geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, -h, h ) );

	return geometry;

}


// ***********************************
// アニメーション用繰り返し処理
// ***********************************
function animate() {

	// アニメーション用のこの関数の再呼び出しの予約
	requestAnimationFrame( animate );

	// 描画
	render();

}

// ***********************************
// 実際の描画
// ***********************************
function render() {

	// アニメーション用の時間間隔
	var time = Date.now() * 0.001;

	// x 軸で回転
	object.rotation.x = 0.25 * time;
//	object.rotation.y = 0.25 * time;

	// 描画実行
	renderer.render( scene, camera );

}
</script>


posted by at 2014-11-29 00:34 | Three.js | このブログの読者になる | 更新情報をチェックする

2014年11月26日

Three.js(r69) : Lineメソッドで使用する頂点の配列を持つ Geometry オブジェクト

この記事を最初に書いた、2012-03-25 では、Three.js は r47 でした。現在 r69 になり、js ライブラリの参照単位や、クラスの仕様も変わり、座標の設定方法もかなり変わっていました。( 現在 THREE.Sprite を使用しており、ソース内にあるサンプルのマテリアルを使用できますが、昔は無かったので {} を変わりに使用して単純な線を引いています。引数に何も指定しないと、規定のマテリアルが使用されて、ソースコード上で未使用のマテリアルを引数にセットした状態と同じになります )

さらにいろいろテストしてみると、Vertex オブジェクトが無くなっている事がわかりました。r69 では、直接 Vector3 を geometry.vertices.push できるようです。

Vector3 によるデモ

Sprite によるデモ



※ リロードする毎にランダムに線を引きます

正直 3D に関する知識はたいして持ち合わせていないので、サンプルの動作からオリジナルソースの中を読んで自分なりに納得した内容を記述しているので、間違っているかもしれま
せん。
<script type="text/javascript" src="http://winofsql.jp/js/three/three69.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/renderers/Projector.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/renderers/CanvasRenderer.js"></script>
<script type="text/javascript">

container = document.createElement('div');
container.setAttribute("id", "container");
document.body.appendChild(container);

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1200;
camera.position.y = -200;

scene = new THREE.Scene();

scene.add( camera );

renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0xffffff );
renderer.setSize( 700, 500 );
container.appendChild( renderer.domElement );

// **************************************
// Geometry は、描画に必要なデータ収納庫
// **************************************
var geometry = new THREE.Geometry();

// **************************************
// ライン用のマテリアル( ここでは未使用 )
// **************************************
var PI2 = Math.PI * 2;
var material = new THREE.SpriteCanvasMaterial( {

	color: 0xffffff,
	program: function ( context ) {

		context.beginPath();
		context.arc( 0, 0, 0.5, 0, PI2, true );
		context.fill();

	}

} );


// 座標を4つ作成
for ( var i = 0; i < 4; i ++ ) {

	// 座標を作成
	particle = new THREE.Sprite( {} );
	particle.position.x = Math.random() * 2 - 1;
	particle.position.y = Math.random() * 2 - 1;
	particle.position.z = Math.random() * 2 - 1;
	particle.position.normalize();
	particle.position.multiplyScalar( Math.random() * 10 + 450 );
	particle.scale.x = particle.scale.y = 10;
	scene.add( particle );

	geometry.vertices.push( particle.position );

}

// **************************************
// geometry を使って順につなげる『線』を描画
// 線に対する属性として、色と不透明度と太さを設定
// **************************************
line = new THREE.Line(
	geometry, 
	new THREE.LineBasicMaterial( { color: 0x000000, opacity: 1.0, linewidth: 5 } ) 
);
scene.add( line );

renderer.render( scene, camera );


</script>


posted by at 2014-11-26 22:52 | Comment(0) | Three.js | このブログの読者になる | 更新情報をチェックする

Shadowbox : 宇多田ヒカル - Goodbye Happiness

 
5 分 54 秒 ※ 画像をクリックすると、Shadowbox で動画が開始されます 貼り付けコードは、こちらで作成したものです。 2014/11/26 現在 / 17,489,673 再生 いろんな意味で見ごたえのある動画です。パペットに始まり、鳩で終わり、途中でいかにも素人っぽいフリの踊りを踊ってくれます。もちろんプロが構成したんだろうけれども、素人でも頑張ったら出来そうな、実際自家製作る場合のとても良いお手本ムービのような気がします。 でも、この部屋は相当広いので、そこは同じになんないでしょうね。 Shadowbox の一番簡単な使用方法は、Lightbox の古い使い方と同じで、rel 属性を使用します。 ▼ Lightbox2 の中のコメント
Support both data-lightbox attribute and rel attribute implementations
<a rel="shadowbox;player=swf;width=960;height=745"
  href="http://www.youtube.com/v/cfpX8lkaSdk?autoplay=1&fs=1"
  title="宇多田ヒカル - Goodbye Happiness">
  <img src="http://img.youtube.com/vi/cfpX8lkaSdk/0.jpg"
    style='border:solid 0px #000000'>
</a>
関連する記事

Shadowbox.js の jQuery Adapter は、Shadowbox 内で、jQuery の プラグインが作成されています。



posted by at 2014-11-26 20:30 | Comment(0) | 音楽動画 | このブログの読者になる | 更新情報をチェックする

Windows のコマンドプロンプトで、標準エラー出力へ出力する

普通に echo で表示すると、標準出力へ表示されます。しかし、もう一つ表示先があって、それを標準エラー出力と言い、通常そこへはエラーメッセージ等を表示して区別する目的で存在します。

しかし、例え意図的に標準エラー出力に表示しても、コマンドプロンプトには両方表示されるので、区別するにはそれなりの書き方があります。

1) 標準エラー出力へ表示する

▼ test.bat
@echo off
echo 標準エラー出力へ >&2
echo 標準エラー出力へ 1>&2
echo 標準出力へ

一つ目と二つ目が標準エラー出力へ表示されます。 > と 1> は同じ意味で、標準出力ですが、その相手として通常はファイルを指定したりしますが、かわりに &2 として標準エラー出力へと出力し直す形です。( 但しこの場合、間にスペースは書けません )

2) 標準エラー出力のみ表示する
test.bat 1> nul

test.bat の標準出力のみをを、何も無い nul へ表示します( 結果、コマンドプロンプトに標準出力への内容は表示されません )

3) どちらも表示しない
test.bat 1> nul 2> nul

または

test.bat 1> nul 2>&1

一つ目は両方とも nul へ。二つ目は、標準エラー出力を標準出力に出力しなおしているので結局表示されません


posted by at 2014-11-26 19:33 | Comment(0) | コマンドプロンプト | このブログの読者になる | 更新情報をチェックする

2014年11月21日

たぶん5年くらい経っていると思いますが、手書きブログ用の『パレットプラグイン』がまだちゃんと動くようです。

今はペンタブが無いので絵は描けませんが、ブックマークレットを登録して動かしてみると、手書きブログの『Tegaki Editor』でまだ動作していました。

正直とてもびっくりしました。



てっきり、もうボロボロなんだと思ってたので、ある意味感動的な再会をしたような気分です。

当時の PC から比べると高性能にもなっているので、動作も軽快です( 以前はドラッグして動かすと、IE では残像が出てました )

そういえば、IE ではどうなのかな?
試してみよう。

おっと、IE と Firefox は、Flash インストールして無かった・・・。
まあ、たぶん動くんでしょう。

ヒマな時に、もっと使いやすく書き直してみましょうか。見栄えももっと CSS 使ってかっこよくしてみたい気もして来ました。

カスタムパレットツールのほうは、レジストリを使うので今時では無いので見る気もしませんが、ブックマークレットに関しては、ここまで実装したものは世間にも少ないはずなので、再度技術的な切り口から解説付けるのも面白いと思ったりもしています。

でも。

ペンタブも欲しいと今とても思っています。



関連する記事

パレットプラグイン ( 使用方法 )



posted by at 2014-11-21 01:14 | Comment(0) | 手書きブログ | このブログの読者になる | 更新情報をチェックする

2014年11月20日

DAZ3D : jojo Anja / GIMP スクリプトによる輪郭レイヤーによって比較的無機質な 3D レンダリングシーンが臨場感あふれる絵になる例




GIMP の スクリプト効果で作成されるレイヤー( 輪郭 ) を重ねるとアメコミのような絵になる事があります。特にこの絵はジョジョ系の絵になっしまっています。ここから、このスクリプトの効果がとても 3D と相性がいい事が解った始まりでした。

▼ 元絵




Google で検索すると、Anja Jojo って人が結構沢山・・・



posted by at 2014-11-20 03:21 | Comment(0) | DAZ3D DAZStudio イラスト 2014 | このブログの読者になる | 更新情報をチェックする

2014年11月16日

かなり前にインストールしておいた、WordPress を少し整理しようとして、まずヘッダ部分がいろいろ面倒だった

プログラマなんで PHP は簡単ですが、それだけで右から左へどうにかなるものでは無いので、やはりいろいろ調べる事になりました。ですが、最も最初に必要なのは、ヘッダ部分にスクリプト等を追加したいんだけれど、『どこ?』という所から。

このへんは『操作方法の部類』

なんで、慣れですね。でも、投稿するといきなり勝手に P 要素が追加されました(スタイル要素が崩れて全く効かないのでソースみると酷い事に)。が、こちらの画面から functions.php を開いて実行文書く必要があったのにはびっくりしました。こんなの一般人にはすぐ無理ですよね。



▼ Google Chrome のデベロッパーツール使う上で、日本語のあるスタイルシートでは最近は必要です



で、右サイドの GenratePress で親テーマに移動します。

▼ すると、やっとヘッダ情報にたどり着きます。



とりあえず、ここに追加スクリプトを入れていけばいいという事です。テンプレートとは関係無いスクリプトなんで PHP のコードとして追加する必要はありません、たぶん。



それで、P 要素はどうするかと言うと

元のテンプレートへ戻ります





このテーマの functions へ移動



▼ ここですね。



このあたりは、さすがにインターネットを調べるとすぐヒットしますが、はたして普通の人がこの理由にすぐたどり着くかどうかは難しいところです。
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );



タグ:WordPress
posted by at 2014-11-16 01:51 | Comment(0) | インターネット | このブログの読者になる | 更新情報をチェックする

2014年11月11日

TCPDF で罫線を引く

罫線を引く処理をまとめておけば、それは罫線だけ印刷された印刷物の上にデータを印刷する処理をアプリ側で実装できます(AddPage の後に毎回出力)。そのためには、少なくとも四角形と直線だけ引ける必要があります。

Line メソッド

二つの座標と、罫線の属性を定義した配列で直線を引けます

Line( $x1, $y1, $x2, $y2, array( "width" => 幅, "color" => array( 0, 0, 0 ) ) );
※  array( 0, 0, 0 ) は黒

Rect メソッド

四角形(4つの直線)を作成できます。塗りつぶしもかねているので、以下の書式は塗りつぶしをしない書式です

$line_style = array( "width" => 幅, "color" => array( 0, 0, 0 ) );
Rect( $x, $y, $w, $h, "D", array( "all" => $line_style ) );

4角形なので、4つを別々に定義できますが、all にすると一度に全て定義した事になります

// ***********************************************
// 罫線印字
// ***********************************************
function load_form( $pdf, $cur_position  ) {

	$left = 5;
	$top = 5;
	$width = 200;
	$height = 285;
	$line_height = $GLOBALS['line_height'];

	$line_style = array('width' => 0.1, 'color' => array(0, 0, 0) );
	$body_style = array( 
		'T' => $line_style, 
		'R' => $line_style, 
		'B' => $line_style, 
		'L' => $line_style );
	$pdf->Rect( $left, $top, 200, 285, 'D', $body_style );

	$line_top = $cur_position;
	for( $i = 0; $i < 30; $i++ ) {
		$ly = ($i-1) * $line_height + $line_top;
		$pdf->Line( $left, $ly, $left + $width, $ly );
	}

}


getLastH で現在のフォントでの文字高さを取得
	// ダミーで印字して、現在のフォントでの
	// 行の高さを決定する
	$pdf->SetXY( -100, -100 );
	$pdf->Cell(1, 0, " ", 0, 0, "L");
	$GLOBALS['line_height'] = $pdf->getLastH();



タグ:PHP line Rect
posted by at 2014-11-11 16:45 | Comment(0) | PHP | このブログの読者になる | 更新情報をチェックする

2014年11月10日

二回目のロードは無視する、JavaScrip ライブラリの基本スケルトン

一般によく使われている、グローバル変数を作成しない実行として、(function(仮引数){処理})(実引数); という形になっています。

テストに、正規表現を使った置き換えを使用していますが、これを最初作った当時(2009年)は全角の空白は対象外だったと思いますが今は全部OK です。

※ 参考 / MDN : String.prototype.trim()

リンク先では、IE に関するバグ報告が、\u00A0 に関して書かれていますが、IE8 以前の問題でした。

▼ 漢字スペースと \u00A0 と 半角スペースを含めてテストしています
<script type="text/javascript">
// **************************************
// 無駄なグローバル変数を定義しない
// **************************************
(function(jslibname) {
	if (!window[jslibname]) {
		console.log("1回目の実行です");
		window[jslibname] = {
			// プロパティ
			version: 1.01
			,
			// メソッド
			trim : function( str ) {
				return str.replace(/^\s+|\s+$/g,'');
			}
		};
	}
})("mylib");

(function(jslibname) {
	if (!window[jslibname]) {
		window[jslibname] = {
			// プロパティ
			version: 1.01
			,
			// メソッド
			trim : function( str ) {
				return str.replace(/^\s+|\s+$/g,'');
			}
		};
	}
	else {
		console.log("2回目は実行されません");
	}
})("mylib");

</script>
<input 
	type="button" 
	value="trimメソッドの実行" 
	onClick='alert("|"+mylib.trim("\u00A0   abc   ")+"|");'>
<input 
	type="button" 
	value="純正trimメソッドの実行" 
	onClick='alert("|"+"\u00A0   abc   ".trim()+"|");'>


タグ:javascript
posted by at 2014-11-10 19:32 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年11月07日

ブックマークレットから、ページ中央に固定する IFRAME ウインドウを作成する

position = 'fixed'; 等 により、ページをスクロールしても、IFRAME が画面中央に留まります






これで何をするかというと、この IFRAME の中に SCRIPT 要素を document.write して、画面作成します。画面が出来たら、元々の親ページをコントロールする機能を実装します。

▼ ブックマークレット
ページ中央固定 IFRAME

<a href="javascript:if(!window['_bI']){window._bI={};(function(w,h,b,z,v,c){var%20wnd=document.createElement('iframe');with(wnd){width=w;height=h;with(style){border='solid%20'+b+'px%20#000000';position='fixed';left='50%';top='50%';zIndex=z;display=v;marginLeft=(((w/2)*-1)+'px');marginTop=(((h/2)*-1)+'px');borderRadius='8px';boxShadow='0%2015px%2010px%20-10px%20rgba(0,0,0,0.5),0%201px%204px%20rgba(0,0,0,0.3),0%200%2040px%20rgba(0,0,0,0.1)%20inset';}}document.body.appendChild(wnd);window._bI.wnd=wnd;wnd.contentWindow.document.write('<style>body{background-color:#'+c+';}</style>');wnd.contentWindow.document.close();})(400,200,1,1000,'','DDE8BE');}" onclick=" 
		alert('ブックマークバーにドロップか、IEでは右クリックでお気に入りに登録(お気に入りバー)が簡単です'); 
		if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) { 
			event.returnValue = false; 
		} 
		event.preventDefault(); 
		event.stopPropagation();
	">ページ中央固定 IFRAME</a>
上のコードは、ブックマークレット登録用に作成されています。以下のコードは、内容を正しく確認する為に通常の整形をしたものです。
<script type="text/javascript">
if (!window['_bI']) {
    window._bI = {};
    (function(w, h, b, z, v, c) {
        var wnd = document.createElement('iframe');
        with(wnd) {
            width = w;
            height = h;
            with(style) {
                border = 'solid ' + b + 'px #000000';
                position = 'fixed';
                left = '50%';
                top = '50%';
                zIndex = z;
                display = v;
                marginLeft = (((w / 2) * -1) + 'px');
                marginTop = (((h / 2) * -1) + 'px');
                borderRadius = '8px';
                boxShadow = '0 15px 10px -10px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset';
            }
        }
        document.body.appendChild(wnd);
        window._bI.wnd = wnd;
        wnd.contentWindow.document.write('<style>body{background-color:#' + c + ';}</style>');
        wnd.contentWindow.document.close();
    })(400, 200, 1, 1000, '', 'DDE8BE');
}
</script>

window['_bI']

window['_bI'] は、window._bI というプロパティが定義されていない場合にのみ処理を行うようにしたもので、処理が行われると、window._bI = {}; が実行されて、2回目以降はなにも実行されなくなります。
※ 最初は、window['_bI'] は undefined です。

IFRAME を作成

document.createElement で、動的に iframe 要素を作成して、その iframe の属性を設定する為に、with(wnd) ブロック内で iframe の プロパティを設定しています。document.createElement で作成された要素は、そのままでは有効にならず、document.body.appendChild(wnd); で本体の body に追加されて有効(表示される)になります。

※ 23行目で、window._bI に作成した iframe をセットしているので、後からプロパティの変更が可能です。

IFRAME の背景色を設定

wnd.contentWindow.document.write によって( 最後に wnd.contentWindow.document.close() が必要です )、自由に iframe 内にコンテンツを作成する事ができます。この時点では、まだ CSS だけですが、画面定義や外部参照ライブラリによって iframe 内を JavaScript だけで完成させる事ができます


関連する記事

親(parent) フレームに jQuery が無い場合に jQuery をインストールする。



posted by at 2014-11-07 13:32 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

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


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX