ログインしていません。
>日本版Geeklogにも言えることなのですが、すべてのタグそのものに影響を及ぼすCSSってなくせないものでしょうか?
これは悩ましいところですね ![]()
element.cssの共通のスタイル指定をなくしてしまうと、部分ごとにそれぞれ個別に指定することになります。導入するプラグインなどが少ない場合はこちらのほうが楽でわかりやすいんですが、プラグインなどが増えれば増えるほどスタイルの指定が膨大になってしまいます。
ProfessionalCSSのCSSファイルを見るとわかるのですが、ProfessionalCSSがこのタイプに近いです。
XHTML(XML宣言あり)で影響を受けるのはIE6だけなので、こつを掴めばそれほど問題ないかもです。よくわからない場合は、おかしくなる部分で以下のような感じにすると大概直りますのでお試しください ![]()
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を流用できるのでお手軽に移植できるかもしれません ![]()
オフライン
すごくたくさんのお手本をありがとうございます!これはすごく参考になりました!!
* > 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のみの編集で見栄えはかなりよくなりました![]()
残る敵はコイツぐらいかなw
layout.css (line 43)
#Geeklog {
font-size:100%;
text-align:left;
}
このtext-alignだけはリセットのしようがなくて困っています。MediagalleryはTDタグにalign指定されていることが多いのですが、text-alignのほうが優先順位が高いようでぜーんぶ左そろえになっちゃいます。上のでは苦肉の策で部分的にセンター揃えにしてますが^^;Unsetしたぃぃぃ
オフライン
>この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: ~"」とかに変換してしまったほうがまだいいかもしれませんね ![]()
オフライン
Thanks to famfamfam.com for some icons(Creative Commons Attribution 2.5).
Copyright© 2007-2007 Revize Geeklog!.