スキンの作成方法【その１】－勉強編－
6
24
Written by:
2008/06/24 17:28
最近、ようやくスキンをそこそこ作れるようになってきて、汎用性を重視したレディメードスキンを大量生産しているところですが、そこで得たノウハウというか作り方やDotNetNukeならではの注意点などを情報提供できたらと思います。
私はデザイナではありませんが、もっとデザイナさんに参加してもらえるとより日本でもDotNetNukeが普及するのではないか？ということもあり、ASP.NETに関係していないデザイナさんも触れるようにascxファイルではなくhtmlファイルを前提で書かせてもらいます。
また、私はレイアウトはもっぱらCSSで作ってますのでCSSメインで説明します。といってもCSSに詳しいわけではありませんので、あくまでスキンを作ってみようかと考えている初心者の方向けです。上級者の方から見ればそれは違うんじゃないの？とかもっとよい方法があるよ、というようなツッコミがあれば自分の勉強にもなりますので、歓迎しますし期待もしています。
余談ですが、これを読んで興味をもったデザイナさんは是非チャレンジしてみてください。当社のレディメードスキンやオプションスキンなどで採用させていただくかもしれません。また、顧客にCMSを推薦する場合にもDotNetNukeという選択肢が増えますし、海外ではDotNetNukeスキンを販売する市場が立ち上がっていますので、グローバルにスキンを販売するのも面白いかもしれません。
ということで、まず最初は準備段階の勉強編です。
勉強にあたって最初に躓くのは日本語情報の少なさですが、日本語の情報としては、
- 日本ユーザ会の過去ログ
- スキニングホワイトペーパー
- 検索で出てくるサイト
がありますが、やはりスキニングホワイトペーパーが全て網羅しているという点では頼りになります・・が、なにせある程度理解が進むまでは読んでもいまいちピンときません。私も今見て、なるほどそうだったのか、という内容が多いです。
そこでお薦めなのは、やはり実例を見て触ることです。
海外も含めてフリースキンをダウンロードできるサイトがいくつかありますので、適当なものをダウンロードします。なお、適用したサンプルサイトがあればソースを覗いてみて、テーブルレイアウトかCSSレイアウトかを見たりして、自分が作りたいものかどうかあたりをつけておくとよいでしょう。次にダウンロードしたファイルを解凍して、htmlファイルで構成されたものを選びます。ちなみにascxファイルで構成されているものもありますが、これはASP.NETプログラマをターゲットにしたものなので、ここではhtmlのみ説明します。
参考にするスキンが決まったら、後は中身をじっくりと眺めたり、少しずつ修正してみたりして、実際にサイトに適用しながら勉強します。ある程度理解したところで、そこからステップアップする際にスキニングペーパーや過去ログを読むとすごく参考になります。
私自身、最初、あちこちからダウンロードして解凍してみましたが、boxed4cssというスキンをもっぱら参考にさせてもらいました。最初は画像を変えたり、幅や高さや色を変えるくらいでしたが、そのうち、マネするのも何なのであえて別の方法でやってみたりしましたが、色々と問題が発生したりして、試行錯誤の結果、最初に近い方法に戻ってきました。そのあたりのお話は今後書いていきます。そうして作ったのがSIMPLE01スキンです。見た目もかなり似ていますね。
他のスキンを解析するとまた違ったノウハウも見えてくるのかもしれません。教科書となるようなスタンダードなお薦めスキンがあれば是非、教えてもらいたいものです。デザイナさんに参考になるようなリファレンススキンを作って公開するのもよいかもしれません。
ということで、まず勉強編でした。
次回は製作にあたって環境設定をどうするのがよいかなどを説明する環境設定編です。