小粋空間: 管理画面アーカイブ

Top ＞ Serene Bach ＞カスタマイズ＞管理画面 [全て開く]

2007年2月16日

IE6 + Serene Bach 管理メニューのユーザビリティを向上させる

February 16,2007 12:17 AM
Tag：[CSS, ManagementPage, SereneBach]
Permalink

Serene Bach の管理メニュー Serene Bach の管理画面左にあるメニューリストを IE6 で操作する時、文字にカーソルを重ねないとリンクが機能しないという不具合があります（Firefox 2/ Opera9 等では正常に動作します）。
本エントリーでは、スクリーンショットのように、IE6 で文字以外の部分にカーソルを重ねた時にリンクとして機能させる方法を紹介します。

１．リンクにならない原因

文字以外の部分にカーソルを重ねてリンクが機能しないのは IE6 のバグのためです。IE7 ではこの問題が修正されています。

CSS実装徹底検証! そこが知りたいInternet Explorer 7：ブロック要素化したリンク範囲が機能するように修正

２．変更方法

lib/resource/ja/style.css をダウンロードし、任意のエディタで開きます。
そしてファイルの一番最後に、下記の 1 行

.mainmenu .menu a:link {
    _width: 100%;
}

を追加してください。

３．注意事項

一般的なお作法として、追加した一番最後の行の末尾 "}" の後ろには改行を入れましょう。
上記リストにある ".menu" の直前の半角空白をなくすと別の場所にあるメニューが崩れます。
width プロパティの前のアンダースコアを外すと Firefox で表示が崩れます（が、IE しか使わないのであれば問題なし）。

Comments [4] | Trackbacks [3]

2006年6月 6日

BigTemplateWindow プラグインでテンプレートを編集する

June 6,2006 1:39 AM
Tag：[MovableType, Plugin]
Permalink

Movable Type 3.3 のリリースが近づいてまいりましたので、以前からエントリーしようと思っていたプラグインを紹介します。

タイトルにある BigTemplateWindow プラグインは、テンプレート編集画面を拡張するためのBigPAPI対応プラグインです。

１．プラグインの主な機能

テンプレート編集画面（別ウィンドウ）で下記のことができます。

HTMLタグ埋め込みボタンと同じような操作でMTタグの埋め込みができます
MTタグを左の折りたたみメニューから選ぶことができます
メニューのMTタグをフォーカスするとツールチップが表示され、タグの解説が表示されます
他のプラグインをインストールしている場合、それらのMTタグも表示されます（ツールチップはなし）
編集画面でTABキーの入力や半角スペースの一括入力ができます
テキストの拡大・縮小ができます。
ウィンドウサイズは可変なのでテキストエリアを自由に広げることができます

２．プラグインのダウンロード

下記のサイトより BigTemplateWindow プラグインアーカイブをダウンロードします。

オリジナル: alogblog's MTy plugins：BigTemplateWindow

日本語翻訳版: caramel*vanilla：[MT3.2]BigTemplateWindow 日本語版

オリジナルは Installation の this plugin のリンクをクリックすればダウンロードできます。また日本語版のパッケージは、caramel*vanilla さんが（配布元の許可を得て）改変くださったものです。

３．プラグインのアップロード

ダウンロードしたプラグインを解凍し、内容を下記の構成になるように、mt.cgi のあるディレクトリにアップロードします。

/plugins/BigPAPI.pl

/plugins/alogblog/BigTemplateWindow.pl

/alt-tmpl/cms/edit_template.tmpl

BigTemplateWindow を使うには BigPAPI プラグイン（BigPAPI.pl）が必要ですが、上記の通りプラグインアーカイブに最初から同梱されています。すでに BigPAPI プラグインをご利用の場合は下の2つだけをアップロードしてください。

メイン・メニュー > システム・メニュー > プラグインで「BigTemplateWindow バージョン xx」が表示されていればOKです。これで利用可能な状態になっています。

４．利用方法

１項に記した機能の一部を、改めてスクリーンショットつきで説明します。

テンプレート編集画面でテンプレート名をクリックすると編集画面が別ウィンドウで開きます。そして左ペインにMTタグやテンプレートのリストが表示されます。

例えば Archive というタイトルをクリックするとアーカイブ関連のMTタグが、Entries をクリックするとエントリー関連のMTタグが表示されます。タグの先頭の「MT」という文字は省略されています。

さらに任意のMTタグをフォーカスすると右上にツールチップが表示されますので、この画面でMTタグの機能を知ることもできます。

表示されたMTタグから任意のタグをクリックすると、カーソルのある位置にタグが挿入されます。MTタグで可能な属性がすべて付与されますので、不要な属性は削除してください。
また、HTMLタグ埋め込みのように、文字列を選択した状態での埋め込みはできません（選択した文字列が消えてしまいます）。

他のテンプレートもこの画面左下のメニューから選択するだけで切り替えることができます。

プラグインのMTタグはメニュー一番上にあります。その下にHTMLタグ挿入メニューがあります（こちらは選択状態で挿入できます）。

Comments [2] | Trackbacks [2]

2005年11月22日

Serene Bach の編集画面を広げる

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

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

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

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

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

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