2018年2月24日

アーカイブ

        

ブログの一覧

        

記事の検索

        

SyntaxHighlighter

最小化
        

最近の記事

最小化

スキンの作成方法【その2】-環境編-

7 3

投稿者:
2008/07/03 6:35  RssIcon

前回お話したように、DotNetNukeではスキンとコンテナが別のデザインファイルとして管理されます。もちろんスキンとコンテナを全く別にデザインしてしまってもよいのですが、やはりサイトとしての統一感を持たせるにはページとしてできあがった姿をプレビューしながらデザインをした方がよりよいものができるというものです。それに、いつか触れると思いますが、できるだけ汎用性のあるコンテナを作成しようとすると、コンテナの幅を指定しない方がよいので、そうした場合にコンテナ単体でプレビューすると画面いっぱいに広がったりしてよく分からなくなってしまいます。従って、実際に適用するスキンの中に入れてプレビューしながら製作をするほうが望ましいといえます。それを行うにはどのように開発用のHTMLあるいはCSSファイルを準備するのがよいのしょうか。一つ考えられるのは、普通のHTMLとしてデザインし、完成後にそれを分離する作業を行うというものです。最初のうちはこの方法が無難だと思います。慣れてきて大量生産する場合には、一つでほとんどのケースに対応できる雛形となる万能スキンファイル一式を用意しておき、それをコピー&ペーストしてスタイルシートを上書きすることでスキンを短時間に作り上げるようにした方が楽でしょう。この連載では後者を意識しつつ、前者の方法でスキンを作っていきます。

次に、ここまで触れていませんでしたが、DotNetNukeのスキンを作る際に重要な注意点がいくつかあります。それは、html, body要素はデザインファイルの中には含めることができないということです。この理由をプログラムの側面から説明すれば、DotNetNukeがhtml, bodyタグを既に用意しており、その中にスキンファイルを埋め込むようなイメージだからです。それは別によいのですが、このことは、bodyタグにclassやidを割り当てるということができないということを意味します(デザイン面では重要ですが、とりあえずここではこれくらいでやめて置きます)。そして、デザイン終了後にhtml, bodyタグを全て除去するという作業があるということでもあります。この作業は結構面倒ですし、繰り返し作成していると、そのうち除去し忘れなんていうミスもよく発生します。(実際のところは除去しなくても問題なさそうです。これは別に触れたいと思います)

このように、デザインを分離する作業と、html, bodyタグを除去する作業をいかにミスが発生しないで効率よく行えるかが今回の内容になります。それでは、以下は、私が製作する上で、一番やりやすいと思った方法を説明したいと思います。なお、私自身も勉強中ですので他によい方法があるかもしれませんし、ツールによっては便利な機能もあるかもしれませんので、そのあたりはご了承ください。

なお、私の環境ですが、Visual Studio 2008のHTML/CSSエディタを使用しています。ただし、CSSについてはプロパティなどビジュアルな設定画面はほとんど使いません。テキストエディタとして使用し、インテリセンス(CSSなどを完全に憶えなくても補完してくれる機能)だけを主に使っているという感じになります。また、HTMLについてもデザインビューはざっくりとした確認として使いますがほぼ同じような位置づけで使っています。

前置きが長くなりましたが、それではまず、フォルダやファイルの階層構成です。ツールについては何でもよいので特に触れません。(Visual Studio 2008を使って、ASP.NETとデザインを共有するのに便利な方法は別に触れたいと思います)
説明しやすくするためにスキン名をsample01とすることにし、まず適当な場所(スキン制作用に用意したフォルダの下がよいでしょう)にsample01フォルダを作成します。次にsample01フォルダの直下に以下のフォルダとファイルを作ります。ファイルの内容はとりあえず適当で結構です。

[フォルダ]
skins:スキンファイルをまとめて入れます。
containers:コンテナファイルをまとめて入れます。

