snow*materia Skin

Navigation

配布しているスキンの不具合や記述ミスなど、お気付きの点がございましたらメールフォームからお気軽にどうぞ。ご質問、ご要望の場合はメールで返信させて頂くか、アドレスが記入されていな場合は掲示板で返答させて頂きます。記述ミスなどの不具合は次回更新時に修正することで返答させて頂きます。

紹介とダウンロード
Skin 改造手引き
- html構造説明
  - head内
  - main内
  - contents内
  - footer内
- CSS装飾説明
スキン使用上の注意
更新記録

CGI紹介

CGI配布元様

いろんな種類のCGIを配布されています。普通の掲示板からお絵描き掲示板、チャット、ギャラリー作成、日記などなど。すのまさんのCGIの特徴的なところは様々な機能が利用できるところにあります。HTMLにほぼ書き出すことができることや、スキンをHTMLで組んでいけるところが大きな特徴です。

relm

高機能、多機能性のあるお絵描き掲示板です。

しぃペインター対応。ペン機能があり、線画を起こさなくても自然な線が引ける。
しぃペインター対応。クォリティ機能で細かいところまで描画できる。
投稿する際は投稿時間をoffにできるPaint-time-off。
アニメーションから続けてお絵描きができる。
投稿するか迷う際にボツ投稿。ローカルに画像保存ができる。
第三者もパスワードがなくても塗り絵として楽しめるPass-off。
掲示板としては拍手やレイヤーレス機能。プレビュー表示。ページを更新せずにレスが可能なノータイムレス機能。
描きかけ状態で投稿もできる。描きかけの画像は表示されない。

設置に関することはsnow*materiaさんのrelmのページにあります。

jinny

relmの機能をそのままにした日記用のCGIです。

relmのお絵描き掲示板としての機能がそのまま付随しています。
カレンダー表示で日付けとリンク先を分かりやすくすることができます。
MENUでは検索や指定時期の記事一覧などが抽出できます。

設置に関することはsnow*materia様のjinnyのページにあります。

スキンダウンロード

HTML構造をできるだけstrict環境に依存しないHTMLにし、CSSで装飾したスキンです。
スキン名はST-Dといいます。Standardを縮めて。Strictデザインとも言うかも。 Cascading Style Sheetデザインとか。

html download

Relm Skin (37kb)

CSS download
Common	One	One+α
Common	Twilight	Twilight +
	Snow White	Snow White +
	P and N	P and N +
	Aria	Aria +
	Green	Green +
	Key	Key +

ダウンロード方法と設定

基本的なフォルダ構成

ダウンロードされたファイルを全てアップロードすると、基本的に以下のようなフォルダ構成になります。

relm/
- skin/
  - _common.css Common
  - index.css One
  - common.css One
  - skin_xxxxx.css One+α
  - その他画像群 One
  - l_skin_std.html 共通スキン
  - l_cata_std.html 共通スキン
  - l_menu_std.html 共通スキン
  - l_form_std.html 共通スキン
  - l_paint_std.html 共通スキン
  - article_summary.xsl 共通スキン
  - index.js 共通スキン
  - cookie.js 共通スキン
  - layer.js 共通スキン
  - preview.js 共通スキン
- relm.ini 共通スキン
- paint.ini 共通スキン
- paint_tool.ini 共通スキン

エンコードとUTF-8

共通のHTMLをダウンロードしたあと、デザインであるCSSを選んでダウンロードします。shift-jisではなくutf-8で書かれているのでutf-8に対応したエディタを利用して開いてください。

PARALYSIS/UTF-8: utf-8及びその他コードを扱うことの出来るエディタを紹介されています。

CSSの適用の仕方

ダウンロードした後、そのままアップロードしただけではCSSは思うように適用されません。順を追って、CSSの適用の仕方を説明していきます。

CSSではimportというものを使って他のファイルであるCSSも同時に呼び出すことができます。例えば@import "index.css";という風に、CSSファイルの上部などに書くと呼び出されます。このスキンではこれを使い、ソースをシンプルにしています。

画像やhtmlファイルを除けばダウンロードしたCSSは以下の4つになります。

_common.css Common
index.css One
common.css One
skin_xxxxx.css One+α

読み込まれる仕組み

