Movable Type 備忘録
アレンジ・テンプレート５
- Prev Page: アレンジ・テンプレート４
- Next Page: アレンジ・テンプレート６
新年あけましておめでとうございます。
昨年は大変お世話になりました。本年もよろしくお願い致します。
さてさて!! 昨年はCSSやXHTMLさえも分からず、いろんな意味でビギナーの年でしたが、今年はLEVEL UP!! して「わたしらしいテンプレート」というものを見出していこうと思っております。
初心を忘れずにいろんなことにTRYしていくつもりです。
さっそくですが、新年のごあいさつだけってのも寂しいので、作成中の作成したテンプレートを見てあげてください。
新年ということで、色合い的に紅白!? にしてみた、2カラムのテンプレートです。
久々のリキッド・レイアウトにしております。
このテンプレートではイメージの固定に、初めてposition: absoluteによる絶対配置ってのをやってみました。
わたし的には絶対配置ってのは好きじゃなかったのですが、どうしても使わざるを得なかったのでしょうがなく･･･ってかんじですかね。
しかもIEだと(IE7も含めて)不具合があるようで、うまく配置できなかったりするので、いつものように変な小細工してます。
なので、IE系のブラウザ(Sleipnirなど含む)では表示が崩れるということはないですが、微妙にFirefoxなどのモダンブラウザとは異なった表示になってます。
では。
テンプレートの設置について
差分ファイルの設置については、まずベースにしたベーシック・テンプレートを設置していただいてから、こちらのブログを上手に運用する２を参考に差分ファイルをアップデートすれば完了です。
差分ファイルのダウンロードは以下から入手してください。
bzbell-customize5-pink.zip
bzbell-customize5-blue.zip
bzbell-customize5-green.zip
bzbell-customize5-white.zip
修正履歴
Trackback Pings(0)
No trackbacks found.
Comments(4)
Post a Comment
-
Movable Type 5 をベースにされてる技術本です。
ある程度 Movable Type に慣れてる人をターゲットとしたテクニカルな内容が記載されてますのでステップアップにいいかも。Movable Type 4 をサポートしてる書籍です。
これから始める人にはもちろんのこと、Movable Type を既にお使いの人でも一度読んでみるといいかもです。 -
- Loading...
- 私を登録 by BlogPeople
bzbellさん、こんにちは！
今リニューアル中で、このテンプレートをお借りしました。
そしてCSSをまだ完全に理解していない私。。。
質問してもよろしいですか？？？(●￣▽￣●;)ゞぽりぽり
このテンプレの左サイドバーの幅を広げて、
タイトルとナビバーのあるバナー部分をもう少し狭めるには
どこを修正すればいいのでしょうか？出来ますか？
お手数ですがよろしくお願いしますペコリ(o_ _)ｏ))
ドライアイ、私もですよ～辛いですよね。
結婚する前、PC関係の仕事でしたがやはり
目が乾き痛み、痙攣して嫌な思いをしました。
目は冷やすより温めた方がいいですよ。
蒸しタオルを乗せてゆっくりリラックスが一番です。
無理せずご自愛下さいね（*^_^*）
>>1 ぷーこ さん
こんにちわ^^
> このテンプレの左サイドバーの幅を広げて、タイトルとナビバーのあるバナー部分をもう少し狭めるにはどこを修正すればいいのでしょうか？出来ますか？
はい。
このテンプレートでは今までのテンプレートと違って、唯一絶対座標でのレイアウトを一部行っています。
まず、本文の左側に空白を作ってあげます。
具体的には以下の箇所を変更してあげることで左余白が作成できます。
38行目 body.layout-two-column-liquid-rightbody div#blog { margin: 0 0 0 320px; <-- ヘッダ(310px)＋マージン(10px)分の空白を作ってあげます } 75行目 div#header { width: 310px; <-- ヘッダ幅 } 109行目 div#navibar { width: 320px; <-- ナビバー幅 }本文左余白(320px) = ヘッダ幅(=310px)＋マージン(10px)
本文左余白(320px) = ナビバー幅(=320px)
となっていますので、お好みの幅で計算して調整します。
left:、top: で絶対座標を指定してますので、合わせて調整します。
左サイドバーの幅を広げるには以下の場所になります。
49行目 body.layout-two-column-liquid-rightbody div#sub { width: 200px; <-- 左サイドバーの幅 } 以下を追加します。 body.layout-two-column-liquid-rightbody #side-leftbox, body.layout-two-column-liquid-rightbody #side-rightbox { width: 200px; <-- 上記幅と同じにする }左サイドバー幅はヘッダ幅などと無関係に幅調整できます。
また、それに合わせてサイトの背景イメージ(site-body-2column.jpg)を作成する必要があります。
わたしの方で作成して欲しいものがあれば遠慮なく言ってください (￣∇￣)/
> 目は冷やすより温めた方がいいですよ。
> 蒸しタオルを乗せてゆっくりリラックスが一番です。
なるほど。アドバイスありがとうございます (m;_ _)mペコ
早速のレスありがとうございます(^人^)感謝♪
そうか、幅をいじるとsite-body-2column.jpgが合わなくなりますね。
分かりました、ちょっと色々試してみます！
IE６だと固定配置が反映されないんですね(ノ_・、)
Firefoxだと見栄えがいいのになぁ。
ブラウザの規格を統一して欲しいですね。
>>3 ぷーこ さん
> IE６だと固定配置が反映されないんですね(ノ_・、)
そうなんです。
IE6では固定配置(position: fixed)が対応されてないんです (´･д･`)
IE6はダメダメなブラウザなんです (´Д｀；)