CMSでホームページを更新する場合、ある欄への入力が長すぎると表示が見にくくなったり、隠れてしまったりする事があります。
また、SEO（検索エンジン最適化）の観点からは、タイトルやサマリー（<meta> タグで指定する description）にそれぞれ最適な長さがあると言われています。何が適当かの基準は時とともに、また、場合によって変化しますが、現在、通常の検索サイトでの表示であればタイトルは30字前後、descriptionは 100字前後がよいとされています。
「すぐ使えるCMS」のプログラム側では文字数の制限を一切行っていませんが、運用上、適度な文字数の入力を保てるように、テンプレートでこれを制限したり、入力文字数のカウンターを付けて、編集担当者に適度な文字数を知らせる方法をご紹介します。
注意点：文字数の考え方
このページでご紹介する方法では、半角文字（例えば「a」）、全角文字（例えば「あ」）、そして改行を全て「1文字」と考えます。このため、表示される横幅をきっちりと揃えたり、改行を除いた文字だけを正確にカウントする事はできません。
入力文字数の制限方法
まずは入力文字数を強制的に制限する方法をご紹介します。以下の説明では全て、入力画面テンプレート templats/admin/2.html を編集して下さい。
方法の概要
入力文字数の制限は、入力欄（<input> や <textarea>）に maxlength 属性を指定します。下記例のように、制限をしたい入力欄に maxlength で文字数を指定して下さい。指定した文字数を超えると、欄内に入力ができなくなります。
タイトルの文字数制限をする場合の設定例
タイトル欄には、初期設定で maxlength="100" が指定してあります。数字の部分を制限する文字数に変更して下さい。
<INPUT name="subject" type="text" size="80" maxlength="100" VALUE="%_subject_%" class="imeon">サマリーの文字数制限をする場合の設定例
サマリー（description）や本文の文字数を制限するには、<textarea> タグに maxlength 属性を追加して下さい。以下はサマリー欄に文字数制限をする設定例です。
なお、<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 は設定した項目の分、追加します。
カウンター用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>JavaScript 関数の追加
ページの末尾 </body> （終了タグ）直前に以下の 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>文字数表示の追加とカウント動作設定
カウンタ表示欄
文字数カウントをしたい入力フィールド欄の近くにカウント表示を追加して下さい（下記例青字）。追加したタグには 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 属性を追加して下さい（下記例太字）。この属性の中に、2で追加した JavaScript 関数の実行を指定しています。青字部分「入力欄の 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>青字と緑字の後に続く数字の「15」の部分は、標準文字数とする数字を指定して下さい。入力が設定文字数を超えると赤字（1 で 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 を上書きアップロードして下さい。その後、管理画面を再読み込みして動作を確認して下さい。