スキンhtmlに記述された<link rel="stylesheet" type="text/css" media="screen,tv" href="$CSS" title="ST-D" />から、index.cssが読み込まれる。
index.cssのimportから、_common.css、common.css、skin_xxxxx.cssがこの順番で読み込まれる。

必須であるCSSの記述変更

index.css記述を以下のように変更してください。

@charset "utf-8";
@import url(_common.css);
@import url(common.css);
@import url(skin_xxxxx.css);

CSSファイルを変更し、画像とその他htmlスキンをフォルダ構成にあわせてアップロードします。表示がサンプルと同一に表示されたら、スキンの適用は成功です。

INI設定の変更

基本的に変更する必要はありませんが、タイトルとURLは必ず変更してください。

$title	= 'sketch book';
$home	= 'http://glas-gather.org/other/sm_skin/relm/';
$script_	= 'http://glas-gather.org/other/sm_skin/relm/relm.cgi';

この部分の記述が変更必要箇所です。URLは絶対指定にしてください。

html構造説明

カスタマイズされる方に対しての説明です。それぞれのスキンはCSSでのみデザインがされています。つまり、カスタマイズする必要のあるところはcssファイルのみとなります。HTMLをいじる必要はほぼありません。

HTMLに関しての参考サイトをリンクしておきます。

W3Cの仕様書等の文書の日本語訳集: 仕様書が日本語訳されたもの。
良質なテキストサイトの爲のISO-HTML入門: htmlの構造を基礎から学びたい時。
P-0037 HTML でのレイアウト指定の、 CSS での指定との対応表: HTMLを自分でマークアップしていく中で、非推奨となった要素をどうやって他の推奨する要素に変えて記述していけばよいのかがよく分かります。
ストリクトなHTMLの基礎講座: HTMLを分かりやすく最初のドキュメント宣言から終わりまで分かりやすく説明されています。
HTML4.01 Reference: まだ覚えてない要素や属性があったり、分からなかったり忘れてしまった場合。

と表示されているように強調されている部分はスキンで代入する、引数というものです。これを記述することでCGIの方で置換して表示されるようになります。この構造は変えると表示されなくなったりするので、改造するときもこの部分は変更せずにおいてください。

また、$CSSや、$titleなどの引数部分のほとんどは設定ファイルで細かくユーザーの方で設定できるようになっています。例として、$CSSには、$css = 'http://～～xxx.css';という設定があり、そこに外部CSSのアドレスを書き込めば、そのアドレスがそのまま$CSSの場所に置換されます。また、スキンはHTMLなので、iniからの代入でなくとも、直接スキンHTMLに記入することも出来ます。

relmスキンでのギャラリーデザインスキンを元に見ていきます。

配布しているスキンの構造は全て共通しています。

head内ではHTML宣言やエンコード、外部CSSと外部jsなどを。
main内h1から本文と内容。
contents内h2では本文。
contents内以下h3以降はh2からの分岐。
footer内ではアドレスや著作権表示。

以上の5つで構成され、デザインはほぼこれらのdiv要素で構成させています。これらの構造を統一することによって、共通のHTMLでCSSのみのデザインが実現できるようになっています。

relmでの共通HTMLスキンであるl_skin_std.htmlで主要な構造を紹介していきます。

構造のみの説明である為、記述を省略しています。

head内

head内では、<style>や<script>などを直接記入できるようになっていますが、このスキンではHTMLの冗長性をできるだけ削減するために外部へリンクを張り、ダウンロードされる時に同時にそれも呼び出されるようにしています。

外部CSS、外部JSにするとそのCSSやJSにリンクを張るだけで各デザインや各システムが統一でき、かつそのCSSやJSファイルひとつを修正するだけでそのファイルにリンクしたHTML全てに影響させることができるようになり、非常に効率的になります。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="generator" content="Relm by Snow Materia" />
    <title>$title</title>
    <link rel="home" href="$home" title="Top" />
    <link rel="index" href="$script" title="$title" />
    <link rel="search" href="$script?mode=search" title="Search" />
    <link rel="help" href="$script?mode=howto" title="How To" />
    <link rel="alternate" type="application/rss+xml" href="rss.xml" title="$titleのRSS" />
    <link rel="prev" href="$script?page=$PAGE-1" title="$PAGE-1P" />
    <link rel="next" href="$script?page=$PAGE+1" title="$PAGE+1P" />
    <link rel="stylesheet" type="text/css" media="screen,tv" href="$CSS" title="ST-D" />
    <script type="text/javascript" src="skin/index.js"></script>
    <script type="text/javascript" src="relm_c.js"></script>
    <script type="text/javascript" src="../skin/index.js"></script>
