Revize Geeklog!

オープンソースCMS「Geeklog」のテーマ開発・配布サイト

フォーラム

#1 2007-10-15 22:08:32

maruyo
メンバー
登録日: 2007-10-13
投稿: 48
ウェブサイト

element.cssなど

日本版Geeklogにも言えることなのですが、すべてのタグそのものに影響を及ぼすCSSってなくせないものでしょうか?table関係のCSSがどーにもこーにも・・・marginがかなりヤバいっす・゚・(ノД`)・゚・
XHTMLになってますますブラウザでの動作の違いを吸収しづらくなっています。
Mediagalleryでちょろちょろ触って気がついたのですが、テーブルを多用するプラグインの場合テンプレート周辺をかなり書き換えないと移植できそうにないですぅ~

オフライン

 

#2 2007-10-16 01:36:23

maruyo
メンバー
登録日: 2007-10-13
投稿: 48
ウェブサイト

Re: element.cssなど

デモサイトのCSS切り替えのテーブルを参考にしているのですが、なかなか解決の糸口が見えない状況です。このまま闇に葬り去られるのかもしれませんw固定サイズ・1カラムや可変(リキッド)サイズ・1カラムにしてもある程度以上はテーブルサイズが変わらないところを見ると、やはりテーブルは何らかの制限を受けてるのかナァという印象です。
降臨希望w

オフライン

 

#3 2007-10-16 05:04:46

Phize
管理者
登録日: 2007-09-23
投稿: 45
ウェブサイト

Re: element.cssなど

>日本版Geeklogにも言えることなのですが、すべてのタグそのものに影響を及ぼすCSSってなくせないものでしょうか?

これは悩ましいところですね sad
element.cssの共通のスタイル指定をなくしてしまうと、部分ごとにそれぞれ個別に指定することになります。導入するプラグインなどが少ない場合はこちらのほうが楽でわかりやすいんですが、プラグインなどが増えれば増えるほどスタイルの指定が膨大になってしまいます。
ProfessionalCSSのCSSファイルを見るとわかるのですが、ProfessionalCSSがこのタイプに近いです。

XHTML(XML宣言あり)で影響を受けるのはIE6だけなので、こつを掴めばそれほど問題ないかもです。よくわからない場合は、おかしくなる部分で以下のような感じにすると大概直りますのでお試しください cool

IE 6でおかしくなる場合の対策

コード:

div.mediagallery {
  height: 1px;  /* IE 6でおかしくなる場合は高さに1pxを指定 */
}

*>div.mediagallery {
  height: auto;  /* IE 6以外はautoを上書き */
}

ついでに、tableの幅いっぱいに広げたい場合は、以下のような感じでやるとよいかと思います。calendarプラグインのCSSがこんな感じになってます。

tableの幅をいっぱいに広げたい場合

コード:

table.mediagallery {
  margin: 2.5em 2.5%;  /* marginは左 2.5% + 右 2.5%の計5%
  width: 95%;  /* 幅は100% - margin 5%の95% */
}

あと、既存のHTMLがおかしなプラグインを手抜きして移植する方法も書いておきます。まず、プラグイン全体をdiv等で囲むようにテンプレートファイルかPHPを修正します。
そして、このdiv要素の中のスタイルを全部初期化しちゃいましょう。その後で、プラグインの部分ごとにスタイルを個別に指定していくとelement.cssの影響を少し避けられます。

ちょっと楽してプラグインを移植する方法

コード:

<div class="plugin-mediagallery">
(プラグイン本体のHTML)
</div>

コード:

/* element.cssやcommon.cssの影響を受けそうなものを初期化
#Geeklog #Page #Text div.plugin-mediagallery * {
  margin: 0;
  padding: 0;
  border: 0 none;
  color: #000000;
  background: transparent;
  font-size: 100%;
}

/* 必要なスタイルを部分ごとに個別に指定
#Geeklog #Page #Text div.plugin-mediagallery table {
  margin: 2.5em 2.5%;
  width: 95%;
}

#Geeklog #Page #Text div.plugin-mediagallery li {
  padding-left: 20px;
  list-style: none outside;
  backgroun: url(../images/marker.png) no-repeat 0 50%;
}

こんな感じですれば、「プラグインのHTMLを直すのが面倒くさい!」という場合でも、元々のプラグインのHTMLとCSSを流用できるのでお手軽に移植できるかもしれません cool

オフライン

 

#4 2007-10-16 13:41:21

maruyo
メンバー
登録日: 2007-10-13
投稿: 48
ウェブサイト

Re: element.cssなど

すごくたくさんのお手本をありがとうございます!これはすごく参考になりました!!
* > hoge
も考えましたが、むしろFirefoxのほうで困っていたので、下のmarginとwidthの組み合わせでどうにかなりそうです。もともとMediagyalleryのはき出すHTMLにはmgPluginというクラスがあるので、そいつを利用することにしてみました。

コード:

.mgPlugin{
  margin:2.5em 2.5%;
  width:95%;
}
.mgPlugin table
{
  margin: 0;
  padding: 0;
}
.mgPluginMI th,
.mgPluginMI td{
  text-align:center;
}

.mgPluginRow1 .mgPlugin,
.mgPluginRow2 .mgPlugin{
  margin: 0;
  padding: 0;
}

おかげさまでこのぐらいのCSSのみの編集で見栄えはかなりよくなりましたsmile
残る敵はコイツぐらいかなw
layout.css (line 43)
#Geeklog {
font-size:100%;
text-align:left;
}

このtext-alignだけはリセットのしようがなくて困っています。MediagalleryはTDタグにalign指定されていることが多いのですが、text-alignのほうが優先順位が高いようでぜーんぶ左そろえになっちゃいます。上のでは苦肉の策で部分的にセンター揃えにしてますが^^;Unsetしたぃぃぃ

オフライン

 

#5 2007-10-17 20:57:43

Phize
管理者
登録日: 2007-09-23
投稿: 45
ウェブサイト

Re: element.cssなど

>このtext-alignだけはリセットのしようがなくて困っています。MediagalleryはTDタグにalign指定されていることが多いのですが、text-alignのほうが優先順位が高いようでぜーんぶ左そろえになっちゃいます。

IE 6以外なら、

コード:

td[align="left"] {
  text-align: left;
}

td[align="center"] {
  text-align: center;
}

td[align="right"] {
  text-align: right;
}

でいけるはずですが、align属性はあんまりよくないので、「style="text-align: ~"」とかに変換してしまったほうがまだいいかもしれませんね roll

オフライン

 

#6 2007-10-22 01:01:00

maruyo
メンバー
登録日: 2007-10-13
投稿: 48
ウェブサイト

Re: element.cssなど

これはもうあきらめましたw
一番収まりがよさそうなのにあわせるしかないようです。

オフライン

 

ボードフッタ

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson

Thanks to famfamfam.com for some icons(Creative Commons Attribution 2.5).

Copyright© 2007-2007 Revize Geeklog!.