小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

入力文字数の制限とカウンターの設定方法

最終更新日: 2015-01-05
CMS入力文字カウンター

CMSでホームページを更新する場合、入力が長すぎると表示が見にくくなったり、隠れてしまったりする事があります。

また、SEO(検索エンジン最適化)の観点からは、タイトルやサマリー(<meta> タグで指定する description)にそれぞれ最適な長さがあると言われています。何が適当かの基準は時とともに、また、場合によって変化しますが、現在、通常の検索サイトでの表示であればタイトルは30字前後、descriptionは 100字前後がよいとされています。

「すぐ使えるCGI」のプログラムでは、文字数の制限を一切行っていませんので、テンプレートでこれを制限したり、入力文字数のカウンターを付ける方法をご紹介します。

注意点:文字数の考え方

このページでご紹介する方法では、半角2文字を全角1文字とカウントするなどの換算を行いません。半角文字(例えば「a」)、全角文字(例えば「あ」)、そして改行を全て「1文字」と考えます。このため、表示される横幅をきっちりと揃えたり、改行を除いた文字だけを正確にカウントする事はできません。

入力文字数の制限方法

以下の説明では全て、入力画面テンプレート templats/admin/2.html を編集して下さい。

入力文字数の制限は、入力欄に maxlength 属性を指定します。下記例のように、制限をしたい入力欄に maxlength で文字数を指定して下さい。指定した文字数を超えると、欄内に入力ができなくなります。

タイトルの文字数制限をする場合の設定例

タイトル欄には、初期設定で maxlength="100" が指定してあります。数字の部分を制限する文字数に変更して下さい。

<INPUT name="subject" type="text" size="80" maxlength="100" VALUE="%_subject_%" class="imeon">

サマリーの文字数制限をする場合の設定例

サマリー(description)や本文の文字数を制限するには、<textarea> タグに maxlength 属性を追加して下さい。なお、この設定はブラウザによっては有効にならない場合があります。

以下はサマリー欄に文字数制限をする設定例です。

<textarea name="summary" cols="60" rows="3" class="imeauto" id="summary" maxlength="100">%_summary_%</textarea>

アップロードと確認

編集を行ったら、サーバに編集した templats/admin/2.html を上書きアップロードして下さい。その後、管理画面を再読み込みして動作を確認して下さい。

文字カウンターの設定方法

文字数カウンターは、カウントした入力文字数だけを表示するパターンと、決めた標準文字数に対して「現在○文字 あと×文字」と制限も表示するパターンの両方の表示が可能です。

以下の説明では全て、入力画面テンプレート templats/admin/2.html を編集して下さい。編集ポイントは以下の4カ所です。3 と 4 は設定した項目の分、追加します。

  1. JavaScript 関数の追加
  2. カウンター用CSSクラス設定
  3. 文字数表示の追加とカウント動作設定
  4. 再読み込み時の JavaScript 動作設定

JavaScript 関数の追加

ページの末尾に以下の JavaScript を追加して下さい。既存の <script> タグがあれば、その末尾にタグ内のコードだけ追加しても構いません。

<script type="text/javascript">
/* 文字数カウント
引数: 入力フィールドID、カウント表示コンテナID、最大文字数(任意)*/
function count_length(Field,Messge,MaxLength){
	var Current = document.getElementById(Field).value.length;
	var ColorClass = "green";
	var Limit;
	if (MaxLength && MaxLength>0){
		var Limit = MaxLength - Current;
		if (Limit < 0 ){ColorClass="red";}
		document.getElementById(Messge).innerHTML = "現在"+
			Current+"文字 <span class='"+ColorClass+
			"'>あと"+Limit+"文字</span>";
	} else {
		document.getElementById(Messge).innerHTML = "現在"+
			Current+"文字";
	}
}
</script>

カウンター用CSSクラス設定

文字数表示用のクラスを設定します。<head> と </head> の間に以下のスタイルを指定して下さい。設定内容は自由に変更して下さい。なお、.green はカウントした文字数の表示、.red は設定文字数をオーバーしたときの表示です。

<style type="text/css">
.green {color: #080;}
.red {color: #c00;}
.counter {margin: 0.1em 0.5em; color: #333; font-size: 0.8em;}
</style>

文字数表示の追加とカウント動作設定

カウンタ表示欄

文字数カウントをしたい入力フィールド欄の近くにカウント表示を追加して下さい(下記例青字)。追加したタグには id 属性を付けて下さい。下記はタイトル欄にカウンターを付ける際の例です。

<TR>
<TH CLASS="titem">タイトル※</TH>
<TD CLASS="contents">
<INPUT name="subject" type="text" size="80" maxlength="100" VALUE="%_subject_%" class="imeon">
<p id="subject_count" class="counter">現在0文字</p>
</TD>
</TR>

カウント動作設定

引き続き、カウント対象の入力欄に、onkeyup 属性を追加して下さい(下記例太字)。この属性の中に、1で追加した JavaScript 関数の実行を指定しています。2カ所の青字部分はそれぞれ「入力欄の id属性」と「カウント表示部分の id属性」を指定して下さい。入力欄に id属性が付いていない場合がありますので、無かったらこれも追加して下さい(赤字部分)。

<TR>
<TH CLASS="titem">タイトル※</TH>
<TD CLASS="contents">
<INPUT name="subject" type="text" size="80" maxlength="100" VALUE="%_subject_%" class="imeon" id="subject" onKeyup="count_length('subject','subject_count',15);">
<p id="subject_count" class="counter">現在0文字</p>
</TD>
</TR>

2箇所の青字の後に続く数字の「15」の部分は、標準文字数とする数字を指定して下さい。入力が設定文字数を超えると赤字(2 で CSS の .red で指定したスタイル)で表示されます。標準文字数を設けない場合は、0 にして下さい。

なお、文字数カウントが標準文字数を超えても入力制限は掛かりません。強制的な文字数制限をする場合は maxlength 属性で指定して下さい。

再読み込み時の JavaScript 動作設定

<body> タグの onload 属性に入力フィールドのonkeyup属性に指定したのと同じ設定を追加して下さい(青字部分)。複数ある場合は、「;」(半角セミコロン)の後に続けて下さい(赤字部分)。

<BODY onLoad="hide_format();count_length('subject','subject_count',15);count_length('summary','summary_count',100);">
もし 2.html の<body>タグに既存の onload 属性が無い場合、別の方法での指定になっているはずです。ページ内に以下のような設定があるはずですので、下記例のように JavaScript 関数の追加をして下さい。
$(document).ready(function(){
	/* ここに何か書いてある筈 */
	
	/* 以下のように追加 */
	count_length('subject','subject_count',15);
	count_length('summary','summary_count',100);
});

アップロードと確認

編集を行ったら、サーバに編集した templats/admin/2.html を上書きアップロードして下さい。その後、管理画面を再読み込みして動作を確認して下さい。

関連リンク

さらに詳しく