</head>

main内

h1を含めてmain部分としています。h1はページのタイトルを表す要素であるため、ここには掲示板のタイトルそのものが入る事になります。

<div class="section" id="main" title="ページ内容">
	<h1>$title</h1>

contents内

contents内では本文を記述していきます。<div class="section">でそれぞれの記事、つまり投稿番号で区切り、hnでタイトル、投稿者が見出しとして設定されています。

h2を記事のタイトル、h3を投稿者の名前とし、URLやEDIT、Animationなどのリンクはリスト表示で記述しています。

<div class="section" id="no-$LOGNO">
<h2>
<a href="relm.cgi?mode=res&no=$LOGNO" title="Re : $LOGNO $TITLE">
$LOGNO $TITLE</a>
</h2>
    <div class="section" id="no-$LOGNO-$LOGMO">
    <h3>$NAME</h3>
        <p class="thumbnail">
        <a href="relm.cgi?mode=res&no=$LOGNO">
        <img src="$DIR$THUMB" alt="$SIZEkb : $WIDTHx$HEIGHT $APPLET" /></a>
        </p>
        <p>
            コメント
        </p>
        <ul class="posted">
            <li title="Paint Time">$PAINTTIME</li>
            <li>$MONTH/$DAY</li>
            <li>
                <a href="http://$URL" title="Home : $NAME">
                Home</a>
            </li>
            <li>
                <a href="relm.cgi?mode=edit&pass=$pass&no=$LOGNO">
                Edit</a>
            </li>
            <li>
                <a href="relm.cgi?mode=delete&pass=$pass&no=$LOGNO">
                Delete</a></li>
            <li>
                <a href="relm.cgi?mode=continue&no=$LOGNO&type=edit">
                Continue</a>
            </li>
            <li>
                <a href="relm.cgi?mode=animation">
                Animation</a>
            </li>
        </ul>
    </div>
</div>

footer内

footer内では著作権表示や、上のほうに表示しなければならない、というようなメニューリンク以外を置きます。

例えばサーチフォームや著作権表示などは敢えて上におく必要もないので下に記述します。もし、サーチフォームや著作権表示を上のほうに表示させたい時があったとしても、デザインはCSSで制御できるので、下のほうにたとえ記述したとしても全く問題はありません。

<div class="section" id="footer" title="作成者とページ情報">
    <h2>Page Information</h2>
    <dl>
        <dt>主張バナー</dt>
        <dd>
        <ul class="assert">            
            <li>
                <address>
                <a href="http://glas-gather.org/" title="硝子の欠片を集める者達">
                    ST-D © glas-gather</a>
                </address>
            </li>
            <li>
                <address>
                <a href="http://roo.to/materia/" title="snow*materia">
                    Relm$ver[0] © s*m</a>
                </address>
            </li>
            <li>
                <address>
                <a href="http://shichan.jp/" title="しぃ堂">
                    Paint-Applet © Shi-dow</a>
                </address>
            </li>
        </ul>
        </dd>
    </dl>
</div>

以上で構造の説明を終わります。以下から、このHTMLをどのようにCSSでデザインしていっているかの説明をします。

CSS装飾説明

HTMLでマークアップした後は、CSSで見栄えを調整します。下の例で示している外部CSSは、relmスキンのtwilightバージョン。

CSSの技術の参考として以下のサイトをリンクします。

HTML/CSS: HTMLを作ってからCSSでデザインするまでの過程が分かりやすく、かつ基礎から丁寧に書かれています。
CSS Dencitie: 総合的なCSSリファレンスです。

基本的に、CSSは{と}で囲まれることでCSSとして認識されます。

要素{プロパティ:値;}という形をとり、要素で定義をしその後に続く{と}の間でデザインの中身が決定されます。

例えば、emという要素があり、<em>いろいろ</em>のようにソースに書いた場合、CSSでデザインを設定するときはem{}とします。

そして、emはブラウザでは大体が斜体で表示されてしまうので、これを標準にしたい場合以下のように書きます。

