DotNetNuke 対応ホスティングサービスに、「at link 専用サーバサービス」を追加
DotNetNuke.jp 掲示板は、すべての DotNetNuke ユーザーのための情報共有の場です。単に質問・回答の場ではありませんし、回答義務もございません。運営メンバーも含め、DotNetNuke を日々学んでいる状況です。質問をする場合は、まずインターネットなどで自分自身でお調べいただき、その情報を共有する事をこころがけてください。
お世話になります。
スキンの作り方がだいたい分かってきて、色々なスキンを作っているところです。そうなると欲が出てくるもので、スキンが増えるて管理が大変になるのを軽減するため、同じレイアウトで色が違うだけのスキンは一つのスキンにまとめてしまおうということを考えました。
ヘッダやフッタ、あるいはコンテナが色違いなだけなら難しくないのですが、背景色あるいは背景画像の場合にどうしたらよいものが悩んでいます。
というのも、DotNetNukeではスキンを作る際に、htmlやbodyタグを除去してからアップロードしないといけません。ということは、bodyタグにidやclassをふってスタイルを指定するということができないということになります。
ソースを見るとbodyタグには固定でid="Body"が割り当てられており、サイト設定内のスタイルシートエディタに記述すればどうにでもできそうですが、できればスキンレベル、あるいはGUIでCSSなどを知らなくても設定でできるようにしたいものだと考えています。
例えば、サイト設定→表示→body背景という設定もありますが、background-imageのみ指定可能で、background-position, -attachment, -positon, -colorに相当する設定はないようです。 ソースを見るとインラインでスタイルが指定されており、修正も難しそうです。
もう一つの方法として、bodyの直下にdivを設置し、そのdivを高さ100%にして、そこに背景を設定するという方法が考えられます（なお、tableレイアウトは使ってませんのでなしということで）。私もデザインが本職ではないもので、あまりCSSには詳しくありませんが、検索などをしながら試行錯誤したところ、
html, body{ height: 100%; }
/* body直下のdiv */ #page{ height: 100%; }
のように指定すればIEとOperaではページの高さ一杯にdivが広がりますが、Fire Foxではとりあえず広がるものの、ページのスクロールバーが表示される状態ではスクロールが必要なエリアには背景が反映されません。
スタイルの指定でうまく逃げる方法があるのか、それとももっと他によい方法がないかどうか、ご存知の方がいらっしゃいましたらよろしくお願いします。
Bodyにｉｄやclassを振らなくても、｢Body｣に直接スタイルを指定できますよ。
また、固定で振られているid="Body"を利用して、｢#Body｣にスタイルを指定しても、 default.cssの次にスキン用のcssが読み込まれるので、スタイルを上書きすることができると思います。
kyo-koさん、どうもありがとうございます。
ちょっと書き方が分かりにくかったかと思いますが、同じスキン内でbodyに複数の色や背景イメージを設定する方法が分からなかったので質問させてもらいました。body{} や #Body{}によるスタイル指定だと一つしか設定できないと思ったので。
実例を挙げますと、同じスキン(zipファイル)内に赤と青の背景色を持つbodyとヘッダ（div#header）を含む二つのファイル（skins/red.html, skins/blue.html）を用意すると仮定します。
ヘッダの背景色の方は両ファイルにて
<div id="header" class="red"></div>
<div id="header" class="blue"></div>
としておいて、CSSの方で、
#header.red{ background-color: red; }
#header.blue{ background-color: blue; }
とやっておけば色を変えることができると思いますが、bodyの方は、両ファイルで共通ですし、class指定を追加することもできないので、どうしたらよいのか困ってしまいました。代替の方法として、先の質問で挙げたdivのheightを100%に広げて背景を指定する方法か、またはサイトの設定でもう少し細かな背景の設定ができればOKなのですが・・。
何かよい方法があるようであればアドバイスいただけたらと思います。
失礼しました。
それでは、やはり最初にご提案された、DIVで括る方法で、 body直下のdiv を
#page{ min-height: 100%;} にしてみてはいかがでしょうか？これならFirefoxでも表示されると思うのですが･･･。
kyo-koさん、どうもありがとうございました。できました！
実は、以前にこのmin-heightを使ったもっと複雑なCSSハックのテクニックを検索で見つけやってみたことがあるのですが、そのときは効果が無くて、少し古い情報のようだったので最新のFireFoxには効果がないのかとがっかりしていたのですが、もっとシンプルにできたのですね。素晴しい！
これができると色の数だけスキンを作らないといけなかったのが、大幅に削減できるので大変助かります。
どうもありがとうございました。
解決したと思ったのですが、よくよく確認すると今度はIEの方で背景が100%にならなくなってしまいました。うーん、困った。
ということで、試しに
min-height: 100%; height: 100%;
と同時に指定してみましたが、これだとIEはOKですが、FireFoxが元に戻ってしまいます。
IEにはheight: 100%、FireFoxにはmin-height: 100%のみを認識させればよいのでしょうが、どうすれば？？と考えながら検索してみると、こういうページを見つけました。
http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html
ここに書いてある通り、
min-height: 100%; height: auto !important; height: 100%;
とやってみたところ、見事にできました。今回は全パターンで確認したので大丈夫だと思います。kyo-koさんアドバイスありがとうございました。
ということで一件落着ですが、これはこれとして、DotNetNukeのサイト設定メニューにある背景の設定はもう少し改良してもらえるとありがたいですね。
現在は画像を指定することしかできませんので使い方が限られてしまいますが、色、繰り返し、位置とかが指定できるようになるとカスタマイズ用のシンプルなスキンを提供しておいて、ユーザが背景色を変えたりとかいろいろとカスタマイズができるようになります。
中途半端な回答ですみません･･･。 IE6以下はmin-height使えないんですよね。 アンダースコアハックを使ってやったこともあるのですが、 やはり不正書式なので、あまり使いたくないなと思っていました。 上記のやり方を参考にさせていただきます。 こちらこそありがとうございました。