入力欄のサイズ変更方法

「すぐ使えるCMS」入力画面の入力欄のサイズを変更する方法をご紹介します。

入力欄のサイズは、適度な大きさに設定しておくと「望みの入力量」をそれとなく指定できる他、カスタム項目を追加して項目が増えた場合には、入力欄の間違いを防ぐ効果もあります。

対象製品

全ての「すぐ使えるCMS」(旧「すぐ使えるCGI」)製品

入力欄のサイズ変更方法の概要

コーディングの方法

入力欄のサイズ変更は入力画面用のテンプレートを編集して調整しますが、初期設定のテンプレートによって、具体的なHTMLコードが異なります。このページでは、下記のパターンに分けてコーディング例をご紹介します。

  1. CSSフレームワーク Pure を使っている場合(Ver. 5.0 以上 の初期設定)
  2. CSSフレームワーク Bootstrap 2.x を使っている場合
  3. シンプルな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-1100%
pure-input-2-366%
pure-input-1-250%
pure-input-1-333%
pure-input-1-425%

日付のように入力される値の幅が決まっている項目に関しては、文字数に応じた em 指定も使えます。下記は、日付用にem で指定されたクラスです。このクラスも使用できます。また、独自のクラスを定義しての指定もOKです。

クラス
sugu-input-small6em
sugu-input-mini3em

高さの指定(<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-mini60px
input-small90px
input-medium150px
input-large210px
input-xlarge270px
input-xxlarge530px
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>

関連記事

小規模Webサイト向け「すぐ使えるCMS」のサポート情報。管理画面にロゴを入れる、ヘッダ・フッタを入れる、JavaScript を追加するなどのカスタマイズが可能です。

関連コンテンツ