Register  |  LOGIN

CMSならDotNetNuke!高機能かつフリーのCMSです。

 

 DotNetNuke 対応ホスティングサービスに、
at link 専用サーバサービス」を追加

デザインの設定をする * スキンを自作してみよう

スキンを自作してみよう

DNNならオリジナルスキンもHTMLベースで簡単につくれます。
世界でたった一つしかない、あなただけのスキン・・・自作スキンならオリジナリティを追求できます。
DNNスキンは、HTMLとCSSで作成可能だから、普段使い慣れたホームページエディタを使って
今すぐにでも作り始めることができます。
気軽にチャレンジしてみてはいかがでしょうか?

DNNのスキンは
HTML&CSSベースで
制作することができます

それはつまり、もしもあなたが
普通にホームページをつくることが
できるのであれば、
DNNのスキンづくりもラクラク・・!
ということです。

今回は、サンプルとして
右のようなWebページを
制作する手順を
簡単にご紹介します。

スキンを自作してみよう


まずは、いつもどおりにサイトデザインをつくりましょう。
スキンをつくるにはまず原型がなければなりません。
HTMLやCSSをつかって、スキンの原型を制作しましょう。

制作方法は自由です。
DreamweaverやHomepageBuilderを
使用したり、テキストエディタでタグ打ちしたり。。。
いつもどおりに、自由に制作してください。

ただし、これはスキンとして使用するためのものですから
「モジュール(機能)」にかかわる部分や
「コンテンツ(内容)」にかかわる部分は抜いておく
必要がありますので注意してください。

右の図のように、
背景など、スキンとして必要なデザイン部分のみ
制作すればOKです。


スキンを自作してみよう
次に、HTMLファイルに「トークン」を入れましょう。
HTMLファイルができたら、次はスキンにするための小さな細工を行います。

DNNは自動的に、スキンの上下に<html>、<head>、<body>などのタグを付け加えます。
そのため、スキンとしてアップするHTMLファイルからはそれらのタグを取り去らなければなりません。

まずは、<html>~</html>を削除しましょう。

<head>~</head>も削除します。中のメタタグや<title>部分も削除しましょう。

<body>タグと</body>タグも必要ありません。これで、bodyタグの中にあった部分だけが残りました。




では次に、HTMLファイルに
「ロゴ」「メニュー」などの
スキンに必要な部品(スキンオブジェクト*)を埋め込むための
トークンをいれましょう

トークンは、HTMLファイルを
DNNスキンに変換するための
呪文のようなものです。
[ ] にはさまれた決まった単語を
入れるだけで、うまくスキンとして
働くaspxファイルを作ってくれます。

代表的なトークンは右のとおりです。

その他、パンくずリストを作るための
[BREADCRUMB]や、テキストリンクを
つくるための[LINK]などがあります。

トークンの一覧については
公式ドキュメントの
「スキニングホワイトペーパー」

をご覧下さい。

スキンを自作してみよう


*スキンオブジェクトは、スキンに埋め込まれるモジュールです。
 ロゴやメニューなどはスキンオブジェクトとして挿入することで、スキンとは別にDNN上で管理することができ、大変便利です。

*トークンのみを指定した場合は、 スキンオブジェクトはデフォルトの状態で作成されます。
 各スキンオブジェクトにフォントやCSSクラス名などの詳細な設定を行う場合は
 設定情報をXMLファイルに記述し、スキンパッケージに含める必要があります。
 スキンオブジェクトによっては、設定情報が必須のものもありますのでご注意下さい。
 スキンオブジェクトに指定可能な属性と説明に関しては、公式ドキュメントの「スキニングホワイトペーパー」に記述されています。

制作したファイルを圧縮し「スキンパッケージ」をつくりましょう。


次に、スキンにつかうファイルをすべてZIP圧縮して、「スキンパッケージ」をつくりましょう。

さきほどトークンを入れたhtmlファイルのファイル名は、アップロードするとそのままスキンの名前となります。
このhtmlにつかったcssや画像は同じフォルダ内に入れましょう
(画像は必ずしimagesフォルダに入れなくてもOKです)

また、htmlをブラウザでプレビューした状態を
キャプチャし、これもフォルダの第一階層目に
スキンと同じ名前で保存しましょう。
この画像は、管理画面の「スキン」メニューで、
スキンのプレビュー画像として使用されます。

すべてのファイルの準備できたら、まとめて
圧縮してzipファイルをつくりましょう。
スキンを自作してみよう

スキンのアップロードをしましょう



最後に、つくったzipファイルを「管理」メニューの「スキン」メニューからアップロードします。
アップロードの方法はこちらをご覧下さい。