「すぐ使えるCMS」入力画面の入力欄のサイズを変更する方法をご紹介します。
入力欄のサイズは、適度な大きさに設定しておくと「望みの入力量」をそれとなく指定できる他、カスタム項目を追加して項目が増えた場合には、入力欄の間違いを防ぐ効果もあります。
対象製品
全ての「すぐ使えるCMS」（旧「すぐ使えるCGI」）製品
入力欄のサイズ変更方法の概要
コーディングの方法
入力欄のサイズ変更は入力画面用のテンプレートを編集して調整しますが、初期設定のテンプレートによって、具体的なHTMLコードが異なります。このページでは、下記のパターンに分けてコーディング例をご紹介します。
- CSSフレームワーク Pure を使っている場合（Ver. 5.0 以上 の初期設定）
- CSSフレームワーク Bootstrap 2.x を使っている場合
- シンプルなHTML+CSSコーディングの場合（Ver. 4.9 までの初期設定）
手順
いずれのコーディングの場合も、入力画面用のテンプレート templates/admin/2.html を後述の説明を参考に編集し、設定を変更した上でサーバに上書きアップロードして下さい。
CSSフレームワーク Pure を使っている場合
幅の指定
CSSフレームワーク Pure を使っている場合、入力欄の幅を指定しているのは、「pure-input-1」というクラスです（下記青字部分）。「pure-input-1」を指定すると、表示できる幅一杯（100%）に、入力欄を表示します。
<input class="imeon pure-input-1" type="text" name="subject" id="subject" value="%_subject_%"><textarea class="imeauto pure-input-1" name="body" id="body" rows="10">%_body_%</textarea>変更可能なクラスは下記の通りです。
| クラス | 幅 |
|---|---|
| pure-input-1 | 100% |
| pure-input-2-3 | 66% |
| pure-input-1-2 | 50% |
| pure-input-1-3 | 33% |
| pure-input-1-4 | 25% |
日付のように入力される値の幅が決まっている項目に関しては、文字数に応じた em 指定も使えます。下記は、日付用にem で指定されたクラスです。このクラスも使用できます。また、独自のクラスを定義しての指定もOKです。
| クラス | 幅 |
|---|---|
| sugu-input-small | 6em |
| sugu-input-mini | 3em |
高さの指定（<textarea>）
<textarea> の高さは、rows属性で指定して下さい。
<textarea class="imeauto pure-input-1" name="body" id="body" rows="10">%_body_%</textarea>CSSフレームワーク Bootstrap 2.x を使っている場合
幅の指定
CSSフレームワーク Bootstrap 2.x を使っている場合、入力欄の幅を指定しているのは、「input-xxlarge」等のクラスです（下記青字部分）。
<input class="imeon input-xxlarge" name="subject" id="subject" type="text" value="%_subject_%"><textarea class="imeauto input-block-level" name="body" id="body" rows="10">%_body_%</textarea>それぞれ下表の通り初期設定がピクセルで指定されており、幅の狭い端末で画面にこの幅が収まらなくなると幅 100% に切り替わります。
| クラス | 幅 |
|---|---|
| input-mini | 60px |
| input-small | 90px |
| input-medium | 150px |
| input-large | 210px |
| input-xlarge | 270px |
| input-xxlarge | 530px |
| input-block-level | 常に 100% |
高さの指定（<textarea>）
<textarea> の高さは、rows属性で指定して下さい。
<textarea class="imeauto input-block-level" name="body" id="body" rows="10">%_body_%</textarea>シンプルなHTML+CSSコーディングの場合
幅の指定
CSSフレームワークを使っていないシンプルなバージョンの場合、初期設定では HTMLタグの属性を使って幅を指定しています。<input> の場合は size属性、<textarea> の場合は cols属性です（下記例青字部分）。
<INPUT name="subject" type="text" size="80" maxlength="100" VALUE="%_subject_%"><TEXTAREA name="body" cols="60" rows="10">%_body_%</TEXTAREA>これらの属性の値を調整して幅の変更もできますし、これらの属性を削除して、style属性で幅を指定する事も可能です（下記例青字）。
<INPUT name="subject" type="text" style="width: 30em;" maxlength="100" VALUE="%_subject_%">高さの指定（<textarea>）
<textarea> の高さは、初期設定では HTMLタグの rows属性で指定してあります。この属性をそのまま使って高さの調整ができます。また、style属性で高さを指定する事も可能です（下記例赤字）。
<TEXTAREA name="body" cols="60" style="height: 500px;">%_body_%</TEXTAREA>