Yuma Shimakawa Personal Blog

Mr. Celarier published a tutorial to develop Community Server skins , Here is translation to Japanese

このCommunity Server スキン作成チュートリアルはStuart Celarierさんが作成したドキュメントを、超ラフ意訳含みで翻訳したものです。オリジナルは、Blog skin tutorial for Community Server: Part 5 – Custom skin controls  です。

翻訳ここから----------------------------------

パート5カスタムスキンコントロール
このチュートリアルの最初の方のパート2(要素の追加) では、LayoutTemplate.ascxカスタムコントロールを作成しました。 このASP.NETカスタムコントロールには、<Blog:BlogTitleHeader> と <Blog:BlogSideBar> が使われており、それぞれ、ブログのヘッダ部分とサイドバー部分を構成しています。次は、これらのエレメントの構成の理解と、カスタマイズの方法を学習します。
インストラクション
%csroot%/Themes/Blogs/default フォルダに移動します。 このフォルダにあるスキンがCommunity Serverで標準的に利用されています。 ブログが標準以外のスキン(テーマ)を使うとき、Community Serverは、選択されたスキンの中からスキンのコンポーネントを探します。コンポーネントが存在しない場合、再度標準のスキンの情報を参照します。 これは、パート4で紹介した、CSSのコンセプトの「カスケーディング」に似ています。。
Community Serverインストール時に、Marvin2スキンはブログの標準スキンとしてインストールされています。Marvin2スキンは、DefaultやCustomフォルダと同じ階層に存在しています。 標準のブログスキンを変更するには、defaultフォルダにあるファイル群をリプレースします。 上記の通り、非標準スキンに含まれないコンポーネントなどは、標準スキンを参照することになるため、標準のスキンを変更することは、Community Serverで利用できるすべての非標準スキンに影響を与える可能性があるという事を理解しておかなければなりません。つまり、標準のスキンを変更する事は、新しいスキンを作成するよりも大きな注意が必要です。このチュートリアルでは、シンプルに新しいスキンを作成する事に重点を置きます。.
まず、default の中のSkins に移動します。多くのファイルがこのフォルダにありますがSkin-BlogTitleHeader.ascx と Skin-BlogSideBar.ascx を探します。Skin-という接頭辞よりあとのコントロールの名前が、CustomスキンのLayoutTemplate.ascxで使われている<Blog:BlogTitleHeader> と <Blog:BlogSideBar>の要素を意味します。
次に %csroot%/Themes/Blogs/Custom フォルダに移動し、Skinsフォルダを作成します。
Custom Skins フォルダに 以下の内容でSkin-BlogTitleHeader.ascx というファイルを作成します。
<%@ Control Language="C#" %>
<%@ Register TagPrefix="CS"
    Namespace="CommunityServer.Controls"
    Assembly="CommunityServer.Controls" %>
<%@ Import Namespace="CommunityServer.Components" %>
<div id="maintitle">
  <asp:HyperLink id="BlogTitle" runat="server"/>
</div>
<div id="subtitle">
  <asp:Literal id="blogSubTitle" runat="server"/>
</div>
Community Server は<asp:HyperLink> の <asp:Literal>を指定・挿入するために id属性の値を使います。スタイリングのために、これらのエレメントは、<div>タグで囲ってあります。
In the Custom Styles フォルダのstyle.cssに次のルールを追加します。
#maintitle {
  font-size: 2em;
  font-weight: bold;
}

#maintitle a {
  color: blue;
}

#subtitle {
  font-size: 0.8em;
  letter-spacing: 0.2em;
}
これは、今作成したBlogTitleHeaderコントロールのスタイルを決定しています。
次のステップは、カスタムコントールでななく、blog全体の見た目を変更します。以下の通り、既存のbodyのルールを修正します。
body {
  margin: 0px;
  font-family: segoe ui, gill sans mt, verdana, sans-serif;
}
そして、次の通り、ハイパーリンクのスタイルを追加します。
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
テスト
テストブログに移動し、再読込します。メインタイトルのハイパーリンクは青で表示され、サブタイトルは、文字間のスペースが広げられています。作成されたBlogTitleHeaderは、標準の設定を上書きし、新しいコントロールでスタイルを上書きしています。
ここまででSkinsフォルダの中のコントロールをカスタマイズする方法を学習してきました。 次は、ここまで学習してきた事を利用し、ブログスキンの中の構造を変更してみましょう。

Mr. Celarier published a tutorial to develop Community Server skins , Here is translation to Japanese

