2005年04月29日
MISTA
MovableType対応スタイルシート第二弾。
- バージョン
- 2005.04.28
- 表示確認済ブラウザ
- (Win) mozzila, ie6.0, opera7.5
- サムネイル (Mozilla Firefox)
- ダウンロード
- styles-site_mista.css
- styles-site_mista550.css (fixed)
- styles-site_mista700.css (fixed)
- ダウンロード (付属品)
-
ミスタと呼んでください。まじめな文章も書けるような、ちょっと落ち着いた雰囲気が特徴です。「霧」である「ミスト」から来ているかもしれません。
アクセントとしてPNG画像が使われていますので、MovableTypeルートディレクトリにアップロードしてお使いください。
MISTA通常版ですが、ブラウザの横幅により1ピクセル単位で若干ずれるバグがあります（ブラウザ共通）。相対指定からピクセルへ計算する際の誤差なのですが、気になるという方のために絶対指定版も用意しました。MISTA550は横幅550px(ウィンドウサイズ640pxに対応)、MISTA700は横幅700px(ウィンドウサイズ800pxに対応)です。環境に合わせてお使いください。
投稿者 NOZA : 23:15 | コメント (0) | トラックバック
サンプルページ暫定開始
White Pencilのトップでテストするわけにもいかず、しかし作ったものは実際に動作させてみないと落ち着かないので、テンプレートのテストのためだけにこのページが生まれました。
CSSデザインプロジェクト（2秒で命名）第一弾、MovableType対応CSSです。
さて、テンプレートを作ることになったのはいいものの、ブログ、とくにサーバに設置するMovableTypeとなると、使う人によって用途は千差万別です。カテゴリーの利用の方法も違えば、サイドバーの機能も変わってくると思います。
コンセプトを限定し、機能を整えたテンプレートも魅力ではありました。が、それでは利用できる方、対象が限られてしまいます。MovableTypeに限らず、他のブログサービスへの転用も視野に入れると、あまり思い切ったデザインは無謀と判断しました。
そこで、スタイルシート以外には自分は手を触れず、デフォルト・テンプレートに対応したスタイルシートを書いてみよう、ということになりました。
投稿者 NOZA : 11:54 | コメント (0) | トラックバック
使用方法
（キーボードショートカットはWindowsの例）
- 各スタイルシートをダウンロードし、文書の内容をすべてコピーします（Ctrl+Aで全選択・Ctrl+Cでコピー）。
- MovableTypeの管理画面を開き、「テンプレート」メニューを開きます。
- （初期設定では）インデックス・テンプレートの中の「スタイルシート」を開きます。
- カスタマイズ画面のテキストエリアを先程コピーした文書に上書きします（Ctrl+Aで全選択・Ctrl+Vで貼り付け）。
- 「保存」し、サイトの全体を再構築して完了です。
投稿者 NOZA : 10:43 | コメント (0) | トラックバック
注意点
デフォルト・スタイルと同様、テンプレートのカスタマイズによって使えなくなることがあります。特定の場所を変更しなければ大丈夫です。
特定の場所とは、主にDIV要素によるスタイルコンテナが相当します。
- <div id="container">
- <div id="banner">
- <div id="center">
- <div id="right">
- <div class="content">
- <div class="sidebar">
- <h1>
上記が主にデザインの中枢である要素です。ID名、CLASS名を変更したい場合は、HTMLテンプレートとCSSを照らし合わせ、十分理解してからの作業をお奨めします。
投稿者 NOZA : 10:42 | コメント (0) | トラックバック
simple'n
MovableType対応スタイルシート第一弾。
- バージョン
- 2005.04.28
- 表示確認済ブラウザ
- (Win) mozzila, ie6.0, opera7.5
- サムネイル (Mozilla Firefox)
- ダウンロード
- styles-site_simplen.css
White Pencilスキンシリーズ「simple'n」がブラウザ表示対応！
……と、最初の意気込みはよかったのですが、スタイルコンテナをいじらずそれらしく見せるのに大苦戦。body, #containerのボーダーを使い、サイドバーは絶対配置にするという荒業で実装されています。
かなり大味な出来になってしまったのですが、雰囲気重視のスタイルシートです。同じテーマでもう一作品挑戦するかもしれません。
投稿者 NOZA : 10:41 | コメント (0) | トラックバック
ダウンロード
各デザイン紹介エントリーに、CSSファイルのアドレスが掲載されています。
アドレスを右クリックし、一度名前を付けて保存
するのをお奨めします。そのままコピー＆ペーストでも問題はありませんが、ファイルが欠落するなどトラブルの原因にもなります。
著作権表示は任意です。