em{font-style: normal;}

このようにして、CSSとして書いていきます。

エンコードとコメント

最初にある@charset "UTF-8";の部分は、エンコードというものです。日本語で書かれている場合大抵はShift-JISというもので書かれていることが多いですが、このように他のエンコードでも記述することが出来ます。記述するにはそのエンコードに変換、もしくは扱えるエディタか、変換可能なCGIなどで記述されます。

その下にあるのはコメントですが、/*と*/に囲まれることによって、コメントとして認識されます。

@charset "utf-8";

/*
 *** All Common Design ***
 全てのCSSに共通する部分.
 
 2003-2004 (c) glas-gather
 http://glas-gather.org/
*/

全適用とbody要素(html要素)

*の意味は、全ての要素とそれが内包する属性全てに適用される、という意味で全称セレクタと呼ばれます。

もし、*にを記述するとなるとページの中の要素全てに下線が表示されてしまいます。

これを応用して、全ての要素にmargin:0;padding:0;を設定します。どうして記述するかというと、まず要素とブラウザ間ではデフォルトのmarginとpaddingが既に決められており、CSSでデザインするとブラウザによって発生する隙間や表示崩れが多くなります。こうやって初期設定を予めリセットしておくことで、後々のデザインや崩れを防止することに繋がります。

* {
	/*
    IE用がpre要素の中身がウィンドウよりも横に広がる場合
    デザインそのものが大崩なので指定しておく。
	*/
	margin:0;
	padding:0;
	word-wrap:break-word;
	word-break:break-all;
} body {
	font-weight:normal;
	font-style:normal;
	text-align:left;
}

block要素

block要素には見出し、引用、整形文書、リスト、アドレスなどよく使用される主要な要素があります。block要素のデザインはまとめてここで記述しています。

/*block*/

blockquote {
	margin:1.5em 0;
	padding:1em 20px 1em 20px;
} pre {
	min-height:100px;
	margin:1.5em 0;
	padding:1em;
	font-size:83%;
	line-height:1.3;
} h1 {
	border:none;
	text-transform:capitalize;
	font-weight:normal;
	font-size:25px;
	line-height:25px;
} h2 {
	border:none;
	text-transform:capitalize;
	font-weight:normal;
	font-size:25px;
	line-height:25px;
} h3 {
	margin:30px 0 15px 0;
	border:none;
	font-weight:bold;
	font-size:19px;
} h4 {
	margin:25px 0 15px 0;
	border:none;
	font-weight:bold;
	font-size:19px;
} h5 {
	margin:25px 0 15px 0;
	border:none;
	font-weight:bold;
	font-size:17px;
} ul, ol {
	display:list-item;
	line-height:1.5;
	margin:1em 0 1em 2em;
}

……後略

inline要素

以下同様にデザインしていきます。インライン要素には、emやstrong、imgなどの要素が含まれます。色替え、ライン引きなどで強調されることが多いですが、あまりカラフルにしてしまうと文章自体の可読性もまた低くなってしまう為、色替えはカギカッコなどで代用し、アンダーラインはなしにしています。

/*inline*/

img {
	border:none;
	margin:3ox;
} em, cite, dfn, code, samp, var, kbd {
	font-style:normal;
} kbd {
	margin:0 .4em;
	font-weight:bold;
	font-size:90%;
} abbr, acronym {
	border:none;
} del {
	color:#959696;
	font-size:83%;
	text-decoration:line-through;
} ins {
	text-decoration:none;
}

……後略

a要素

要するにリンク部分のデザインです。:linkというのは擬似要素といい、これは他の要素や属性のデザインもできるものなのですが、IEが対応しているのがまだa要素のみなので他への擬似要素はまだオプションとして考えた方がよさそうです。:visitedは既に訪問した後、そのURIがブラウザのキャッシュに入っている状態のみ変更します。a:activeはクリックした状態を指し、a:hoverはカーソルが要素の上に乗っている状態、:focusは主にinpitなどのform関連要素に使うのですが、カーソルがinputやtextareaの上にある状態のことを指します。

