SQLの窓

2013年03月16日


jQuery (とDOM) で選択した SELECT 要素( コンボボックス ) の表示されているテキストを取得する

jQuery で取得するのは簡単ですが、場合によってはDOM を使えたほうがいい場面があるかもしれません。(name 属性を持つ要素であれば、document.getElementsByName の [0] を使ってエレメントを特定できます)
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<select name="font">
<option value="ArmedBanana">アームド・バナナ</option>
<option value="kirieji">切絵字1.0</option>
<option value="mofuji">モフ<b style='color:#f00;'>字</b>1.3</option>
<option value="minamoji">水面字1.1</option>
</select>
<input type="button" id="get_text" value="選択されたテキスト" />
<input type="text" id="result_text" />
<script type="text/javascript">

// ボタンのクリックイベント
$("#get_text").click( function() {
	// ************************************************
	// jQuery
	// ************************************************
	// コンボボックスそのもの
	var combo = $('select[name="font"]');
	// 選択されたコンボボックスのオプション
	var combo_option = $('select[name="font"] option:selected');

	// 選択された OPTION のテキスト
	var selected_text = combo_option.text();
	// 入力フィールドに、選択された OPTION のテキストをセット
	$("#result_text").val(selected_text);

	// 選択されたインデックス番号
	var nIndex = combo.prop("selectedIndex");
	console.log(nIndex);

	// 選択されたインデックス番号をエレメントから取得した場合
	var el = combo.get(0);	// jQuery のオブジェクトから DOM( パターン1 )
	console.log(el.selectedIndex);

	el = combo[0];		// jQuery のオブジェクトから DOM( パターン2 )
	console.log(el.selectedIndex);

	el = document.getElementsByName("font")[0];	// DOM
	console.log(el.selectedIndex);

	// 選択されたテキストをエレメントから取得した場合
	var childs = el.getElementsByTagName("option");
	selected_text = childs[nIndex].firstChild.nodeValue;
	console.log(selected_text);

});

</script>




タグ:jquery javascript
posted by lightbox at 2013-03-16 20:15 | jQuery | このブログの読者になる | 更新情報をチェックする

2013年03月06日


@keyframes のみ CSS で記述して、後の処理を全て jQuery で行う『実行中アニメーションアイコン』のサンプル

❶ start で @keyframes を使ったアニメーション
❷ stop で↑を停止
❸ 位置移動
❹ start2 で setTimeout でアニメーション
❺ stop2 で↑を停止 
2013/3/6 時点の @keyframes

Chrome と safari が @-webkit-keyframes で実装されている為記述が残っていますが、他のブラウザではベンダープレフィックスの無い @keyframes で動作しています。( IE9 は実装そのものがされていません )

@keyframes 以外の適用を jQuery で行う

例えば、アニメーションの処理は、対象となる要素( ここでは doing )に対して css を適用するわけですが、jQuery では、.css メソッドで処理する事ができます。
.css("animation", ".85s doing-rotate steps(8) infinite");
ここで、doing-rotate が、@keyframes で定義済のアニメーションの目に見える効果の定義の名前になります ここで行うアニメーションは『実行中を示すアイコンのアニメーション』なので、アニメーションを実行しつづける事だけでは目的が達成されません。ですから、目的に必要な処理にともなって css が適用された状態を変更する必要があります。 ❶ アニメーションの開始と停止 ❷ 表示位置の変更 ❸ @keyframes が使えないブラウザの対応 少なくとも、以上のような『機能』が必要になるので、その実装の為に jQuery の名前空間を使ったサンプルが以下のようになります
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<style type="text/css">
/*
  プレースホルダー( この中の絶対座標で表示する )
*/
#holder {
	position: relative;
	width: 300px;
	height: 200px;
}

