小粋空間  -  a cheap joke and a play on words site

Serene Bach の編集画面を広げる

Serene Bach 管理画面にある、新規記事・テンプレート編集画面のテキストエリアの幅および高さを変更するカスタマイズです。

これはカスタマイズ前のテンプレート編集画面のスクリーンショットです。

こちらがカスタマイズ後のスクリーンショットです。ごらんの通りテキストエリアの縦および横幅がひろがりました。行の折り返しが減り、情報量が増えることで編集作業が楽になります。

Movable Type では、

• Movable Type の編集画面をひろげる
• Movable Type の編集画面を横にひろげる

ですでに紹介していますが、Serene Bach でもやってみました。

１．記事編集テキストエリアの高さを変更する

新規記事および記事リストのテキストエリアの高さを変更します。ここでは2種類の方法を説明します。

１．１ Entry.pm を変更する

ひとつめはライブラリの内容を変更する方法です。下記のファイルをダウンロードし、任意のエディタで開きます。念のためファイルのバックアップはとっておきましょう。

lib/sb/Admin/Entry.pm

このファイルに記述されている下記の部分を検索し（BODYROW_STD で検索するとよいでしょう）、赤色を青色の値に変更します。2.03R では54行目にあります。
リストは 15 から 30 に変更する例を示しています。

sub BODYROW_STD  (){ 1530 };

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。

１．２ entry.html を変更する

もうひとつの方法は管理ページの html （のテンプレート）を変更する方法です。下記のファイルをダウンロードし、任意のエディタで開きます。念のためファイルのバックアップはとっておきましょう。

lib/resource/ja/entry.html

このファイルに記述されている下記の部分を検索し（sb_entry_body_rows で検索するとよいでしょう）、赤色を青色の値に変更します。2.03R では93行目にあります。
リストは 30 に変更する例を示しています。

<textarea name="entry_body" id="entry_body" rows="{sb_entry_body_rows}30" cols="40" class="text">{sb_entry_body}</textarea>

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。

２．テンプレート編集画面の高さを変更する

テンプレート編集画面のテキストエリアの高さを変更します。下記のファイルをダウンロードし、任意のエディタで開きます。

lib/resource/ja/template.html

このファイルに記述されている下記の部分を検索し、赤色を青色の値に変更します。2.03R では 78?122行目にあります。
リストは 20 から 30 に変更する例を示しています。

<dt class="note"><label accesskey="m" for="template_main">ベースHTMLテンプレート<span>[M]</span></label></dt>
<dd><textarea name="template_main" id="template_main" rows="2030" cols="40" class="text">{sb_temp_main}</textarea></dd>
　　　　　　　　　　　　　　　　　　：
<dt class="note"><label accesskey="s" for="template_css">CSSテンプレート<span>[S]</span></label></dt>
<dd><textarea name="template_css" id="template_css" rows="2030" cols="40" class="text">{sb_temp_css}</textarea></dd>
　　　　　　　　　　　　　　　　　　：
<dt class="note"><label accesskey="e" for="template_entry">個別エントリー用HTMLテンプレート<span>[E]</span></label></dt>
<dd><textarea name="template_entry" id="template_entry" rows="2030" cols="40" class="text">{sb_temp_entry}</textarea></dd>

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。
横幅を広げる時の cols 属性も指定されていますが、スタイルシートの設定が優先されるため、ここを変更しても効果はありません（横幅の変更方法は後述します）。また個別エントリー用HTMLを使用していない場合は一番下の変更は不要です。

３．横幅をひろげる（記事・テンプレート共通）

記事編集画面およびテンプレート編集画面の横幅をひろげます。この変更を行うと管理ページすべてのヘッダの横幅が広くなりますが、テキストエリア部分のみ横幅を広げているので、他のページのテーブル等はひろがりません。

下記のファイルをダウンロードし、任意のエディタで開きます。念のためファイルのバックアップはとっておきましょう。

lib/resource/ja/styles.css

このファイルに記述されている下記の部分を検索し、赤色を青色の値に変更します。2.03R では 177行目辺りおよび 273行目にあります。
リストは横幅を 200px ひろげる例を示しています。

div.body {
/* except MacIE \*/
    clear: both;
/* end for MacIE */
    width: 700px900px;
    margin: 5px 0px 0px 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    background-repeat: repeat-y;
}
　　　　　　　　：
　　　　　　（中略）
　　　　　　　　：
dl.mainform dd textarea.text {
    width: 520px720px;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-width: 1px;
}

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。 変更が反映されない場合は、キャッシュにデータが残っている可能性がありますので、２項で変更した

lib/resource/ja/template.html

の cols 属性（例えばベースHTMLの部分）の値を一旦変更してみてください（スタイルシートの変更が反映されたら元に戻してください）。

４．フォントサイズを変更する

フォントの関係でテンプレート編集画面等は改行が結構頻繁に入ります。先のスタイルシートに青色の

dl.mainform dd textarea.text {
    width: 520px;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-width: 1px;
    font-size: 12px;
}

を追加すればフォントがやや小さくなり、改行が減るので見やすくなるかもしれません（画面の大きさもあるので一概には言えませんが）。

どのカスタマイズも値を色々試してみて、ご自身が使いやすいものを設定しましょう。