スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-) | [編集]

【MTメンテ】デザイン変更箇所メモ

スタイルシートとMain-indexのテンプレートタグをいろいろいじくるうちに、元の原型をかなーり破壊してしまいました。これだとバージョアップや入替時にどこに何を書いたかわからなくなってしまう。



仮設置したディレクトリ構成も気に入らなかったので、ディレクトリ構成からやり直しました。
2回目は一からタグを書き直し。
1回目に見よう見真似であーだこーだ触ったおかげで、CSSの書き方がかなりわかってきました。
特に「id」と「class」の使い方がわかったのが収穫です。
今度はなるべく元の原型を破壊せず残した上で、自分なりのタグを追加してみました。忘れないように、Movable type3.0の全体的な配置のメモと、追加した部分を抜き出して見ます。


■全体・・・「id=#container」
・「#container」ではなく、bodyの方に背景画像を設定。そうすると「#container」の外に背景を表示できる。

■上部分・・・「id=#bar」
・<h1>ウェブログのタイトル
・<h2>ウェブログの説明
・「#bar」のリンク色は白。

■上部分2・・・「id=#menu」
・新規に作成した部分。ホームページのメニューを表示する箇所とする。背景画像指定。
・「#menu」のリンク色はグレー。

■下部分全体・・・「id=なし」
・3カラムにするCSSのタグがわからず、新規に<table>タグを使って3列のテーブルを作成した。
 1列目・・・「id=#left」を新作成。「class=.sidebar」とし、左右の統一をはかる。
 2列目・・・「id=#center」を配置。「class=.content」。
 3列目・・・「id=#right」を配置。「class=.sidebar」。
・「.sidebar」と「.content」では、見出し下の文章配置位置に「div class=.box」をこまめに書き加えた。というのも文章表示部分を、見出しより引っ込めたかったので。特にpadding-bottomは80pxとっている。

■下部分1(真ん中のカラム)・・・「class=.content」
・<h2>日付。
・<h3>記事タイトル。
・<p class=posted>コメント/トラックバックなどのリンク表示部分。
・「.content」のリンク色は青色。

■下部分2(左右のカラム)・・・「class=.sidebar」
・左の一番上にカウンタ表示用の「class=.counter」を新規作成。sidebarの中でここだけ毛色が違うのです。
・右の「#calendar」を非表示にするタグを記述。(カレンダーの表示が不必要だから)
・「.content」のリンク色は緑色。

■アーカイブファイル
・「id=#container」の部分を「id=#archive」と書き直して、幅指定「width=600px」とした。



<補足>
あとCSS変更に役立ったサイトを以下にメモ。

PurpleMoon blog
・・・MovableType3.01の3カラム用テンプレート配布先です。 「最近のコメント」「最近のトラックバック」「カテゴリ(カテゴリ登録数)」のタグがすでに組み込まれていました。ラクチン。

ブログレンタルサイト「JUGEM」
・・・スタイルシート講座がわかりやすい。ここのおかげで「id」と「class」の違いや「float」の使い方がわかりました。

とほほのWWW入門
・・・基本。

すちゃらかCSS素材集 MT用CSS変更方法マニュアル
・・・MovableType3.0には今のところ未対応とのこと。でもテンプレートファイルの意味がここでわかりました。

ブロッグ崩し MTカスタマイズ リンク集
・・・便利!
スポンサーサイト
□MovableTypeメンテ | 【2004-08-21(Sat) 22:03:35】 | Trackback:(0) | Comments:(0) | [編集]
コメント
コメントの投稿


管理者にだけ表示を許可する

トラックバック

この記事にトラックバックする(FC2ブログユーザー)


Copyright © でたらめKnitting+@ All Rights Reserved. Powered By FC2. 
skin:*cuteblog*    まとめ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。