オープンソースCMS「Geeklog」のテーマ開発・配布サイト
フォーラム
ログインしていません。
#3 2007-10-17 21:20:03
Re: こいつぁ難しい
>maruyoさん
RevizeのCSSをベースにする場合、既存のelement.cssとcommon.cssはいじらないほうがいいです 
初期状態で定義されているものは基本的なパーツ(共通部分)のスタイルなので、これをあまり大幅に変更すると他の部分に影響が出ます(特に、.navigation, .feedback, .status)。
なので、部分ごとのスタイルはcommon.cssに追加・上書きしていって、あとはlayout.cssで全体のレイアウトを整える感じで作っていくといいと思います。
例えば、記事部分のリスト(li)にマーカー画像をつけたいのであれば、
コード:
div.story-intro ul li {
padding-left: 20px;
background: url(../../image/marker.png) no-repeat 0 50%;
}みたいな感じで、局所的に追加する感じです。
layout.cssはまるまる変えてしまっても大丈夫です。
拡張レイアウトモジュール(css/module/layout.css)に対応させようとすると大変なので、module.cssからコメントアウトしてしまってもいいかもしれません(笑
凝ったデザインの場合は、Revizeのままだときついと思うので、thtmlファイルをいじって新しいクラス名をくっつけるとか、必要なものを付け加えてもらうと良いかもです 
>yu-riさん
こんばんは 
どんどん使ってください(笑
オフライン
#4 2007-10-18 00:20:53
Re: こいつぁ難しい
まさにいまその方法で構築中です！
最初はサンプルのレイアウトをそのままプチ込んで、elements.cssなんかも自前でもってきてRのスタイルをやっつけていく方法でやっていましたが、破綻しましたｗｗｗ
いまはサンプルレイアウトのCSSをうまくR用に合うようにクラス名などはできるだけそのまま流用しCSS側を変更して、衝突するところのみ上書きするような手法でやっています。
だんだんとコツがつかめてきましたよ、旦那！
１５レイアウトに対応させるためのキモは
body.double #Main {
width:75%;
}
なんかの指定をpxじゃなくpersentで温存するとこじゃないですか？！
ヘッダとフッタは画像のサイズなんかの関係でpx指定やむなしかもしれませんが、だいぶつかめてきました！
オフライン
#7 2007-10-18 03:00:57
Re: こいつぁ難しい
ちょっと問題が起きました。
ブロックとブロックの間に隙間を作りたいのですがIEだとmarginのバグででたらめなレイアウトになってしまいます。
そこでblockfooter.thtmlやblockheader.thtmlに<div class="block-spacer"><div>とでも入れて隙間を作ろうかと考えたのですがコイツを吐き出すルーチンをfunction.phpでフックできるように設計されていないようです。
本来なら
コード:
#Secondary #First .utility {
margin-bottom:20px;
}とでもしてやればいいのでしょうが・・・（Firefoxならこれでうまく表示されるのです)
なにか妙案ないですかねー？オリジナルのRevizeにも手を入れれば別ですが＾＾；
http://gl.maryn.jp のsnowflakesテーマで確認できます。
ヘッダの部分からしてmarginバグには悩まされまくりました。
最終編集 by maruyo (2007-10-18 03:02:22)
オフライン
#8 2007-10-18 08:39:59
Re: こいつぁ難しい
おお、これはすてきなデザインですね
IEでおかしいのは、垂直marginの相殺で問題が出てるっぽいですね。
コード:
#Secondary #First .utility
{
padding: 1px 0;
}か
コード:
#Secondary #First .utility {
height: 1px;
}
#Secondary #First>.utility {
height: auto;
}で直ると思います 
コード:
#Secondary #First .utility
{
width: 100%;
}でも直るかもです。
いわゆる、hasLayoutの問題だと思います。
http://coliss.com/articles/build-websit … s/143.html
ちなみに、zoomプロパティを使う方法は、IE 7でおかしくなることがあるので避けたほうがいいです。
オフライン
#11 2007-10-18 22:11:45
Re: こいつぁ難しい
苦労したところは、IEのバグは当然としてブロックメニューの仕切り線です。もともとのテンプレートは<li>に対してBGを貼り付けるようになっているのですが中にあるコンテンツを足がかりに貼り付けています。
ブロックタイトルの直下にはできるだけコンテンツがなくても仕切り線を入れたかったのですがアンケートやカレンダなど実現できなかったものもあります。アンケートの場合はlegendを足がかりにしようと思ったのですが横の長さがテキスト分しかなく長さがハンパだったので断念。カレンダについては直下のコンテンツがテーブルだったのでこれも実現できませんでした。プラグインによって出力されるタグがばらばらなので悩ましいところです。
本来こういう使い方までは想定されていないと思うので、仕方ないとは思いますがご参考までに・・・
オフライン
#12 2007-10-18 22:47:53
Re: こいつぁ難しい
デザイン重視だと全パターンはかなり難しいと思いますけど、それでも何パターンかはいけてますね。とてもいい感じです
>複数のクラスが揃ったときにのみ発動できるCSSの書き方ってないですよねぇ？
IE 6以外のFirefox, Opera, Safari, IE 7だけでよいのでしたら、
コード:
body.fixed.double.normal {
}とかでいけます。IE 6は最後のクラス名以外は無視されます(この場合、body.normalとほぼ一緒の意味になる)。
IE 6だけしょぼい感じにするか(笑)、fixed-double-normal等、新しいクラス名を作ってしまうほうがいいかもしれませんね。
複数クラス名は実験的な面もありますので 
そして、フィードバックありがとうございます。参考になります。
オフライン
#13 2007-10-18 23:34:58
Re: こいつぁ難しい
ふむー
IE6ユーザーはまだまだ多いから無視できない存在ですねぇ
さすがにIE6を捨ててそれ以外対応ってのは、まだちょっと冒険なので、この手のデザインレイアウトに関しては「このテーマはこれとこれとこれ対応」みたいな感じでリリースがベストっぽいですね。
あと、これはGeeklogもともとのものなのですが、静的ページをセンターブロックに表示した場合、通常の記事と同じクラス構成でテキストが吐き出されてしまうので整形に難ありです。
section + section-text - 本文(静的ページ)
|
+ section-text - story-intro - 本文(記事)
story-introと同じようなものを１クッション欲しいです。
.section .section-text でpaddingしちゃうと記事にも影響しちゃうので～
うちのサイトにテーマをUPしておきました。変更したファイルなどの確認用でｗ
最終編集 by maruyo (2007-10-19 00:08:36)
オフライン
#14 2007-10-19 00:27:51
Re: こいつぁ難しい
さっそくダウンロードさせていただきました 
レイアウトについは、各自で決めてもらうのがいいですね。拡張レイアウトモジュール自体、おまけのようなもののつもりでしたし(笑
静的ページは、自分も気になって改善を試みたんですが、ちょっと無理矢理っぽくなってしまったので戻してしまいました。
この辺りは、同じテンプレートファイルが使い回されているGeeklogの難点ですね…。
一応、テーマのfunctions.phpに、
コード:
$_BLOCK_TEMPLATE['_staticpages_centerblock'] = 'blockheader-staticpage.thtml,blockfooter-staticpages.thtml';
と書いておくと、静的ページ用のテンプレートファイルを別に使えるみたいです。
が、静的ページは何が入るかわからないので、デザインするのも難しそうですし、
標準状態ではできるだけファイルを増やしたくないというのがあるので、テーマに合わせて各自で修正してもらったほうがいいかも、とか思ってたりします
P.S.メディアギャラリに笑いました(笑
オフライン
#15 2007-10-19 01:17:06
Re: こいつぁ難しい
そのような方法があったとは知りませんでした。静的ページはPHPも使えるようになっていたり汎用性が高く作られているためできるだけ素の状態になっているのかもしれませんね。
「標準状態ではできるだけファイルを増やしたくない」というのはよくわかります。
今回作成を試みたテーマもRevizeにあるスタイルのかなりの部分を上書きしています。打ち消すためだけのスタイルも発生しているのでかなりわかりにくい構造になっていると自負しています
そこで提案なのですが、基本になるテーマは本当に骨組みになるところまでそぎ落としてRevizeをひとつのカスタマイズテーマとして扱ってみてはどうでしょう？CSS慣れしてくると、むしろ骨組みからのほうがやりやすい気がしてきましたｗ
ちなみに元になるテンプレートはこちらのサイトからの流用です。
CreativeCommon2.5ライセンス
http://www.freecsstemplates.org/preview/snowflakes
#メディアギャラリ気に入っていただけてなによりですｗ
オフライン
Thanks to famfamfam.com for some icons(Creative Commons Attribution 2.5).
Copyright© 2007-2007 Revize Geeklog!.