2011年6月27日

Movable Type 5.1xのリスト画面のカラム幅を変更する

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

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

変更前
変更前

変更後
変更前

1.デフォルトの動作

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

記事タイトル系

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

カウント系

.col.num {
    width: 10%;
}

その他

.col {
    width: 13%;
}

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

2.カラム幅を変更する

カラム幅を変更するには、各カラムに対して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;
}

3.特定のリスト画面のみを指定する

2項の設定では、すべてのリスト画面の同じカラムに適用されます。特定のリスト画面のみに適用させたい場合は、次のように「.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属性値になります。

ソースの表示

4.注意事項

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

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3