MovableTypeで作る（初心者）コミュのスタイルシートの管理、デザインについて

こんにちは。Movable Typeの構築を勉強中のものです。

現在、参考書片手にぼちぼちブログを構築していますが、スタイルシートの管理が段々複雑になっていっています。

コメントアウトなどを利用しながらなんとか構築していますが、少し時間を置いて見た後など、どれにどのスタイルが適用されていてどう入れ子になっているのか、判り難くなってきました。

そこで皆さんにお聞きしたいのですが、Movable Typeでサイトをデザインする際にスタイルシートをどのエディタで書かれていますでしょうか？また、どのように管理し、デザインされていますでしょうか？

私はDreamweaver 2004 MX にMovable Typeのプラグインを適用させて管理していますが、デザイン画面ではMTタグを認識してもらえないので、いちいちテンプレートの書き出した「index.html」などのソースをコピーしてデザインを確認しています。ただ、スタイルシートなどのパスを書き換えないとデザインを管理できません（また表示が崩れて見えます）

私自身のスキルは、今までテーブルレイアウトを主体にホームページを作成してきて、スタイルの専門書を読んだこともなく、ただ少しだけ理解できるという程度からMTのデザインに着手しました。HTML言語はほとんど判ります。CGI(Perl)も掲示板くらいなら自分で組めます。

ただ、私のスキルが足らないのか、それとも別の上手な管理方法があるのでしょうか？ぜひご意見くださいませ。

コメント(5)

最初
全て
最新の40件

[1] mixiユーザー 02月13日 20:25

こんにちは…

要はテーブルレイアウトから脱却したいんですね。

３カラム、フッターなしの、ブログでよく見かけるレイアウトで
練習用に作ったものがあったので、添付します。

※注：ヘッダー部分は省略してありますの…

◆参考XHTML

　<body>
　　<div id="container">
　　<div id="banner">
　　　<h1>タイトル</h1>
　　　<p>本文</p>
　　</div>
　　<div id="left">
　　　<h2>タイトル</h2>
　　　<p>本文</p>
　　</div>
　　<div id="content">
　　　<h2>タイトル</h2>
　　　<p>本文</p>
　　</div>
　　<div id="right">
　　　<h2>タイトル</h2>
　　　<p>本文</p>
　　</div>
　</div>
　</body>

◆参考CSS

　/*全体制御*/

　　body {
　　　background-image: url(body_back.gif);
　　　background-position: left top;
　　　background-repeat: repeat;
　　　background-attachment: fixed;
　　　font-size: medium;
　　　margin : 0px;
　　　font-style: normal;
　　　background-color: #FFFFFF;
　　　}

　/*文字色制御*/

　　.white {color: #FFFFFF}

　　.red {color: #FF0000}

　/*強調と、より強調の制御（斜体を太字に、太字を一回り大きな太字に変更）*/
※<em>は正しい使い方として強調したい文章に使用し、さらに強調したい場合に<strong>を使用するとのことなので下記のスタイルを設定してみた。

　　em {
　　　font-weight: bold;
　　　font-style: normal;
　　　}

　　strong {
　　　font-weight: bolder;
　　　font-size: larger;
　　　}

　/*コンテナ制御*/

　　#container {
　　　width: 780px;
　　　margin-top: 0px;
　　　margin-left: auto;
　　　margin-right: auto;
　　　padding: 0px 0px 10px;
　　　background-color: #FFFFFF;
　　　margin-bottom: 0px;
　　　}

　/*ヘッダー制御*/

　　#banner {
　　　width: 760px;
　　　background-image: url("banner_back.gif");
　　　padding: 10px;
　　　height: 100px;
　　　}

　/*左ブロック制御*/

　　#left {
　　　float: left;
　　　width: 160px;
　　　margin-left: 0px;
　　　padding: 10px;
　　　border-top: solid 0px #79ADD3;
　　　border-left: solid 0px #79ADD3;
　　　border-right: solid 0px #79ADD3
　　　border-bottom: solid 0px #79ADD3;
　　　}

　/*中央ブロック制御*/

　　#content {
　　　float: left;
　　　width: 398px;
　　　padding: 10px;
　　　border-top: solid 0px #79ADD3;
　　　border-left: solid 1px #79ADD3;
　　　border-right: solid 1px #79ADD3;
　　　border-bottom: solid 1px #79ADD3;
　　　}

　/*右ブロック制御*/

