このページでは、 スキンのシステム(仕様・ルール)を説明していきます。
仕様書なので、長いです。ごめん。
スキンの配布については、前の前のページの スキンの配布・リンク のページをご覧ください。
スキンの選択・スキンデザインの変更については、前のページの スキンの選択・変更 のページをご覧ください。
Relmの中のデザインは、ほとんどHTMLのスキンと、CSS(スタイルシート)ファイルを使っています。
CGIの中をいじらなければデザインを変えられないのは、あまり変える必要のない、管理画面、HowTo、アイコン一覧などです。しかし、それらの部分も、ソースのヘッダー部分はフォームかメイン画面と共通で、class指定もしてあったりするので、ある程度は自由が利くと思います。スタイルシートの変数みたいなものです。スタイルの設定内に、.(ドット)+○○(適当な名前)の形で指定。その後、適当なタグの中に、class="○○"と書くと適用されます。
例えば、スタイル設定(headとか、cssファイル)内に、
.abc{font-size:11pt;color:#ff8080;}と書いて、文章内に、ライチー・エッチー・<font class="abc">イヤバカン♪</font>と書くと、ライチー・エッチー・イヤバカン♪となる仕組み。
いくつも同じスタイルを使いたいとき、設定１つでできるので、大変便利です。…例文については聞かないで下さい。
HTMLで制御できない部分はCGIの設定ファイルのところでいじりくります。スレッドを左右交互に並べたり、レス○個ごとにタグを入れたり、投稿が新しいときにタグを入れたりなど。
ということで、RelmではHTMLのスキンのシステムさえ理解できれば、かなり自由度の高いデザインを組むことができます。シンプルにするのもゴージャスにするのも、あなた次第です。
それでは、次からスキンの基本的なシステムについて紹介していきます。
「面倒だ！実際にいじりながら覚えるぜ！」って方は一番下に飛んでください(笑)
s*m では、どのCGIでもスキンはほとんど同じようなシステムなので、慣れてる人はここは飛ばして読んでくれてよいです(笑)。
以上を踏まえた上で、次から各スキンごとの細かいシステムを解説していきます。
全てのスキンで共通に、どこでも使える基本の変数・条件などをまとめて。これら以外の変数などは、使える場所や条件があります。
メイン画面のスキン($l_skin='l_skin.html')は、次のような構成になっています。
<!--HEAD_START-->
ヘッダー部分
<!--HEAD_END-->
---------------------------------------------------
<!--BODY_START-->
ここからメインソース
---------------------------------------------------
<!--PAINT_START-->
アプレット選択のフォーム部分
<!--PAINT_END-->
---------------------------------------------------
<!--PARENT_START-->
ここから親スレッドのソース部分(繰り返す)
---------------------------------------------------
<!--PIECE_START-->
レスコメントのソース部分(繰り返す)
<!--PIECE_END-->
---------------------------------------------------
<!--KAKIKAKE_START-->
描きかけ状態のときのソース部分
<!--KAKIKAKE_END-->
---------------------------------------------------
ここまで親スレッドのソース部分
<!--PARENT_END-->
ここまでメインソース
<!--BODY_END-->
---------------------------------------------------
<!--FOOT_START-->
フッター部分
<!--FOOT_END-->
---------------------------------------------------
<!--LAYER_FORM_START-->
レイヤーフォームのソース部分
<!--LAYER_FORM_END-->フォームスキン専用で、共通の変数
ヘッダー部分。他のCGI専用画面にも適用される共通の部分をここに書きます。<BODY>タグまで最低でも書いておいてください。
なお、// ここから下のスクリプトはあまりいじらないようにと書いてあるとこより下のスクリプト部分はあまりいじらないこと。
メイン画面全体の、一般ソース部分。<BODY>より下のデザインの部分をほとんど全部ここに書きます。スレッド・アプレット等の部分も一応ここに含まれますが、<!--PARENT_START-->～<!--PARENT_END-->等の中に書く必要があります。これを置く箇所は、このBODY_～の中ならどこでもいいです。
お絵描きができるときの、アプレットの選択フォームなどの部分。ほとんどフォームタグなので、ある程度のHTMLがないと、編集は難しい？「Shi-Painter」を「しぃペインター」にするなど、タグの外を変えるくらいは結構楽。
1スレッド・親記事のソース。1Pに、設定数($onepage)分、繰り返されます。カスタマイズするならメインの箇所でしょうか。
PIECE～部分は、返信コメントのソースです。返信された分だけ繰り返されます。代入される変数などは、親部分と子部分では同じなのが多いので、まとめて。
描きかけ状態のとき (フォームのkakikakeチェックをON)、この中のソースが代わりにスレッドのソースになります。使われる変数は、PARENT内と一緒です。
フッター部分。他のCGI専用画面にも適用される共通の部分をここに書きます。</BODY>、</HTML>タグまで書いておいてください。
レイヤーレスフォームのソース部分。使われる変数は、フォーム系共通のものとレイヤー専用のものです。また<!--LAYER_FORM_START-->の後に、外部レイヤーJSファイル($layerjs='skin/layer.js')を読み込む<SCRIPT>タグが自動で入ります。
フォーム画面のスキン($l_form='l_form.html')は、次のような構成になっています。
<!--HEAD_START-->
ヘッダー部分
<!--HEAD_END-->
---------------------------------------------------
<!--WRITE_START-->
↓ここからメインソース
---------------------------------------------------
<!--PAINT_START-->
ペイント・アプレット関係の入ったフォームソース部分
この中にPARENT部分を入れてもいいです
<!--PAINT_END-->
---------------------------------------------------
<!--PARENT_START-->
↓ここから親スレッドのソース部分
---------------------------------------------------
<!--PIECE_START-->
レスコメントのソース部分(繰り返す)
<!--PIECE_END-->
---------------------------------------------------
<!--KAKIKAKE_START-->
描きかけ状態のときのソース部分
<!--KAKIKAKE_END-->
---------------------------------------------------
↑ここまで親スレッドのソース部分
<!--PARENT_END-->
<!--FORM_START-->
投稿フォームのソース部分
<!--FORM_END-->
---------------------------------------------------
↑ここまでメインソース
<!--WRITE_END-->
---------------------------------------------------
<!--FOOT_START-->
フッター部分
<!--FOOT_END-->フォーム画面のヘッダー部分。使える変数などはメイン画面と同じです。
フォーム画面全体の、一般ソース部分。<BODY>より下のデザインの部分をほとんど全部ここに書きます。
イメージデータや、アプレットの選択フォームなどを入れる部分。簡易的にステータスを変更したりする部分もここに。基本の変数・条件はメイン画面のPAINT_部分と同じなので、やや省略。
1スレッド・親記事のソース。メイン画面と違って、フォーム画面では繰り返されません。また、設定で、レスのときとかはメイン画面のをもってこれます($rskinuse)。コンティニュー画面などはこっちのスキンのソースになります。使える変数・条件などは、メイン画面のと同じです。
メイン画面と同じです。
メイン画面と同じです。
投稿・編集フォームのソース部分。使われる変数は、フォーム系共通のものとフォーム専用のものです。また<!--FORM_START-->の後に、($cookiejs='skin/cookie.js')と($prevjs='skin/preview.js')の2つの外部JSファイルを読み込む <SCRIPT> タグが自動で入ります。
フォーム画面のフッター部分。
カタログ画面のスキン($l_cata='l_cata.html')は、次のような構成になっています。
<!--HEAD_START-->
ヘッダー部分
<!--HEAD_END-->
---------------------------------------------------
<!--BODY_START-->
↓ここからメインソース
---------------------------------------------------
<!--PAINT_START-->
アプレット選択のフォーム部分
<!--PAINT_END-->
---------------------------------------------------
<!--LINE_START-->
↓ここから行部分のソース部分(繰り返す)
---------------------------------------------------
<!--CUT_START-->
列部分のソース部分(繰り返す)
---------------------------------------------------
<!--KAKIKAKE_START-->
描きかけ状態のときの列ソース部分
<!--KAKIKAKE_END-->
---------------------------------------------------
<!--CUT_END-->
---------------------------------------------------
↑ここまで行部分のソース部分(繰り返す)
<!--LINE_END-->
---------------------------------------------------
↑ここまでメインソース
<!--BODY_END-->
---------------------------------------------------
<!--FOOT_START-->
フッター部分
<!--FOOT_END-->フォーム画面のヘッダー部分。使える変数などはメイン画面と同じです。
カタログ画面全体の、一般ソース部分。また、レイヤーレス、スレッドレス、ノータイムレス、プレビュー、の各種機能はカタログ画面では使えないので、ご理解を。使える変数などは、メイン画面のBODY部分と同じです。
お絵描きができるときの、アプレットの選択フォームなどの部分。これもメイン画面と同じです。
行部分のソース。この間に、CUT内のソースを書いてください。代入される変数は特にありません。
親記事の1カットのソース。メイン画面の、PARENT内の部分だと思ってください。使える変数もそれに同じ。設定した列数($catalog_x)分繰り返して、行部分に入ります。その行が設定した行数($catalog_y)分繰り返して、表示されます。つまり、この部分は1Pに全部で、行数 x 列数($catalog_x x $catalog_y)分、繰り返されることにます。
描きかけのとき、この中のソースが、列部分のソースになります。代入される変数などは、↑の CUT内と一緒です。
カタログ画面のフッター部分。
リスト画面のスキン($l_list='l_list.html')は、構成・システム的には、ほとんど全て、メイン画面と同じです。
では何が違うか、というと、次の通り。
これらのことにより、フレーム型にするときなど、メニュー部分をこの画面にしてやると都合がいいです。
それでは、実際にデザインを変えてってみましょう。実例あげてった方が分かりやすいですからね。まあ、一から十までは説明できないので、0.5くらいまでを目標に。(ぇー…まず、DLすると同梱されている、skin/フォルダの中の、l_skin.html と ../cgi.css を開いてください。デフォルトのメインスキンのやつと、スタイルシートですね。
最初の状態で描きこみをしていくとこのようになります。
(サンプルイメージなので、リンクは効かないです)
ちなみにこの解説当時のスキン。
(あとでスキン変わるかもなので、違ったら適当に照らし合わせてください)
また、デザインを変えてるとき、そのHTMLをブラウザで開きつつ確認できますが、最初はスタイルシートのリンク部分が、<link rel="stylesheet" type="text/css" href="$CSS">と、$CSSと なってるので、../cgi.cssなどとやればわかりやすいかも。
それでは、デザインをちょっとずつ変更していってみましょう。
スキン345行目付近から、親記事のソースが始まります。で、422行目に次のような記述があるので書き換えます。
<font class="name" title="$AGENT">$NAME</font> ↓ <font class="name" title="$AGENT" color="$FONT_COLOR">$NAME</font>
ちなみに、レスのは463行目にあるので、同じように。class="name"の クラス指定は、../cgi.cssの53行目にあります。同じように、題名や日付のフォントカラーなども簡単に変えられるので、いろいろ試してみてください。
スレッドのテーブルの上部に、タイトルの部分がありますが、そこの背景色に、投稿者が選んだ背景色を置いてみましょう。変えるところは、361行の、TDタグの中です。
<TABLE cellspacing=0 cellpadding=5 class="rtable"> <TR><TD class="rtd"> ↓ <TABLE cellspacing=0 cellpadding=5 class="rtable"> <TR><TD class="rtd" bgcolor="$ETC_COLOR">
しかし、せっかく色をつけたのに、今のままでは色が合いません。同系色や反対色では結構合うのに、その間は合わない色も多いです。
対応策としては、周りの色を灰色にしたり、(彩度ないのはどの色も合います)周りの色も選択色にしてしまいましょう。
ここでは、周りの枠や題名の色を選択色に変えてみます。ついでに、レスの仕切り棒(HR罫線)の色もレスの色にしてみます。説明は同じようなものなので、省略。
結構変わってきましたが、ちょっと枠が濃い気がするので、borderスタイルを変えてみます。
点線にしてみましょうか。タイトル枠も、背景に画像を使って淡くしてみましょう。(img/mesh.gif)
変えるところはだいたいさっきのとこです。class="rtd"のある TDタグの中と、HR罫線ですね。
<TABLE cellspacing=0 cellpadding=5 class="rtable" style="border-color:$FONT_COLOR;"> <TR><TD class="rtd" bgcolor="$ETC_COLOR" style="border-color:$FONT_COLOR;"> ↓ <TABLE cellspacing=0 cellpadding=5 class="rtable" style="border-color:$FONT_COLOR; border-style:dashed;"> <TR><TD class="rtd" bgcolor="$ETC_COLOR" style="border-color:$FONT_COLOR; border-style:dashed;" background="img/mesh.gif">
*sketch bookとなってる、メインタイトルの位置を変えてみます。今は、「*sketch book」とメニューの「Home/ Reload/ …」などが、TABLEタグで1行にされてるので、TABLEタグとってみましょう。
77行目(上) と 145行目(下)あたりです。
<table cellspacing=0 cellpadding=0 width="100%"><tr><td> <a href="$script" title="最初のページへ"> <font class="maintitle">*$title</font></a> </td><td align=right> ↓ <div align="left"> <a href="$script" title="最初のページへ"> <font class="maintitle">*$title</font></a> <hr size="1" class="hra"> </div>
</td></tr></table> <hr size="1" class="hra"> ↓ <hr size="1" class="hra">
これくらいやっただけですが、けっこー変わりましたね。仕上げに、スタイルシートをちょっとだけいじろうと思います。スレッドレスフォームを開いたらフォームの色が合わなかったのでｗついでにHR罫線のスタイルも変えてみます。
まず、../cgi.cssを開いてみてください。37行目に/* フォームタグ系スタイル */というのと、48行目に 「.hra { ～ } /*HR罫線*/」 というのがあります。
/* フォームタグ系スタイル */
input,textarea,select{
font-family:MS UI Gothic;
background-color:#ffffff;
}
input,textarea{
border-width:1px;
border-style:solid;
border-color:#ccddee;
}
↓
input,textarea,select{
font-family:MS UI Gothic;
background-color:#ffffff;
color:#aabbcc;
}
input,textarea{
border-width:1px;
border-style:dashed;
border-color:#ccd5dd;
}
/*HR罫線*/
.hra{
color:#ccddee;
height:1px;
border:1px solid #ccddee;
}
↓
.hra{
color:#ccddee;
height:1px;
border:1px dashed #d9e0e6;
}
最後に、一番簡単にデザインを変わった感じに見せる方法を。それは、壁紙を変えることです。
部屋などでも、置物は前と同じでも、壁紙やカーテンを変えるだけで、雰囲気がすごく変わりますよね。それと同じで、ページの雰囲気は背景の壁紙や色で大きく変わります。それから文字揃え、フォントの大きさ、カラー、余白、などでしょうか。
そんなわけで、ちょっと試しに背景をこのページのものに変えてみましょう。
body{
border-top:12 solid #e6f3fc;
border-left:10 solid #e6f3fc;
border-right:2 solid #e6f3fc;
margin:25 0 0 0;
text-align:center;
background:#ffffff url() no-repeat fixed 100% 100%;
･･･
↓
body{
margin:32 4 0 102;
text-align:right;
background:#ffffff url(../img/frame_.jpg)
no-repeat fixed -100 50%;
･･･
こんなんなりました。
そんなわけで、デザインの基本的なところをちまちまいじって紹介してみましたが、いかがでしたでしょうか？少しでもスキンのイメージを感じとってもらえたら、してやったりです。
あ、一応、上で実際に変えた後のスキンも置いておきます。
…とりあえず、自分であれこれいじってみることが、一番早く理解できる近道なので。(笑)
途中、迷子になることもあるかもしれませんが、恐れることなく、周りをよく見ながら、順を追って進んで行ってくれれば、結構道は開けるものです。貴方ならではの、素敵なデザインを造ってみてください。
ver2.0から、ブラウザからスキンのデザインの変更ができるようになりました。管理画面のスキンデザインの変更というところからです。また、スキンの選択からは、スキンフォルダに入ってる、スキンファイルから選んで、デフォルトのスキンにすることができます。どちらも、選択リストに並ぶのは、ファイル名に以下のルールがあります。
例えば、「l_skin_ten.htm」 のファイルはリストに加えられますが、「l_ten_skin.htm」 や 「l_skin_ten.txt」 の名前のファイルは、加えられません。
スキンデザインの変更では、分割タイプを選ぶと、<!--○○_START--> ～ <!--○○_END-->で、ソースが分割されます。
つまり、「ここは親スレッドのソース」、「ここはレイヤーフォームのソース」、などと、役割で分けて編集できるので、一括で見るよりも分かりやすいかと思います。
これで、デザイン作成が、少しでも楽に、楽しくなってくれれば、嬉しいです。