皮をつくるのは楽しいぞっと。
実は私の日々の雑記ブログはSubTextでできています。
Esten's Works
http://esten.dip.jp/blog/ そんなSUBTEXTのSkin作成、というのを進行中。
といっても、一から作ってるのはまだ途中なので、いじることのできたSkinで公開してますけれども。
作成方法については、Projectのお一人、Haackedさんが、楽しんでいってね！的スタンスで作り方を公開してくれてます。
Mile High Overview Of Subtext Skinning
http://haacked.com/archive/2006/08/26/Mile_High_Overview_Of_Subtext_Skinning.aspx
Developing Custom Skins
http://haacked.com/archive/2006/08/26/Developing_Custom_Skins.aspx
実際に作った人の記録はこちら
Creating your first subtext skin Part 1
http://siphilp.co.uk/archive/2007/06/23/creating-a-subtext-skin-scottish-snowboarder-part-1-again.aspx
にならって、自分も頑張ってみた。
ただ、前提として必要な知識があるので、ない人は勉強がてらで頑張ってくださいませです。
- ASP.NETでユーザーコントロールを使用してページを作成できること
- スタイルシートでクラスやタグにあわせて適切な設定を書けること
SUBTEXTは、記事やコメント、件数表示とか、ブログのパーツが全てASP.NETユーザーコントロールでできてるのね。
なので、欲しい部品を欲しい位置に欲しいデザインで配置できるから、SKIN作成はかなり面白いし、やり応えがあると思うの。
逆を言えば、さっきあげたような前提知識と経験がないと、ゼロから作り上げていくのは大変だし、敷居もあがっちゃう。
でもそういう人は、既存のSkinをフォルダごとコピーして、オリジナルに手を加えて作っていく方法もありだと思うですよ。
部品化されているからこそ、そういう小細工もできるのだしね。
とりあえず、ゼロから作る場合の手順は以下のとおり。
- ひな型となるSKINのセットをコピー
「Naked」フォルダの中身が１セットまるまるで１Skin用の部品ひとそろい。
これは、Haackedさんがそろえておいてくれたもの。ありがたく使おう。 - Adminフォルダ配下の「skins.user.config」に自分のテンプレートを登録
パラメータのNameは好きな名前、TemplateFolderには１で作ったフォルダ名を登録 <?xml version="1.0"?>
<SkinTemplates xmlns:xsd=http://www.w3.org/2001/XMLSchemaxmlns:
xsi="http://www.w3.org/2001/XMLSchema-instance">
<Skins>
<SkinTemplate Name="MySkin" TemplateFolder="mySkin">
<Styles>
<Style href="~/skins/_System/csharp.css" />
<Style href="~/skins/_System/commonstyle.css" />
<Style href="~/skins/_System/commonlayout.css" />
</Styles>
<Scripts />
</SkinTemplate>
</Skins>
</SkinTemplates>
- 作ったフォルダ配下の「PageTemplate.ascx」をテキストエディタで開き、必要なコントロール部品を配置。
ここの編集テクニックにはASP.NETのユーザーコントロールを配置する知識があれば楽だと思う。
<%@ Control %>
<%@ Register TagPrefix="DT" Namespace="Subtext.Web.UI.WebControls" Assembly="Subtext.Web" %>
<%@ Register TagPrefix="uc1" TagName="Header" Src="Controls/Header.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Footer" Src="Controls/Footer.ascx" %>
<%@ Register TagPrefix="uc1" TagName="News" Src="Controls/News.ascx" %>
<%@ Register TagPrefix="uc1" TagName="SingleColumn" Src="Controls/SingleColumn.ascx" %>
<%@ Register TagPrefix="uc1" TagName="BlogStats" Src="Controls/BlogStats.ascx" %>
<%@ Register TagPrefix="uc1" TagName="MyLinks" Src="Controls/MyLinks.ascx" %>
<div id="Header">
<uc1:header id="Header1" runat="server" />
<uc1:blogstats id="BlogStats1" runat="server" />
</div>
<div id="Content">
<uc1:mylinks id="MyLinks1" runat="server" />
<dt:contentregion id="MPMain" runat="server" />
<uc1:news id="News1" runat="server" />
<uc1:singlecolumn id="SingleColumn1" runat="server" />
</div>
<div id="Footer">
<uc1:footer id="Footer1" runat="server" />
</div>
<script type="text/javascript">
//<![CDATA[
new DarkHorseLayoutEngine();
//]]>
</script>
- 作ったフォルダ配下の「style.css」を編集
それぞれのDIVタグのクラス名ごとに、自分の設定したいデザインを適用して行けばOK
もちろんDIVタグだから、好きなところに好きに入れてきめ細かに設定だって可能
SUBTEXTのSkinコントロールの面白いところは、記事やコメント、カテゴリ一覧やニュース欄など、
各部品ごとにユーザーコントロールとなっているので、
好きなところを好きなだけきめ細かく手を入れてデザインしていける所。
このSKINのここが気に入らない→その部品だけ変更、スタイルシートだけ変更とかできちゃうのは楽しい。
問題は、私のデザインセンスが微妙ってことかｗ