　　#right {
　　　float: left;
　　　width: 160px;
　　　margin-right: 0px;
　　　padding: 10px;
　　　border-top: solid 0px #79ADD3;
　　　border-left: solid 0px #79ADD3;
　　　border-right: solid 0px #79ADD3;
　　　border-bottom: solid 0px #79ADD3;
　　　}

スタイルシートは適当に数値を入れ替えて使ってください。

テーブルを使わないレイアウトを行うには、IDの使い方の理解が必要かと思います。

私はまず、デザインが決まったら…
大まかなブロックにID名をつけます。
＃ID利用は最小限にとどめます。

最初は秀丸エディターでXHMLファイルと
CSSファイルを書きます。

まずIDを反映されたXHMLを書き…
次にIDのみのCSSファイルを書きます。
＃実は正しいXHMLを書けることが重要です。

それを、Dreamweaverに読み込ませて…
Dremaweaverで細かい制御を行います。
＃クラスエディター、タグエディターとして使います…ｗ

IDの使い方を理解するなら…

Movable Typeスタイル&コンテンツデザインガイド―コンテンツ管理システム(CMS)ツールとしてのMovable Type活用術&実践サイトデザイン術
エ・ビスコム・テック・ラボ (著)
http://www.amazon.co.jp/exec/obidos/ASIN/4839915954/ref=pd_huc_gp_ss_5/249-7404873-6035554?%5Fencoding=UTF8

か…

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
益子貴寛 (著)
http://www.amazon.co.jp/exec/obidos/ASIN/4798010928/qid=1139829061/sr=1-1/ref=sr_1_10_1/249-7404873-6035554

を読まれると、IDの使い方がよくわかりますよ。

なお、スタイルシートについて学びたいならば…
下記のコミュをお勧めします。

CSSテクニック
http://mixi.jp/view_community.pl?id=15544

頑張ってください。

適当に書いたXHMLとCSSですので、間違いありましたら、他の方訂正願います。

[2] mixiユーザー 02月13日 21:04

私はMTのテンプレート編集画面で書いてます。

スタイルシートは作り込んでいくと、
複雑になってしまって何がなんだか
わからなくなってしまいますよね。
一度、設定したスタイルを、後の方でまた、上書きしてあったり．．．。

スタイルシートの管理というわけではないですが、
最近は、HTMLの文書構造をきちんと書くことが
スタイルシートの整理整頓にもつながるかな？と思っています。
そうすることで、無駄なスタイルの設定を減らせるのではと思います。

[3] mixiユーザー 02月14日 00:04

Dakinyさん＞
たかはしさん＞

コメントありがとうございます。
XHMLというものがあるんですねぇ。初めて知りました。

HTML、スタイルシート、どの言語でもそうですが
すっきりまとめて、誰にでも簡単に引き継ぎできるような
デザインを考えているんですけど、とても参考になりました。

とくにDakinyさんの紹介してくださった練習用のソースは具体的で、とても判りやすかったです。教科書だけにとらわれず、いろいろ見やすいよう工夫していこうと思います。

[4] mixiユーザー 02月14日 06:56

>私はDreamweaver 2004 MX にMovable Typeのプラグインを適用させて管理していますが、デザイン画面ではMTタグを認識してもらえないので、いちいちテンプレートの書き出した「index.html」などのソースをコピーしてデザインを確認しています。

私はDWでテンプレートデザインをやっていますよ。MTタグのプラグインをDWにいれています。
http://www.macromedia.com/jp/devnet/dreamweaver/articles/movable_type_3.html

確かに多少予想したものとかわりますが、DWのテンプレート機能を使えるのは効率上かなり便利だと思います。MTの管理画面でちまちまタグを打ってるなんてもうやってられません。

>ただ、スタイルシートなどのパスを書き換えないとデザインを管理できません（また表示が崩れて見えます）

そういうときはDWの機能にあるデザインタイムスタイルシートの機能を使いましょう。もしくはMTタグをいれないでトップルートからの記述にしたりしています。

もちろんCSSファイルも外部取り込みにして編集はほとんどDWですね。

[5] mixiユーザー 02月16日 22:38

あきら@坊主頭＞

お返事遅くなってすみませんでした。
デザインタイムスタイルシート、使ってみましたが便利な機能ですね！
MTの編集作業が相当楽になりそうです。

ご指導ありがとうございました。

ログインすると、みんなのコメントがもっと見れるよ