a[target="_blank"]とありますが、これはhtmlのリンクターゲットに_blankと書かれている場合のみ、その要素の後ろに適用する、という意味です。更にcontent:" \ff08 Open Window \ff09 ";というのは、その場合に限りcoontentの内容が記述されるという意味です。しかしIEがcontentプロパティを表示することができない為、これもまたオプションとして捉えた方がよさそうです。

/*link*/

a, a:link {
	text-decoration:underline;
} a[target="_blank"]:after {
	content:" \ff08 Open Window \ff09 ";
} a[hreflang]:after {
	content:" \ff08 OverSeas \ff09 ";
}

table要素

テーブルは普通に文章を記述していたらほとんど使うことのない要素ですが、とりあえず指定しています。

/*table*/

table {
 	display:table;
 	vertical-align:baseline;
	margin:0 0 1.5em;
	border-spacing:0;
} caption {
	margin:1.5em 0 0;
	padding:5px 8px;
	font-weight:bold;
} th {
	padding:5px 8px;
	font-weight:bold;
} td {
	padding:5px 8px;
}

form関連要素

/*form*/

 fieldset {
	margin:1em 0;
	border:0 solid;
} legend {
	font-size:25px;
	line-height:25px;
} fieldset dt {
	width:8em;
} fieldset dd {
	margin:0 0 5px 9em;
} fieldset dd ul {
	margin:0;
} fieldset dd li {
	display:inline;
	margin:0 8px 0 0;
} fieldset p, form .submit {
	text-align:right;
	text-indent:0;
} fieldset p input, fieldset p select, form .submit input, .layer-form input {
	font-weight:bold !important;
	font-size:90%;
}

……後略

classとid属性(全ページ)

/* =================design=================== */

 #anchor dl {
	margin:1em 0;
} #anchor dt {
	width:7em;
} #anchor dt a {
	border:none;
	white-space:nowrap;
} #anchor dd {
	margin:0 0 5px 7.5em;
} #contents .section:after {
	display:block;
	font-size:1px;
	line-height:1px;
	content:".";
} #contents em:before {
	content:" \300c";
} #contents em:after {
	content:"\300d ";
} #contents .posted {
	margin:1.5em 0 1.5em 0;
	font-weight:bold;
} #main .posted li {
	display:inline;
	margin-right:.5em;
}

……後略

classとid属性(各ページ)

/*=================all_design===================*/

/* common */

 th.graph {
	width:300px;
	padding-right:80px;
} td.graph {
	width:300px;
} p.graph * {
	line-height:4px;
} p.graph {
	margin:0 !important;
	padding-right:80px;
	height:4px !important;
	border-top:3px solid;
	border-bottom:3px solid;
	text-align:right;
	white-space:nowrap;
} p.graph em {
	position:relative;
	left:80px;
	font:bold 14px/4px Arial,sans-serif !important;
} p.graph em .per {
	padding-left:0.5em;
} #news dt {
	width:7em;
	font-weight:bold;
}
 
……後略

CSSの記述方法は人によって千差万別なので、これが正解というものは全くありませんが、私個人としてはこのような方法で記述しています。全適用から大きい要素に、見出しという大きな要素からひとつの塊として区分される要素へと、全体のデザインから個々のデザインへと…という風に、マクロからミクロ、大から小へと構成しています。

カスタマイズする際は、この構造も念頭に入れながら頑張ってください。

スキン使用上の注意

ここで配布しているスキンはカスタマイズを前提で作っています。カスタマイズや大幅な改変を行った場合は特に著作権表示を義務とはしていません。
スキンの二次配布は、デザインの変更が為されていれば問題はありません。HTML自体はそのまま使うなり独自に変更されるなりすることは可能です。
CGIサポートは本家snow*materiaさんでサポートされています。

更新記録

2004.1.31: スキンのヴァージョンアップ。サイトのマークアップに近付けました。あとそれにあわせて新しくCSSも入れました。
2004.12.18: 画像を自分で作ったものに限り配布するようにしました。
2004.11.27: スキン用CSSのP and Nが新しくダウンロードできます。
2004.11.25: aeriスキンの公開停止。relm,jinnyスキンの仕様変更。
2004.10.20: relm,jinnyスキンのxhtml1.0移行と修正。relm,jinyスキンの新作。

Reference URI

トラックバックのURIはhttp://glas-gather.org/mt/mt-tb.cgi/180です。
この記事のURIはhttp://glas-gather.org/other/sm_skin/です。