Serene Bach の編集画面を広げる

Serene Bach の編集画面を広げる

Posted at November 22,2005 11:55 PM
Tag:[2.03R, Customize, SereneBach, Textarea]

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

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

Movable Type では、

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

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

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

1.1 Entry.pm を変更する

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

lib/sb/Admin/Entry.pm

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

sub BODYROW_STD  (){ 1530 };

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

1.2 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>

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

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

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

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を使用していない場合は一番下の変更は不要です。

3.横幅をひろげる(記事・テンプレート共通)

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

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

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;
}

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

lib/resource/ja/template.html

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

4.フォントサイズを変更する

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

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

テンプレート変更 from てぃあら
MT でもお世話になっている 小粋空間 さんの SereneBach 2.03R用テンプレート をいただいてきた。MT で 見慣れ、使い慣れてる 3カラムリキッ... [続きを読む]

Tracked on December 1, 2005 2:16 AM

Serene Bach の編集画面を広げる from neige essai
前からやろうやろうと思っていたのですが、なかなかやりだせなかったカスタマイズがようやく出来ました!Serene Bach 管理画面にある、新規記事・テンプ... [続きを読む]

Tracked on July 6, 2006 5:58 PM

Serene Bach の編集画面を広げる<小粋空間 from smile:::blog**
小粋空間さまのSerene Bachの編集画面を広げるを参考にしてやってみました。テキストエリアの縦および横幅がひろがりました。行の折り返しが減り... [続きを読む]

Tracked on March 17, 2007 11:26 AM

ちょこちょこカスタマイズ from こっそりこそこそやってます
外は雨。 特にやることもないのでSereneBachのカスタマイズに手を付けました。 とはいっても、プラグインは入れるだけ入れて特に追加する物もありません... [続きを読む]

Tracked on March 25, 2007 2:55 PM
コメント

すいません。
↑のコメントは、
訪問先を勘違いしてコメントしてしまいました。
お手数かけますが、削除してくださいませ。
本当に失礼しました。すいません・・。

[1] Posted by marubeg : November 23, 2005 5:41 PM

>marubegさん
こんにちは。
コメント削除しておきました(2つめは残してますが…)。
お気遣いなく。

[2] Posted by yujiro : November 24, 2005 3:59 PM

こちらも、参考にさせていただきました。
やっぱ チマチマより、広々としてるのがいいですね。

[3] Posted by さえら : December 1, 2005 2:15 AM

>さえらさん
こんにちは。
早速のご利用ありがとうございます。

狭い画面には戻れません(笑)。

[4] Posted by yujiro : December 2, 2005 12:43 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)