/*
  1) Chrome バージョン 25.0.1364.152 m 現在、-webkit- が必要
  ( safari も同様 )
  2) その他は、@keyframes で動作
*/
@-webkit-keyframes doing-rotate {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes doing-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/*
カスタム要素で実装
*/
doing {

  position: absolute; /* 目的の性格上、親要素は position:relative  */
  display: block; /* 必須 : Opera の都合で最初から設定しておく必要があります */
  visibility: hidden; /* 目的の性格滋養、初期は非表示  */
  border-radius: 50%; /* 元の形状を丸くする為 */

  font-size: 18px; /* 位置指定を em でしているので、ここを変更すると半径変更 */
  width: 5px; /* サイズ変更 */
  height: 5px;

  /* em を使うと、font-size にサイズを連動させる事ができる */
  /* width: .25em; height: .25em; */

  /* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
  box-shadow:
    0 -.4em       0 0 rgba(50,0,0,1),
    -.28em -.28em 0 0 rgba(50,0,0,.75),
    -.4em 0       0 0 rgba(50,0,0,.50),
    -.28em .28em  0 0 rgba(50,0,0,.25)
  ; 

}
</style>

<div id="holder">
<!-- カスタムでは終了タグが必要です -->
<doing></doing>

<input type="button" id="start" value="start" />
<input type="button" id="stop" value="stop" />
<input type="button" id="move" value="移動" />
<input type="button" id="startie9" value="start2" />
<input type="button" id="stopie9" value="stop2" />

</div>

<script type="text/javascript">
// 処理の性格上、同時に一つしか使わない事を前提に jQuery の名前空間に
// 単独で追加登録しています
//
// 複数のアニメーションを作成する場合は、$.fn.extend で、
// jQuery オブジェクトに対する実装に変更します
$.extend({
	// 表示開始
	ani_start: function(name) {
		if ($.ani_value.userAgent.indexOf("msie") > -1) {
			if ($.ani_value.appVersion.indexOf("msie 10.0") > -1) {
				$(name).css("visibility", "visible")
					.css("animation", ".85s doing-rotate steps(8) infinite");
			}
			// IE は、10 以外は動作しないので、手動でアニメーションする
			else {
				$.ani_start2(name);
			}
		}
		else { 
			$(name).css("visibility", "visible")
				// アニメーションを開始する css を設定する
				.css("animation", ".85s doing-rotate steps(8) infinite");
		}
		return $(name);
	},
	// 表示停止
	ani_stop: function(name) {
		if ($.ani_value.userAgent.indexOf("msie") > -1) {
			if ($.ani_value.appVersion.indexOf("msie 10.0") > -1) {
				$(name).css("visibility", "hidden")
					.css("animation-name", "none");
			}
			// IE は、10 以外は動作しないので、手動でアニメーションを止める
			else {
				$.ani_stop2(name);
			}
		}
		else { 
			$(name).css("visibility", "hidden")
				// アニメーションを停止する css を設定する
				.css("animation-name", "none");
		}
		return $(name);
	},
	// 表示位置変更
	ani_move: function(name,x,y) {
		$(name).css("left", x+"px")
			.css("top", y+"px");
		return $(name);
	},
	// 手動アニメーション
	ani_start2: function(name) {
		// ループ用のプライベート関数
		function loop() {
 			$.ani_value.timerid = window.setTimeout(loop,120);
			$.ani_value.loopdeg += 45;
			$(name).css("transform", "rotate("+$.ani_value.loopdeg+"deg)");
		}
		// 再入を防ぐ
		if ( $.ani_value.timerid == null ) {
			$(name).css("visibility", "visible");
			loop();
		}		
		return $(name);
	},
	// 手動アニメーションの停止
	ani_stop2: function(name) {
		$(name).css("visibility", "hidden");
		// 動いている時だけ止める
		if ( $.ani_value.timerid != null ) {
			clearTimeout($.ani_value.timerid);
			$.ani_value.timerid = null;
		}
		return $(name);
	},
	// 利用する変数
	ani_value: { 
		loopdeg: 0,
		timerid: null,
		userAgent: window.navigator.userAgent.toLowerCase(),
		appVersion: window.navigator.appVersion.toLowerCase()
	}
});

// 初期位置
$.ani_move( "doing", 100, 60 );

var move_x = 100;
// ボタンの処理を登録
$("#start").click( function(){ $.ani_start("doing"); } );
$("#stop").click( function(){ $.ani_stop("doing"); } );
$("#move").click( function(){ $.ani_move( "doing", ( move_x < 180 ) ? move_x+=40 : move_x=100, 60 ); } );
$("#startie9").click( function(){ $.ani_start2("doing"); } );
$("#stopie9").click( function(){ $.ani_stop2("doing"); } );

</script>

手動アニメーションについて

IE9 は @keyframes が使えないので内部で判定して、自動的に setTimeout を使った手動アニメーションを実行しています。ただ、他のブラウザでも、setTimeout を使った手動アニメーションは正しく動作します。

一般的なアニメーションは、$.fn.extend で

ここでは、単純にする為に同時に二つを使う事が無いはずの、『実行中アイコン』を例にしていますので、$.extend で実装しています。しかし、複数のアニメーションを同時に行いたい場合は、$.fn.extend を使って、オブジェクト単位で動作するような記述をする必要があります。



posted by lightbox at 2013-03-06 11:16 | jQuery | このブログの読者になる | 更新情報をチェックする

2013年03月03日


jQuery を使用したカスタム属性によるコンテンツ表現の標準化

HTML だけでスライダーを作成

class="demo" の DIV 内のみ、HTML の要素を拡張してスライダーへのパラメータとしています。もちろん、jQuery の専用コード(標準化用コードの実行)は必要不可欠ですが、仕様さえ決まっておれば、コンテンツを作成するのにプログラマは必要ありません。



<div class="demo">

<table><tr>
<td>
	<input type="text" id="amount1" />
	<div id="slider-v1" set_content="amount1" value="100"></div>
</td>
<td>
	<input type="text" id="amountA" />
	<div id="slider-vA" set_content="amountA" value="800"></div>
</td>
<td>
	<input type="text" id="amount2" />
	<div id="slider-h1" set_content="amount2" value="500"></div>

	<br /><br />

	<input type="text" id="amountB" />
	<div id="slider-hB" set_content="amountB" value="400"></div>
</td>
</tr></table>

</div>

このサンプルでは『標準化』としてはまだ甘い

id の命名法で縦か横かを決定し、DIV に追加した属性で振る舞いの一部を定義しています。解りやすくする為に、値をセットする場所に INPUT を使用していますがその必要は無く、実際はそれ用の要素は自動的に作成して配置する方向が正解だと思います。

さらに、スライダーのオプションは、全て DIV の属性に設定可能ですし、共通の設定内容やテーマがある場合は、それとの連携も想像できます。

いっその事、新しい要素を作ってしまってもよさそうなんですけれど、以下のコードが動くので。
<aaa>あああああ</aaa>
<script type="text/javascript">
$("AAA").click(function(){alert("ok")});
</script>
<link type="text/css" href="http://homepage2.nifty.com/lightbox/jquery/jqcss/black-tie/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<style type="text/css">
.demo {
	display: none;
}

.demo td {
	vertical-align: top;
	padding: 10px;
}

.ui-slider .ui-slider-handle {
	width: 1.0em;		/* ハンドルの幅 */
	height: 1.0em;		/* ハンドルの高さ */
	border-radius: 10px;	/* ハンドルを丸くする */
}

</style>

<script type="text/javascript">
$(function() {

	// 数値表示部分の CSS( Slider 側のDIVに定義も可能 )
	// id に "amount" と先頭に付く demo クラス内
	$(".demo input[id^='amount']")
		.css("border", 0)
		.css("color","#f6931f")
		.css("font-weight","bold")
		.css("width","30px")
		.css("margin-bottom","10px");

	// 縦スライダー
	$( ".demo div[id^='slider-v']" ).slider({
		orientation: "vertical",
		range: "min",
		min: 0,
		max: 1000,
		create: function( event, ui ) {
			// 値をセットするコンテンツのID を自分自身の属性より得る
			var target_name = $(this).attr("set_content");
			// 初期値を自分自身の属性より得る
			var default_value = $(this).attr("value");
			// 外部へ初期値をセットする
			$( "#"+target_name ).val( default_value );
			// 自分自身へ初期値をセットする
			$(this).slider("value", default_value );

			// 大きさ
			$(this).css("width","10px");
			$(this).css("height","200px");
		},
		slide: function( event, ui ) {
			var target_name = $(this).attr("set_content");
			$( "#"+target_name ).val( ui.value );
		}
	});

	// 横スライダー
	$( ".demo div[id^='slider-h']" ).slider({
		orientation: "horizontal",
		range: "min",
		min: 0,
		max: 1000,
		create: function( event, ui ) {
			// 値をセットするコンテンツのID を自分自身の属性より得る
			var target_name = $(this).attr("set_content");
			// 初期値を自分自身の属性より得る
			var default_value = $(this).attr("value");
			// 外部へ初期値をセットする
			$( "#"+target_name ).val( default_value );
			// 自分自身へ初期値をセットする
			$(this).slider("value", default_value );

			// 大きさ
			$(this).css("width","200px");
			$(this).css("height","10px");
		},
		slide: function( event, ui ) {
			var target_name = $(this).attr("set_content");
			$( "#"+target_name ).val( ui.value );
		}
	});


	$(".demo").show();

});
</script>

<div class="demo">

<table><tr>
<td>
	<input type="text" id="amount1" />
	<div id="slider-v1" set_content="amount1" value="100"></div>
</td>
<td>
	<input type="text" id="amountA" />
	<div id="slider-vA" set_content="amountA" value="800"></div>
</td>
<td>
	<input type="text" id="amount2" />
	<div id="slider-h1" set_content="amount2" value="500"></div>

	<br /><br />

	<input type="text" id="amountB" />
	<div id="slider-hB" set_content="amountB" value="400"></div>
</td>
</tr></table>

</div>
<br />
<input type="text" id="amount3" value="ここは、セレクタ対象外" />

slider-v と slider-h という要素で実装

結局以下のようにしても動くので、どうにでもなりそうです。
<script type="text/javascript">
$(function() {

	// 数値表示部分の CSS( Slider 側のDIVに定義も可能 )
	// id に "amount" と先頭に付く demo クラス内
	$(".demo input[id^='amount']")
		.css("border", 0)
		.css("color","#f6931f")
		.css("font-weight","bold")
		.css("width","30px")
		.css("margin-bottom","10px");

	// 縦スライダー
	$( ".demo slider-v" ).slider({
		orientation: "vertical",
		range: "min",
		min: 0,
		max: 1000,
		create: function( event, ui ) {
			// 値をセットするコンテンツのID を自分自身の属性より得る
			var target_name = $(this).attr("set_content");
			// 初期値を自分自身の属性より得る
			var default_value = $(this).attr("value");
			// 外部へ初期値をセットする
			$( "#"+target_name ).val( default_value );
			// 自分自身へ初期値をセットする
			$(this).slider("value", default_value );

			// 大きさ
			$(this).css("display","block");
			$(this).css("width","10px");
			$(this).css("height","200px");
		},
		slide: function( event, ui ) {
			var target_name = $(this).attr("set_content");
			$( "#"+target_name ).val( ui.value );
		}
	});

	// 横スライダー
	$( ".demo slider-h" ).slider({
		orientation: "horizontal",
		range: "min",
		min: 0,
		max: 1000,
		create: function( event, ui ) {
			// 値をセットするコンテンツのID を自分自身の属性より得る
			var target_name = $(this).attr("set_content");
			// 初期値を自分自身の属性より得る
			var default_value = $(this).attr("value");
			// 外部へ初期値をセットする
			$( "#"+target_name ).val( default_value );
			// 自分自身へ初期値をセットする
			$(this).slider("value", default_value );

			// 大きさ
			$(this).css("display","block");
			$(this).css("width","200px");
			$(this).css("height","10px");
		},
		slide: function( event, ui ) {
			var target_name = $(this).attr("set_content");
			$( "#"+target_name ).val( ui.value );
		}
	});


	$(".demo").show();

});
</script>

<div class="demo">

<table><tr>
<td>
	<input type="text" id="amount1" />
	<slider-v set_content="amount1" value="100"></slider-v>
</td>
<td>
	<input type="text" id="amountA" />
	<slider-v set_content="amountA" value="800"></slider-v>
</td>
<td>
	<input type="text" id="amount2" />
	<slider-h set_content="amount2" value="500"></slider-h>

	<br /><br />

	<input type="text" id="amountB" />
	<slider-h set_content="amountB" value="400"></slider-h>
</td>
</tr></table>

</div>




タグ:jquery javascript
posted by lightbox at 2013-03-03 08:00 | jQuery | このブログの読者になる | 更新情報をチェックする

2013年03月02日


jQuery : window.openでテキストエリアを開いてクリップボード用データを表示する

処理そのものは、jQuery である必要はあまりないのですが、イベントの処理が必要なので jQuery で書いています。インラインで全て書いてしまってもいいのですが、引用符がかなり複雑になって面倒なのでこれでいいと思います。

ちょっとした貼り付け用のサービスとして

どのような対象でも、クリックする事によってウインドウを開かせて、追加の情報としてテキストエリアの中に表示し、テキストエリアの中をクリックすると選択状態になります。

後は、ユーザーがコピーするかどうするかはご自由に・・・という処理です。


こんな感じでデータを表示




▼ こちらをクリックして下さい
<script type="text/javascript"> // この内容をテキストエリアに転送します // ※ クリックすると、選択されます </script>
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<script>

$(function() {
	$("#target").append("window.openでテキストエリアを開いてクリップボード用データを表示する")
	 .css("cursor","pointer")
	 .click(function() {
		var doc = window.open(
			"about:blank",
			"",
			"width=600,height=100").document;
		doc.write("<textarea onclick=\"this.select();\" cols=70 rows=5>" );
		doc.write( $("#target .show_text").text() );
		doc.write("</textarea>");
		doc.close();
	});
});
</script>


<style type="text/css">
.show_text {
	display: none;
}
</style>

<span id="target"><span class="show_text">&lt;script type="text/javascript"&gt;
// この内容をテキストエリアに転送します
// ※ クリックすると、選択されます
&lt;/script&gt;
</span></span>


document.write() である理由

DOM で作成するのは、本来合理的ではありません。過去、ブラウザによって DOM の実装が違ったりバグだったりと、同じ処理でできるかもしれないのは、jQuery がある前提で、jQuery に問題が出ればかなり困った事になります。

まあそんな大げさでも無いですが、画面レイアウトを全て DOM で作成するのはやはり合理的では無いので、HTML レベルの文字列を用意して書き出すほうがリスクが少ないと思います。

とにかく、経験から言って document.write の動作は信頼性が高く、仕様から言っても PHP で条件によって違うページを作るのを、クライアントで行単位でやってるようなものです。



タグ:jquery javascript
posted by lightbox at 2013-03-02 10:00 | jQuery | このブログの読者になる | 更新情報をチェックする

2012年08月11日


jQueryを使って livedoor の ical 天気ページから iPhone 用コンボボックスを作成する

iPhone のカレンダーに livedoorの 週間天気予報を『照会』させようとすると、アカウントの追加の『その他』で、ical の サーバ部分を入力する必要があるのですが、当然スマホですから入力が面倒なので、スマホで表示してコピーしてペーストすると楽ができます。その為のコンボボックスと入力フィールドを作成する為に、オリジナルページの TABLE 要素全体を使って jQuery で解析してビルドしています

▼ 作成するコードは以下のようになります。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>

<script type="text/javascript">
$(function(){
	var sl = document.createElement("select");
	$("#target").get(0).appendChild(sl);
	$("td").each(function(index,me){
		// 場所を記述している日本語は10文字以内(実際は4文字以内)
		if ( $(me).text().length < 10 ) {
			var opt = document.createElement("option");
			$(opt).text($(me).text());
			$(opt).attr("value",($("a", $(me).next()).get(0).href).replace("toolbox.winofsql.jp","weather.livedoor.com"));
			sl.appendChild(opt);
		}
	});
	$(test).val($(sl).val());
	$(sl).change(function(){
		$(test).val($(this).val());
	});
	$("#target_txt").val($("#target").html());
});
</script>
<div id="target"></div>
<textarea id="target_txt"></textarea>
<br /><input type="text" id="test" style='width:400px;'/>

まず、jQuery に関しては使いたいだけなので、Google の API を利用して一時的に使えるにしています。google.load("jquery", "1"); では、1.7.1 がロードされます。

対象の TABLE はごくふつうのテーブルですが、都合のいい事に必要なテキストは必ず TD が使われているので、$("td") で全ての TD を取得します。

TD はタイトルと、URL 用とがあって、必ず並んでいます。テキストの文字列がはっきり少ないので( 実際は4文字以内 )、$(me).text().length < 10 で対象をまず絞ります( $(me) は、$(this) でも可 )

次にその隣が欲しいわけですから、$(me).next() を対象としてセレクタを再度 "a" で絞って取得し、icalは、先頭の a だと解っているので get(0) で先頭要素を取得して href 属性を手に入れます。

同時に、テキストはすでに $(me).text() で手に入っているので、これらを利用して新しい select を作成してその HTML を TEXTAREA にセットして後で使えるようにします。

ただ、このままではもったいないので、その場で動作確認ができるようにイベントを追加しています。

※ このコードで作った HTML を以下のページで使っています

ip_ical.htm




posted by lightbox at 2012-08-11 14:39 | jQuery | このブログの読者になる | 更新情報をチェックする

2011年07月20日


jQuery の easing の追加

デフォルトでは swing と linear ですが、jQuery Easing Plugin でたくさん使えるようになります。但し、swing は jswing に名前が変更されて、swing は書けるようですが、jQuery.easing.def を変更すると out of memory のエラーが
出たりするので、デフォルトである easeOutQuad は、swingと殆ど同じなのであまり気にせずに使うといいと思います。

※ しかし、どうも out of memory の挙動(IE8ですが)がたまにあるので、無理に
※ プラグインしない、という選択肢もあります。

その効果をグラフで示しておられるのが jQuery Easing - jQuery 日本語リファレンスで、その意味かよく解るようになっています。このページの jQuery は、jquery-1.3.min.js でしたが、1.6.2 でも動いています。
( そもそも、easing はプラグインなので、影響無いように作られています )
テフォルトの easing
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

<input type="button" value="アニメーション" onclick='jqAction()'>
 テフォルトの easing <input id="def" type="text" />
<div style='position:relative;height:150px;'>
<img
	id="target"
	src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
	width="442"
 	height="121"
	style='
		position: absolute;
		left: 10px;
	'
/>
</div>
<script type="text/javascript">
// デフォルトは easeOutQuad
// ※ swing とほぼ同じ効果
$('#def').val(jQuery.easing.def);
function jqAction() {
	$('#target').animate(
		{
			// あるものを 0 にしたり、無いものを元に戻します
			// ( いったん見えなくなります )
			opacity: ['toggle', 'easeInCubic'],
			width: ['-=200', 'easeInElastic']
		},
		1000,
		function() {
			// 見えなくなった後、元へ戻します
			$('#target').animate(
				{
					opacity: 'show',
					width: '+=200'
				},
				1000,
				function() {
					// 一番最後に表示
					$('#def').val(jQuery.easing.def);
				}
			);
		}
	);

}
</script>




posted by lightbox at 2011-07-20 14:38 | jQuery | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり