読者です 読者をやめる 読者になる 読者になる

MovableTypeのスタイル変更とpage_layout,page_columnの関連

[デザイン]->[スタイル]にスタイルを変更できるところがある。これは要するにhtmlを変更せずにスタイルだけ変更することで見た目を変えることができるようになっている。

管理画面から変更すると、テンプレートのスタイルシート(styles.css)が変更になる。

もともと、

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);

だったものが、

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/foo/bar/mt-static/themes-base/blog.css);
@import url(/foo/bar/mt-static/themes/cityscape-portland/screen.css);
/* end StyleCatcher imports */

のように変わる。出力されているstyles.cssも上記に変更になるわけだ。

で、管理画面の[デザイン]->[スタイル]で表示されるようになるには、mt-static/themes/スタイル名/ 配下に、

  1. screen.css
  2. thumbnail-large.gif
  3. thumbnail.gif

が必要で、screen.cssはコメントも倣って書く必要がある。ちなみに名前などはasciiで。日本語だとエラーになった。

このスタイルシートのコメント中に

layouts: layout-wtt, layout-twt, layout-wt, layout-tw

というところがあり、これをもとに、サイドバーの3カラムか2カラムかを前述の管理画面で選択できる。

ここ選択したものがmt変数のpage_layout値となり、この値により、page_columns=(2|3)となるのであろう。