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

MT5.1xのリスト画面のカラム幅を変更するカスタマイズを紹介します。

下のスクリーンショットでは、公開日・更新日のカラムの幅を広くして、コメント数の幅を狭くしています。

変更前

変更後

１．デフォルトの動作

MT5.1で改善されたリスト画面のデフォルトの動作では、テーブルの各カラムの幅が次のCSSで固定されています。

記事タイトル系

.col.entry, .col.target {
    width: 25%;
}

カウント系

.col.num {
    width: 10%;
}

その他

.col {
    width: 13%;
}

公開日や更新日など、過去の日付のものについて折り返しが発生し、逆にコメントカウントなどはカラム幅が少し余った状態になります。

２．カラム幅を変更する

カラム幅を変更するには、各カラムに対してCSSを設定します。ここではCMSHeadプラグインを利用します。

公開日と更新日のカラム幅を変更するには、次のように設定します。

<style>
.col.head.authored_on,
.col.head.modified_on {
    width:110px;
}
</style>

「.col.head.authored_on」「.col.head.modified_on」というのは、th要素に設定されているclass属性値です。

他のカラムの幅を変更したい場合、「ソースの表示」では探しにくいので、Firefox＋Firebugなどでマークアップを確認するとよいでしょう。

コメントのカウント数の幅を狭くするには、青色部分を追加します。

<style>
.col.head.authored_on,
.col.head.modified_on {
    width:110px;
}
.col.head.comment_count {
    width:60px;
}
</style>

th要素に設定されている他のclass属性値を使えば他にも設定方法があるかもしれません。日付系については、以下の設定でまとめて変更できそうです。

.col.head.date {
    width:110px;
}

３．特定のリスト画面のみを指定する

２項の設定では、すべてのリスト画面の同じカラムに適用されます。特定のリスト画面のみに適用させたい場合は、次のように「.list-entry」を追加します。

<style>
.list-entry .col.head.authored_on,
.list-entry .col.head.modified_on {
    width:110px;
}
.list-entry .col.head.comment_count {
    width:60px;
}
</style>

「list-entry」はtable要素のclass属性値になります。

４．注意事項

チェックボックスを除いた一番左のカラムはCSSの対象外です。冒頭のスクリーンショットでは「タイトル」は対象外ということになります。

「Movable Type 5.1のリスティングフレームワークで独自管理画面を作る（その1）」のつづきです。

独自管理画面を追加する場合、サイドバーのメニューにも独自メニューを追加していると思います。ということで話が前後しますが、ここでは独自一覧画面を起動するための仕組みとメニューの追加方法を説明します。

１．リスティングフレームワークがリスト画面を表示する仕組み

公式サイトのドキュメントには次のような解説があります。

リスティングフレームワーク

リスティングフレームワークは、 mt.cgi?__mode=list&_type=foo というリクエストに対し、対応するメソッド applications/cms/methods/list_foo が存在しない場合、 レジストリの listing_screens/foo および list_properties/foo から情報を収集して、自動的にリスト画面を生成します。

つまり、メニューをクリックしたときのリクエストが

http://user-domain/mt.cgi?__mode=list&_type=foo

の場合、config.yamlに

applications:
    cms:
        methods: $foo::$foo::list_foo:

などを設定していなければ、config.yamlの

listing_screens:
    foo:
        ...

や

list_properties:
    foo:
        ...

の定義を使って、リスト画面を作成します、ということのようです。

２．リスト画面を起動するリクエスト

１項の解説より、ある決まった形式のリクエストとconfig.yamlにlisting_screensやlist_propertiesの定義が用意されていれば、リスト画面が生成されることが分かりました。

「Movable Type 5.1のリスティングフレームワークで独自管理画面を作る（その1）」のリスト画面を起動するためのリクエストは次のようになります。

http://user-domain/mt.cgi?__mode=list&_type=address

リスト画面を起動する「__mode」の値は常に「list」ということと、「_type」の値にデータソース名「address」を設定することがキモになるようです。

３．config.yaml

あとは、２項のリクエストを生成できるように、config.yamlでメニュー部分を生成します。

hoge:
    label: hoge
    order: 650
hoge:list_address:
    label: List Address
    order: 100
    mode: list
    args:
        _type: address
hoge:edit_address:
    label: New Address
    order: 200
    mode: edit_address