このCommunity Server スキン作成チュートリアルはStuart Celarierさんが作成したドキュメントを、超ラフ意訳含みで翻訳したものです。オリジナルは、Blog skin tutorial for Community Server: Part 4 - Alternative layout using style  です。

翻訳ここから----------------------------------

パート4 スタイルを用いてのレイアウト拡張
前のパートでは、メインコンテンツの左側にサイドバーをレイアウトしました。このレイアウトに加えて、同じ様なデザインのスキンでサイドバーの位置をメインコンテンツの右側に作成したい場合もあります。そして、そのレイアウトはblogのオーナーが自由に選択できると便利です。また、同じレイアウトで色だけ変更した場合もあるかもしれません。Community ServerはCSSのカスケードにより、この機能をサポートしています。
インストラクション
%csroot%/Themes/Blogs/Custom/Style フォルダに、sidebar-right.css という名前のスタイルシート以下のソースコードの内容で作成します。.
#sidebar {
  float: right;
}

#main {
  float: left;
  border-right: solid 2px blue;
  border-left: none;
}
このスタイルシートが利用されるとき、Community Serverは、最初にstyle.cssを適用します。そして、その後、sidebar-right.cssをstyle.cssを上書きする形で適用します。CSSでは、一つのセレクタに対して、複数の宣言がされる場合、最後の宣言が使われます。これが、CSSのカスケードの実装の一つです。今回の場合では、sidebar-right.css中の値がstyle.css中の値を上書きします。 つまり、sidebar-right.cssはstyle.cssとは異なった内容を宣言しなければなりません。今回の場合では、メインパートのフロートの値が変更され、左サイドに設定されます。また、メインパートの右側にボーダーが追加され、左サイドのボーダーが取り除かれています。

テスト
テストしたいブログにアクセスし、”Manage This Blog”リンクをクリックします。Themeのドロップダウンリストには、Customというエントリーと、Custom –sidebar-rightという表示されていますので、その中からCustom – sidebar-rightを選択します。そして、テストしたいブログに移動し、ページを再読込します。するとCustom- sidebar-rightが適用され、メインコンテンツが左に、サイドバーが右に表示されているはずです。
この仕組みを使って、関連するテーマを複数種類定義する事ができます。たとえば、Community Serverに標準で含まれるMarvin2スキンでは、いくつかのカラーパターンが登録されています。Style フォルダの中のstyle.cssは各スキンの標準スタイル決定しています。他の*.cssファイルは同じスキンファイルのファミリで、最初にstyle.cssが適用され、その後、ファミリメンバーの*.cssが適用されます。
このCSSを用いたレイアウト方法は、LayoutTemplate.ascxでテーブルタグを用いてレイアウトするよりも高い柔軟性を実現できます。

Mr. Celarier published a tutorial to develop Community Server skins , Here is translation to Japanese

このCommunity Server スキン作成チュートリアルはStuart Celarierさんが作成したドキュメントを、超ラフ意訳含みで翻訳したものです。オリジナルは、Blog skin tutorial for Community Server: Part 3 - Laying out the structure using style   です。

翻訳ここから----------------------------------

パート3 スタイルを使った構造のレイアウト
ここまでで、構造とスタイルを利用した作業を学習しました。それでは、CSS利用し、もう少し凝ったデザインテンプレートを作成していきます。
インストラクション
%csroot%/Themes/Blogs/Custom/Style/style.css を以下の通り置き換えます。
body {
  margin: 0px;
}

#header {
  padding: 1em;
}

#sidebar {
  float: left;
  width: 12em;
  padding: 1em;
}

#main {
  float: right;
  padding: 2em;
  border-left: solid 2px blue;
}

#footer {
  clear: both;
}
body  のCSSは、ページ外部にマージンを取らないと明示しています。
#headerは”header”属性部分を内側すべてのパディングを1emに設定しています。
#sidebarは左端から常に12emの幅であり、フローティングであるという事を要素を定義しています。
 #main は右寄せのフローティングで、青色の一本線(blue solid)で2ピクセル幅のボーダー線を左側に設定しているという要素を定義しています。.
最後に、#footer フッタは、上記で定義してフローティングの要素をクリアしています。よって、フッタは、サイドバー要素、メイン要素の下に表示されます。

テスト
それでは、blogに移動しページを再読込します。上部ヘッダ、最下部フッタ、左側にサイドバー、残りにメインセクションが表示されているはずです。コンテンツは、マージン無しにページ全体に表示されています。
基本的なスキン拡張して、たとえば、異なったレイアウトや、異なったカラースキーマのスキンの作成を次のステップで行います。