[ファイル]
About.htm:スキンの説明用のファイルです。スキン管理画面で表示されます。必須ではないのでなくても問題ありません。
Test.htm:プレビュー確認用のファイルです。開発時に便利というだけで必須ではないのでなくても問題ありません。
simple01.jpg:スキンのサムネイルイメージです。管理上便利というだけで必須ではないのでなくても問題ありません。

一つスキンを作ってから、ファイルコピーでスキンを大量生産できるようにファイル名などは標準化してしまうことをお薦めします。

次に、サブフォルダの中身です。なお、DotNetNuke 5からは若干変わっていますので、ここで述べることはDotNetNuke 4を対象とします。(4用に作ったスキンであっても5で問題なく使用できます)

[skinsフォルダ]
skin.css:スキン用のCSSファイル
skin.xml:DotNetNuke用の特殊な部品(スキンオブジェクト)の定義
imagesフォルダ:画像を入れます。(画像がなければ削除)
*.html:スキン本体のHTMLファイルで必要な数分作ります。(ファイル名は任意ですが、とりあえず以下の通りとします)
defaulthtml:スキン既定のスキンファイル

[containersフォルダ]
container.css:コンテナ用のCSSファイル
container.xml:DotNetNuke用の特殊な部品の定義
imagesフォルダ:画像を入れます。(画像がなければ削除)
*.html:コンテナ本体のHTMLファイルで必要な数分作ります。(ファイル名は任意ですが、とりあえず以下の通りとします)
defaulthtml:スキン既定のコンテナファイル
left.html:左サイドのペイン用のコンテナ
right.html:右サイドのペイン用のコンテナ
notitle.html:タイトルなしのコンテナ(バナー表示用など)

スキン、コンテナとも既定のファイルをdefault.htmlとした理由ですが、まずどのようなスキンであっても同じように作るという標準化というのが一つ。それから、アップロードしてスキン管理画面で見てみるとわかりますが、default.htmlと名づけたファイルはファイル名としては出てこず、そのスキンの既定のスキン・コンテナファイルとして表示されます。つまりdefault.htmlには管理表示用だけとは言え、特別な意味があるということです。従って、私は通常スキンの既定のスキン・コンテナファイルには必ずdefault.htmlという名前をつけることにしています。

これ以外のスキンファイル名は何でもかまいませんが、私は、トップページ用以外がdefault.htmlで、トップページ用はindex.htmlという感じで名前をつけています。大抵、二つもあれば十分でしょう(汎用スキンは一つの場合が多いです)。コンテナはleft,rightのように挿入位置やnotitleのようなパターンなどで名前をつけています。色の名前でもよいのですが、そうしてしまうとスキン毎に色が違っているのでコピー&ペーストでスキンを量産するということが難しくなってきてしまいます。このあたりはスキンの量産やASP.NETとデザインを共有するためのノウハウなので、一つだけ作る場合には気にせずに好きな名前を付けてください。

とりあえず準備は整いました。次回は具体的にコーディングなども出てきます。

タグ:
カテゴリ:
場所: Blogs Parent Separator DotNetNuke

1 件のコメント


Gravatar

Re: スキンの作成方法【その2】-環境編-

自社のWEBサイトをDNNでリニューアルしようと考えてまして、SKINの作成の仕方を探していたらここに辿り着きました。

環境編まで読み進め、規定通りのファイルとフォルダを用意したのですが、その次の具体的なコーディングについての記事が見当たらないので、作業を中断しております。

もし続きがございましたら、htmlとcssしか使えないような素人デザイナーでもDNN-SKINを作れるようご指導いただけないでしょうか?

お忙しい中お手数をおかけいたしますが、Blogの続きを期待しております!!

投稿者:石山喜章 投稿日:   2010/11/26 15:25

お名前:
Gravatar Preview
電子メールアドレス:
(オプション)グラバター表示用にのみ使用されるe-mailアドレス
ウェブサイト:
タイトル:
コメント:
セキュリティコード
CAPTCHA 画像
上に表示されたコードを下のボックスに入力してください。
コメントを追加   中止