MT4.27 #5 デザインの変更

スタイルを選択から、cityscape_tokyoを適用した場合

一瞬で見た目が変化するので、何かスゴそうですが、実はｍｔの場合、単にスタイルシートの読み込み先を変えているだけですから、これ自体は目新しいものではなく、たいしたことではありません。

MT4でのスタイルシートの配置

例えばデフォルトのスタイルであるMinimalist Redが適用してある時、どのスタイルシートが使われているかは、以下でわかります。

既定のスタイル/Minimalist Red を適用してある場合

デザイン/テンプレート/スタイルシートの内容で確認

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(http://-blogurl-/mt/mt-static/themes-base/blog.css);
@import url(http://-blogurl-/mt/mt-static/themes/minimalist-red/screen.css);
/* end StyleCatcher imports */

またMT 4 スタイルライブラリから選択した場合は違うディレクトリが使われていました。表示に時間がかかることから、選択時にダウンロードされmt-static/support/themesに保管されるようです。

MT 4 スタイルライブラリ/Cityscape Austin を適用した場合

デザイン/テンプレート/スタイルシートの内容で確認

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(http://-blogurl-/mt/mt-static/themes-base/blog.css);
@import url(http://-blogurl-/mt/mt-static/support/themes/cityscape-austin/cityscape-austin.css);
/* end StyleCatcher imports */

独自のスタイルシートを使うには

デザイン/テンプレート/スタイルシートの内容は、上の２つの比較からわかるように、まずhttp://-blogurl-/mt/mt-static/themes-base/blog.cssを読み込み、次にこれよりも優先度の高い２つ目のスタイルシートを読み込みますが、この２つ目のスタイルシートがデザイン/スタイルの設定によって変わっていることがわかります。

独自のスタイルシートを使うには
http://-blogurl-/mt/mt-static/themes/
http://-blogurl-/mt/mt-static/support/themes/
このどちらかのディレクトリに、たとえばminimalist-redを複製しリネームするなどして、その中のscreen.cssを書き直せばオリジナルのCSSセットが使えそうだ、ということがわかります。

このminimalist-redホルダを開けてみると中に入っているファイルは、以下の４つと本当にミニマルな構成でした。

• screen.css
• thumbnail.gif
• thumbnail-large.gif
• header.gif

独自のスタイルシートの作成

独自のセットを作るため、このscreen.cssを書き直し、サムネール用の２つの画像を作成します。これで他のスタイルと同様にデザイン/スタイルから選択できるようになります。

screen.css

minimalist-redのscreen.cssの先頭部分には以下の記述がありました。name: やdesigner:、designer_url:の右側部分、CSS製作者を適当に書き直す必要があります。

/*
 
A Six Apart theme adapted for Movable Type default templates 
name: Minimalist Red  
designer: Lilia Ahner  
designer_url: http://lilia.vox.com 
layouts: layout-wtt, layout-twt, layout-wt, layout-tw
*/

レイアウトの識別一番下のlayouts: layout-wtt, layout-twt, layout-wt, layout-twは、対応する配置を表わしています。wは広いエリア、tは狭いエリアに対応し、例えばlayout-wttなら3段組みの、左から広、狭、狭と配置するという意味です。これらはbodyタグのスタイル属性として使われ、CSSではセレクタ先頭にこれらを使うことで配置に対応しています。 この部分は管理画面でレイアウトの選択肢として表示されますから、特定の配置を削除するとレイアウトの選択で表示されなくなります。
それでは逆にlayout-wwt や layout-wttt などを追加するとどうなるかと言うと、実験ではそのままの文字で表示されましたから、例えば layout-wt　dimension-xyzなどと空白で区切れば複数のクラスを追加できそうです。しかしこの場合、独自のスタイルシートでサポートしない限り意味はありません。

blog.fab51のスタイル

ここでは、これらを踏まえて独自のスタイルシートを作成し、mt/mt-static/themes/　ディレクトリに入れこのブログで使用しています。
デザイン/スタイル/既定のスタイルで、独自のスタイルが表示されるようになり、レイアウトを選び「デザイン適用を押す」これだけでスタイルがオリジナルのスタイルに入れ替わります。

これで公開の準備が完了と言いたいのですが、もう少しあります。