Web Liberty 配布CGI対応 スキン共通 説明書

基本的に Web Liberty の規定に準じます。

• 著作権
  • CGIの著作権は Web Liberty にあります。
  • スキンのレイアウトの著作権は KURAGEYA にあります。
• 著作権表示はページ下部に記述されています。
  • CGI配布元 及び 当サイトの著作権表示の削除は禁止です。
    • WebLibertyの規定に従って著作表示の場所を移動する場合、同時移動は可能です。
    • 素材屋やアプレットの著作権表示の移動に関してはそちらの利用規定をご覧ください。
  • お絵描きアプレットを使用するときはアプレット作成者の著作権表記を追記します。
    たとえば、しぃペインターと動的パレットを使用する場合は、 /  と Designed by  の間に以下のようなリンクを挿入するとよい感じです。

    <a href="http://shichan.jp/">ShiPainter</a> /
    <a href="http://wondercatstudio.com/">DynamicPalette</a><br />

• 無断再配布・転載は禁止です。

• スキンをダウンロード及び使用したことによって トラブルや損害が発生しても、
  当サイトはその責任は一切負わないものとします。

• ソースの書き換えなど、カスタマイズは基本的に自己責任で自由です。
  背景や文字の色、タイトル、リンクなどを変更するだけでもだいぶイメージが変わります。
• 同梱画像の加工や差し替えもOKです。
  背景画像やタイトルなどは差し替え前提で作っているので、ぜひどんどんカスタマイズしてください。

• 配布目的の流用は禁止です。
• 自分のサイトのデザインやサイト内で使用している他CGIに、スキンのデザインを流用したり、素材を使用したりするのは許可します。
  • そのCGIの製作者が他素材で改造を許可しているかどうかはご自分でご確認ください。
  • 他サイトで配布しているスキン・テンプレとの中途半端な合成は、ご遠慮ください。
  • スキン使用中に限り、新たにリンクや表記等する必要はありません。
    （気になる人は素材屋リンクにでも入れるとよいでしょう）
  • スキンを使用せずにデザインや素材を流用する場合は、盗作などの誤解を避けるため、サイト内のどこかに必ず「デザインを借りている」旨とリンクを記述してください。

スキンをご使用になるには CGIが正常に動作することが前提条件となります。
あらかじめ、CGI設置を完了させ、デフォルトできちんと動くかどうかの動作確認をおこなってください。

この時点でのトラブルは、本体の設置失敗か、もしくは本体のバグです。

• CGIの配布元である Web Liberty に行き、 CGI本体をダウンロードします。
• スキン変更をともなうCGIの更新があったときは、当サイトのスキンがまだ対応していない可能性がありますので、更新情報に注意してください。

• Web Liberty の 各CGI配布ページの説明 や CGIの基本的な設置方法 を参考に、設置します。

• 無事設置できたら、管理画面の[環境設定]、もしくはinit.cgiで初期設定をします。
  （CGIによって違います）
• スキン変更の前に、基本設定と使いたい機能や表示に関する設定をしっかり決めます。

• CGI本体やしぃペインターの設置・使用法・機能等の質問は受け付けません。
  質問や報告があるときは、Web Liberty の 設置サポート などをご利用になるとよろしいかと思います。

• スキン変更の際、ファイルが上書きされます。
  まずデフォルトスキンのバックアップを取っておくと安心です。
• 他のスキンを使用していたり、すでにカスタマイズ済な場合は、すべてをデフォルトのスキンに戻してから変更してください。
  （当サイトのスキンに同梱されていないhtmlファイルはデフォルトを使用することを前提にしています）

Readme_wl.html　　・・・　スキン共通の説明書

●● フォルダ　　・・・　CGIごとに分けています
　　｜
　　├―　common.css　　・・・　スタイルシート
　　├―　○○.html　　・・・　header.html、footer.htmlなどHTMLファイル
　　└―　img フォルダ
　　　　　　　　└―　画像ファイル

※　cartのみ、さらにskinフォルダの階層があります。
※　スキンによってはjsファイルなど他のファイルも同梱していることがあります。
※　「●●-plugin」フォルダはプラグイン用のスキンですが、プラグインを使用しない場合不要です。

• たくさんフォルダがありますが、目的のCGIのフォルダのみ使用します。
  例　：　Web Diary Pro の 1カラムスキンのaデザインを使用したい場合
  「diarypro-1a」の中に入っているファイルで上書きします。（他フォルダは廃棄してもかまいません）
• common.css 、 ○○.html 、 img フォルダ などを、サーバーの skinフォルダ にアップロード・上書きします。
• ブラウザで表示を更新して、スキン変更が反映されたか確認します。
  • スキン変更後に何らかの問題が発生した場合、当サイトのスキンに原因があると思われます。
    サポート板に報告して下さい。
    問題によっては解決できるかもしれません。
  • うまくスキン変更できたら、あとはカスタマイズするなり自由にしてください。

• Web Liberty で配布されているCGIを同一デザインで使えるよう、あまりスキンが必要ないかもしれないものも含めて、なるべくスキンセットにそろえています。
• 日記系スキンセット
  • Web Diary - diary フォルダ
  • Web Diary Professional - diarypro-1a / diarypro-1b / diarypro-2 / diarypro-3 フォルダ
  • Web Memory - memory フォルダ
• 展示・カートスキンセット
  • Web Gallery - gallery / gallery-illust フォルダ
  • Web Gallery Professional - gallerypro フォルダ
  • Web Cart - cart フォルダ
  • Web Cart Professional - cartpro フォルダ
• 掲示板スキンセット
  • Web Board - board フォルダ
  • Web Board Professional - boardpro / boardpro-topics フォルダ
• メール・拍手スキンセット
  • Web Clap - clap フォルダ
  • Web Mail - mail フォルダ
  • Web Mailplus - mailplus フォルダ
• その他スキンセット
  • Web Analyze - analyze フォルダ
  • Web Chat - chat フォルダ
  • Web Editor - editor フォルダ
  • Web Limit - limit フォルダ
  • Web Link - link フォルダ
  • Web Reader - reader フォルダ
  • Web Scheduler - scheduler フォルダ
  • Web Search - search フォルダ
  • Web Stock - stock フォルダ

• Web Diary Professional は　ブログの機能を一通り備えた日記用CGIです。
• 記事にHTMLタグを使用することができます。（xhtmlに沿った正しい記述）
• デザインによっては、1カラム、2カラム、3カラムがありますが、基本は2カラムです。
  Web Cart Professional、Web Gallery Professional も同じようにすれば1カラムや3カラムが可能ですが、実用性がなさそうなので2カラムしか作っていません。
• CGI製作者 ないと様による詳しい機能解説や活用方法の一部
  • Web Diary Professional Ver4
  • 機能解説
    • お絵かきアプレットとの連携
    • 動的パレットの導入
    • 携帯メールでの投稿
    • ファイルアップロード機能（日記の任意の場所に表示させる方法）
    • HTML書き出し機能
    • 本文の省略表示機能

• 環境設定で「ナビゲーションの表示位置」を「前に表示」にする必要があります。
• まだ動作確認が十分ではありませんので使用には注意してください。（2006/8/10時点）
  • WindowsXP　→　IE6、Firefox、Opera
  • Mac　→　未確認（情報提供お願いします）

非スクリプト環境の場合のナビゲーションの表示

• テーブルに入ったナビゲーションが表示されるはずです。
  テーブルが横にひろがって少々見た目が悪いですが、内容は問題なく閲覧できると思います。
  header.html内の33行目を削除かコメントアウトするとどういうデザインか確認できます。
• この場合のスタイルは、common.cssで指定しています。

スクリプト対応環境の場合のナビゲーションの表示

• ポップアップするナビゲーションが上部にまとまっています。
• この場合のスタイルは、1column.cssで指定しています。

ナビゲーションの透過について

• IEと透過png対応ブラウザに合わせて以下の場所で blockクラスにボックス透過を指定しています。
  色や画像を変更したい場合は、上記の箇所を変更してください。
  • common.css の「background-color: #FFFFFF ;」で IE用の背景色 を指定
  • 1column.cssの「filter: progid:DXImageTransform.Microsoft.Alpha(opacity= 80 );」で 80%透過 を指定
  • 1column.cssで、IEに無効な属性セレクタを使って
    「 background: url("img/alpha.png"); 」で alpha.png という80%に透過した画像を背景に指定

• もっとも一般的な形式。

• 情報量の多いブログに向いている形式。
  ナビゲーションが２列に分かれるので、横幅をかなり大きく必要とします。

• Web Memory は　一言日記CGIです。
• <a href="〜">リンク</a> <em>強調</em> <strong>強く強調</strong> <ins>追加</ins> <del>削除</del> などのインライン要素は使えそうです。
  文頭や文末に改行を入れたい場合は手動で <br /> を入れます。
• タグ分類を必要としない場合やいつも内容が短い場合は、memory.htmlに２つ、search.htmlに１つある <br />${ARTICLE_TAG} の前の <br /> を削除するとスッキリします。
• アップロードファイル等は、最新のみ記事内に表示、過去の記事はアイコンにリンクがはられます。
  最新の記事も過去の記事と同じにしたい場合（逆の場合は、逆に上書きすること）は、
  memory.html の 66〜68行の <p> 〜 <!--ARTICLE_FILE_END--> を
  49〜51行の <!--ARTICLE_PAINT_START--> 〜 <p> に上書きします。

• Web Gallery は　ミニ小説などを展示するのに向いているCGIです。
• ナビゲーションがないイラスト管理向きも同梱しています。（gallery-illustフォルダ）
  あらかじめ、すべての記事で、「概要」にミニアイコンを登録する必要があります。
  （登録しないとトップページに表示されません）
• 記事にHTMLタグを使用することができます。（xhtmlに沿った正しい記述）

• Web Gallery Professional は　イラストなどを展示するCGIです。
  機能や外観は、Web Diary Professional に似ていますが、より作品展示に特化しています。
• 記事にHTMLタグを使用することができます。（xhtmlに沿った正しい記述）
• 小説展示の場合は、トップページをリスト形式にカスタマイズしてください。（小説展示向けにする）
• アイコンを作品名に添えてトップページに表示することもできます。（作品名にアイコンを添える）　

• Web Cart は　簡単なショッピングカートCGIです。
• 商品のページを手動で作成する必要があります。
  叩き台としてindex.html、index2.htmlを同梱していますが、フォームさえ間違えなければ、自由に作成することができます。

• Web Cart Professional は　ショッピングカートCGIです。
  機能や外観は、Web Diary Professional に似ています。
• 記事にHTMLタグを使用することができます。（xhtmlに沿った正しい記述）

• Web Board Professional は掲示板やゲストブックの機能をもったCGIです。
• 一部スキンには、トピック形式デザインも同梱されています。（boardpro-topics フォルダ）
• 色選択機能はコチラの配色も参考にどうぞ。
  黒背景のスキンは文字色を変更してください。（文字色選択機能使用時のデフォルトの文字色を変更）

• Web Chat は　チャットCGIです。
• 会話表示形式を変更しています。
  デフォルトの common.js の28行目 article += ' 〜 '; を以下の記述に書き換えて使用してください。
  

  article += '<li style="color:' + color + ';"><em>' + name + '</em> // <span>' + text + '</span>　<span class="date">' + date + '</span></li>';

「改行を変換する」で記事を投稿すると、自動的にpタグにはさまれるので、ブロック要素のタグを中に入れることは好ましくありません。

「改行を変換する」のチェックをはずすと、いろいろなタグを使って装飾することができます。
その場合、本文は何のタグにもはさまれないので、タグも自分で記述する必要があります。

以下のことに気をつけてなるべく正しい記述をしてください。

各記事の題名は h3タグではさまれています。
記事内の細かい見出しは <h4> 〜 </h4> を使うのが適切です。
さらに下位の見出しはh5タグやh6タグになります。

普通の文や画像はすべて <p> 〜 </p> ではさみます。
改行するときは、 <br /> を記述します。（xhtmlなので<br>ではなく<br />）
２回改行したいときは </p><p> を記述します。
もっと改行させたいときは、 </p><p><br /> をその数だけ並べます。

なぜ複数改行は１回pタグを閉じてまたpタグをスタートさせるのかというと、改行タグをたくさん並べるのは良くないとされているからです。
pタグでどのくらいのすきまが空くかは、スタイルシートの設定しだいです。

非序列リスト

• 番号なしの非序列リストは、
  ひとつのリストの前後を <li> 〜 </li> ではさみ、最後に全体を <ul> 〜 </ul> ではさみます。
• 非序列リストのリストマークはスタイルシートの設定です。
  • このように階層をつくることができます。
  • 序列リストも同じように入れ子にできます。

序列リスト

1. 番号つきの序列リストは、
   ひとつのリストの前後を <li> 〜 </li> ではさみ、最後に全体を <ol> 〜 </ol> ではさみます。
2. 序列リストの数字はスタイルシートの設定で変更可能です。

定義リスト

定義語

定義語の説明を記述

定義リストについて

定義リストは、定義語とその説明からなります。
定義語を <dt> 〜 </dt> ではさみ、その説明を <dd> 〜 </dd> ではさみます。
最後に全体の前後を <dl> 〜 </dl> ではさみます。

注意

定義語にはpタグ等を使うことはできませんが、説明のほうはpタグやリストなどのブロック要素も使えます。

引用文はまず <p> 〜 </p> などで普通に記述した後、全体を <blockquote> 〜 </blockquote> ではさみます。

整形済みテキストは <pre> 〜 </pre> ではさみます。

強調したい語を <em> 〜 </em> で、より強調したい語は <strong> 〜 </strong> ではさみます。

追加した情報を <ins> 〜 </ins> ではさむと、下線がつきます。
削除した情報を消さずに <del> 〜 </del> ではさむと抹消線がつきます。

あらかじめスタイルシートで設定しておいて、その独自のクラス名をタグに指定するとさらにいろいろな装飾ができます。

■■■■■■

#D22035 #E2882C #E2D535 #48BB65 #2C8888 #654888

■■■■■■■

#EB2D40 #FFB300 #F4EB00 #9DEB00 #04BB40 #0080AA #402DBB

■■■■■■■

#F27878 #F2CC55 #F2F255 #CCF255 #92E099 #87C3E0 #A387D9

■■■■■■■

#FAC0C0 #FADBA6 #FAFAA6 #DBF2A6 #ADEAAD #B5DBEA #B5C0EA

■■■■■■■

#FFE8E8 #FFF0C8 #FFFFC8 #F0FFC8 #E8FFD8 #E8FCF0 #EAEAFF

■■■■■■■

#E39999 #E3BD75 #E0E07C #BDE07E #99C488 #7AB8B0 #7399B0

■■■■■■■

#B27A7A #C1A045 #B2B245 #90B255 #55A466 #599790 #6F6690

■■■■

#883B44 #888C44 #558844 #3B556C

• 画像を使用しない白黒の線のデザインとなります。
• スタイルシートの #000000 を濃い目のカラーに、 #cccccc を同系色で薄めのカラーに、一括変更するだけで、簡単に全体の色合いを変更できます。
• 横幅の変更は、スタイルシートで簡単にできます。（この手順でほぼOK）

• 線で構成されたデザインです。
• それぞれの色と見出しの背景画像を変更するだけでいろいろイメージを変えられます。
• 横幅の変更は、スタイルシートで簡単にできます。（この手順でほぼOK）

• それほどスタイルシートの指定が凝っていないため、カスタマイズしやすいです。
  • 「Simple1」は白背景でシンプルです。ヘッダ等は枠で囲んでいません。
  • 「Simple2」は黒背景でほとんどの内容を枠で囲んでいます。
  • 「Simple3」は「Simple1」に似ていますが、画像を多く使用しています。
• 好みに近いものを選び、スタイルシートをいじったり画像変更してみてください。
  背景やリンク色を変更するだけでいろいろイメージを変えられます。
• 横幅の変更は、スタイルシートで簡単にできます。（この手順でほぼOK）

• 白背景で極力シンプル。縦一直線に、上から下までつながって表示されます。
• bodyの背景やリンク色の変更だけでもイメージ変わります。
• 横幅の変更はやや難しいです。

• 可愛らしい縦一直線デザイン。
  タイトル背景からノートのような罫線など画像をたくさん使っています。
  • 「Pretty1」はピンクをメインにキュートなイメージ。
  • 「Pretty2」は「Pretty1」を青系にしたもの。
• 横幅の変更は画像をいじる必要があるものが多いので、改造が難しいです。
  アレンジするときは、横幅そのままに背景画像やタイトルの画像変更が比較的簡単。

• ノートのようなデザイン。
• 他デザインはほとんどHTMLファイルは同じものを使用していますが、Notebookデザインは変更箇所に異なるところがあり、変更ファイル数も多いです。
  Notebookデザインから他に変更するときは、一度デフォルトスキンですべて上書きしてください。
• 画像に頼っているため、あまりカスタマイズできません。

• 十字を意識したデザイン。
  意図的に左を空けているので使いどころが難しいかも。
  • 「Cross1」は白背景画像専用。
  • 「Cross2」は黒背景専用。
• 背景を変更することでイメージチェンジです。大きめの写真素材の使用がオススメ。
  右上か右下に繰り返しなしで固定するのがよいです。
• boardproスキンのみ、他のデザインとHTMLファイルに違う変更を加えています。

div#container で横幅を指定しているスキンの場合、
全体の右寄せ・左寄せ・中央寄せは以下の指定で変更できます。

• 右寄せ
  • body に text-align:right; と padding-right:○○px; を指定します。
  • div#container に margin:○px ○px ○px auto; を指定します。
• 左寄せ
  • body に text-align:left; と padding-left:○○px; を指定します。
  • div#container に margin:○px auto ○px ○px; を指定します。
• 中央寄せ
  • body に text-align:center; を指定します。
  • div#container に margin:○px auto ○px; を指定します。

デザインによって違いますが、基本的には以下の部分が横幅に関わっています。
これ以外にも横幅が指定されていることがあるのでその場合は合わせて調整してください。
width: 〜 ; を検索で探しながら少しずつ変更していくとよいです。
（フォーム項目横幅のwidth: 6em; や border-width: 〜 は除く）

1カラム、WDP,WCP,WGP以外のCGIのスキンの場合

• pre、div#container の数値を変更します。

2カラムの場合

• 記事の横幅
  • pre、div#logs を同じ量だけ増減します。
• ナビゲーションの横幅
  • div#navigation、div#navigation form dl dd input を同じ量だけ増減します。
• 全体の横幅
  • 最後にそれぞれで増減した分、 div#container を修正します。

3カラムの場合

• ナビゲーションの横幅
  • div#navigation 、 div#navigation form dl dd input 、 div#navigation table を同量増減します。
  • div#logs、div#footer 左marginをその分だけ修正します。
• インフォメーション（右側のナビゲーション）の横幅
  • div#information を同量増減します。
  • div#logs、div#footer の 右marginをその分だけ修正します。
• 管理モード
  • div#work ul.menu 、 div#work ul.menu li a 、 html>body div#work ul.menu li a を同量増減します。
  • div#admin の 左marginをその分だけ修正します。

デザインによって違いますが、基本的には以下の部分です。

2カラムの場合

• 記事とナビゲーションを左右入れ替え
  • div#navigation と div#logs の float: 〜 ; を入れ替えます。
  • 他微調整。

3カラムの場合

• ナビゲーションとインフォメーションの位置を入れ替える場合
  • div#navigation 、 div#information の内容を入れ替えます。
• 記事・ナビゲーション・インフォメーションの並びにする場合
  • div#navigation の left:○○px; を right:●●px; に変更します。
    （数値はインフォメーション横幅＋余白）
  • div#logs の margin を修正します。
    （右margin の数値はナビゲーション横幅＋余白＋インフォメーション横幅＋余白）
    （左margin の数値は0pxもしくはいくらかの余白）
• ナビゲーション・インフォメーション・記事の並びにする場合
  • div#information の right:○○px; を left:●●px; に変更します。
    （数値はナビゲーション横幅＋余白）
  • div#logs の margin を修正します。
    （右margin の数値は0pxもしくはいくらかの余白）
    （左margin の数値はナビゲーション横幅＋余白＋インフォメーション横幅＋余白）

Web Diary Professionalスキンは、基本的にカレンダーをテーブルで表示していますが、diarypro-1bのみカレンダーを横並びに表示しています。
これを、WDP,WCP,WGPの2カラムに移植することができます。
（3カラムは、カレンダーの高さ指定や他ナビゲーションの配置箇所の変更などを行えば可能です。）

なお、カレンダーを横並びにする場合、環境設定で「ナビゲーションの表示位置」を「前に表示」にする必要があります。

• navigation.html の
  <!--SKIN_CALENDAR_HEAD_START 〜 SKIN_CALENDAR_FOOT_END--> を削除します。
• navigation.html のページ先頭に、diarypro-1b の navigation.html の
  <!--SKIN_CALENDAR_HEAD_START 〜 SKIN_CALENDAR_FOOT_END--> をコピーします。
• common.css の div#navigation table {　〜　}　〜　div#navigation .today {　〜　} の部分に、
  （1カラムAに移植の場合 #navigation .block table tr th {　〜　}　〜　div#navigation .today {　〜　}）
  diarypro-1b の common.css の /* カレンダー↓ */　〜　/* カレンダー↑ */ を上書きします。

デフォルトだと環境設定で設定したタイトルに「最初のページへ戻る」リンクがはられています。

メニューに同様の効果を持つリンクをつけたい場合、 header.html を修正します。
たとえば以下のような感じに追記します。（項目名は「最新」や「一覧」などが適切かと）

動的パレット等を使ったとき、当サイトのスキンは全体の横幅が狭いため、回り込めずに下に移動してしまいます。

以下のようにキャンバスやパレットが入るdivの横幅を広くすれば、回り込んでくれます。
数値や指定は自分が使用するブラウザによって多少変更してみてください。
（IEとFireFoxで確認済み、Macはわかりません）

• diarypro-1a の ナビゲーションは、項目を全て表示してもおさまるように、2段になっています。
  これを1段にしたい場合、 navigation.html を修正してください。
• <!--SKIN_NAVIGATION_FOOT_START--> 〜 <!--SKIN_INFORMATION_HEAD_END--> を
  削除します。
• 下に2箇所ある SKIN_INFORMATION_FOOT を SKIN_NAVIGATION_FOOT に変更します。

Web Gallery Professionalスキンは、インデックスにミニ画像を横に並べる表示を想定して作っています。
小説タイトルなどをリスト形式で並べたい場合は以下のカスタマイズをしてください。

• gallery.html の <!--SKIN_GALLERY_HEAD_START 〜 SKIN_GALLERY_FOOT_END--> を
  以下のように書き換えます。

  <!--SKIN_GALLERY_HEAD_START-->
  <ul>
  <!--SKIN_GALLERY_HEAD_END-->

  <!--SKIN_GALLERY_START-->
  <li><a href="${ARTICLE_URL}" title="${ARTICLE_SUBJ}">${ARTICLE_INFO}</a></li>
  <!--SKIN_GALLERY_END-->

  <!--SKIN_GALLERY_DELIMITER_START-->
  </ul><ul>
  <!--SKIN_GALLERY_DELIMITER_END-->

  <!--SKIN_GALLERY_FOOT_START-->
  <!--GALLERY_ALL_START--></ul><ul><li><a href="${INFO_PATH}?field=${GALLERY_FNO}">すべてを表示</a></li><!--GALLERY_ALL_END--></ul>
  <!--SKIN_GALLERY_FOOT_END-->

• 次に、list.html の <p> 〜 </p> を以下のように書き換えます。

  <ul>
  <!--SKIN_GALLERY_HEAD_END-->

  <!--SKIN_GALLERY_START-->
  <li><a href="${ARTICLE_URL}" title="${ARTICLE_SUBJ}">${ARTICLE_INFO}</a></li>
  <!--SKIN_GALLERY_END-->

  <!--SKIN_GALLERY_FOOT_START-->
  </ul>

Web Gallery Professional は、ミニ画像→アイコン→タイトルの順で作品名として表示されます。
たとえば気合いの入ったイラストはミニ画像（サムネイル）、お絵描き掲示板絵やログ絵はアイコンというふうにすると便利なのかも。

アイコンを作品傾向などとして作品名に添えて利用したい場合は、以下のカスタマイズをしてください。

• まずアイコンをタイトル代わりに表示させないようにします。
  Gallery.pm の1096〜1097行あたりにある以下の記述を削除します。

  } elsif ($icon_ins->get_string) {
  $article_info = $icon_ins->get_string;

• 次に、作品リストでタイトルにアイコンをつけます。
  list.html と gallery.html の ${ARTICLE_INFO} の近辺に
  <!--ARTICLE_ICON_START-->${ARTICLE_ICON}<!--ARTICLE_ICON_END--> を追記します。
  タイトルリンクの後ろだと以下のようになります。

  <a href="${ARTICLE_URL}">${ARTICLE_INFO}</a>
  <!--ARTICLE_ICON_START-->${ARTICLE_ICON}<!--ARTICLE_ICON_END-->

• view.html の25行目の、作品ページでのアイコンの表示
  <!--ARTICLE_ICON_START--><p>${ARTICLE_ICON}</p><!--ARTICLE_ICON_END-->
  を削除します。
  必要があれば、タイトルの前か後ろにアイコンを表示してください。

  <dt>作品名</dt><dd>${ARTICLE_SUBJ}<!--ARTICLE_ICON_START-->${ARTICLE_ICON}<!--ARTICLE_ICON_END--></dd>

Web Cart Professional は、ひとつひとつをテーブルで囲んでいる仕組みなので、そのテーブルタグに「float:left;」h4に「clear:left;」を指定すれば、まわりこませることができます。
しかし、IEで表示がバグりやすい（一部が消えるなど）ので、当サイトのスキンでは取り入れていません。
これを、たとえば値段や商品名も一緒にひとつの画像にしてしまう、もしくは値段や商品名の表示をなくしてしまえば、問題なく横並びにすることができます。

• catalog.html の <!--SKIN_CATALOG_HEAD_START--> 〜 <!--SKIN_CATALOG_FOOT_END--> を以下のように変更します。

  <!--SKIN_CATALOG_HEAD_START-->
  <div class="images"><p>
  <!--SKIN_CATALOG_HEAD_END-->
  <!--SKIN_CATALOG_START-->
  <a href="${ARTICLE_URL}" title="${ARTICLE_SUBJ}（${ARTICLE_PRICE}円）">${ARTICLE_INFO}</a>
  <!--SKIN_CATALOG_END-->
  <!--SKIN_CATALOG_DELIMITER_START-->
  </p></div><div class="images"><p>
  <!--SKIN_CATALOG_DELIMITER_END--> <!--SKIN_CATALOG_FOOT_START-->
  <!--CATALOG_ALL_START--><br /><a href="${INFO_PATH}?field=${CATALOG_FNO}">すべてを表示</a>& lt;!--CATALOG_ALL_END--></p></div>
  <!--SKIN_CATALOG_FOOT_END-->

• リスト表示も同じようにする場合は、list.html の <div class="images"> 〜 <!--SKIN_CATALOG_FOOT_START--> を以下のように変更します。

  <div class="images"><p>
  <!--SKIN_CATALOG_HEAD_END-->
  <!--SKIN_CATALOG_START-->
  <a href="${ARTICLE_URL}" title="${ARTICLE_SUBJ}（${ARTICLE_PRICE}円）">${ARTICLE_INFO}</a>
  <!--SKIN_CATALOG_END-->
  <!--SKIN_CATALOG_FOOT_START-->
  </p>

• 最後にスタイルシートで、div#catalog .images p （pタグ）、div#catalog .images p a （リンク）、div#catalog .images p img （画像の余白や枠線）を指定してデザインを調整してください。

曜日の表記とカレンダーの月表記を英語や和名に変更できます。
デザインに合わせて変更するとよいでしょう。
表示位置や「2006/12/23」を「2007年12月23日」に変更したいときや「2007.7」の｢.」を「/」にしたいときなどはスキンファイルをカスタマイズしてください。

• lib/webliberty/App/Init.pm に以下の項目があります。
  （WDPは208行、WCPは210行、WGPは195行あたりです）

  #曜日の表記
  @{$init->{weeks}} = ('日', '月', '火', '水', '木', '金', '土');

  #カレンダーの月表記
  @{$init->{months}} = ('1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12');

• これをたとえば以下のように変更できます。

  #曜日の表記
  @{$init->{weeks}} = ('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');

  #曜日の表記
  @{$init->{weeks}} = ('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');

  #カレンダーの月表記
  @{$init->{months}} = ('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

  #カレンダーの月表記
  @{$init->{months}} = ('睦月', '如月', '弥生', '卯月', '皐月', '水無月', '文月', '葉月', '長月', '神無月', '霜月', '師走');

• Web Board Professional は、lib/webliberty/App/Board.pm の327行に
  Web Board は Board.cgi の539行に
  以下の項目があります。

  my @week = ('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');

• これをたとえば以下のように変更できます。

  my @week = ('日', '月', '火', '水', '木', '金', '土');

  my @week = ('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');

デフォルトでは親分類と子分類は「親分類::子分類」と表示されています。

• Web Diary Professional だと、lib/webliberty/App/Diary.pm の774行に $1::$2 があります。
  （WCPは Catalog.pm の683行、WGPは Gallery.pm の705行あたりです）
• lib/webliberty/App/List.pm にも $1::$2 があります。
  （WDPは1231行、WCPは904行、WGPは904行あたりです）
• この２箇所の $1::$2 の :: を変更すればよいです。
  • たとえば $1*$2 に変更すると「親分類*子分類」と表示されます。
  • また、$1&gt;$2 に変更すると「親分類>子分類」と表示されます。

文字色選択機能を使用しているとき、文字色を選択しないで投稿した記事の文字色は、デフォルトでは「#000000」があてはめられます。
しかし、背景が黒のスキンだと文字が見えなくなり、またデザインに合わないときがあります。

• Web Board Professional は、lib/webliberty/App/Board.pm の370行に
  Web Board は Board.cgi の577行に
  $color_ins->set_string('#000000'); という記述があります。
• これを背景色に適した色に変更すればよいです。

2006.5.5

WDPスキン「Scroll Ver 1.0」「Simple Ver 1.0」「Notebook Ver 1.0」　１パックにまとめて試験的配布開始

2006.5.6

WDPスキン「Scroll Ver 1.1」「Simple Ver 1.1」「Notebook Ver 1.1」　バージョンアップ
（記事内でタグを使用したときの表示を整えるスタイルシートを追加）
同梱説明書を作成、それぞれのスキンを分けて正式に配布開始

2006.5.20

WDPスキン「Scroll Ver 1.2」「Simple Ver 1.2」「Notebook Ver 1.2」　バージョンアップ
（Web Diary Professional Ver 4.14 配布に合わせて一部修正）

2006.5.28

WBPスキン　試験的配布開始

2006.6.17

WDPスキン「Scroll Ver 1.3」「Simple Ver 1.3」「Notebook Ver 1.3」　バージョンアップ
（Web Diary Professional Ver 4.22 配布に合わせて一部修正）

2006.6.25

WDPスキン「Scroll Ver 2.0」　バージョンアップ（記述の見直し） & バリエーション追加
「Simple Ver 1.3」「Notebook Ver 1.3」　3カラムレイアウトスキンを同梱

2006.8.10

WDPスキン　全バージョンアップ（記述を微修正） & 「Scroll」にバリエーション追加
1カラムレイアウトスキンを人柱的配布開始

2006.9.18

WDPスキン　全バージョンアップ & バリエーション追加
配布ファイルの構成を変更（これまでスキン名別にしていたものを、○カラム別に変更）
WBPスキン　「Scroll」「Simple」をひとつにまとめて配布開始 （Ver 2.0）
WBPスキン　WDスキン　WMスキン　試験的配布開始

2007.4.15

配布されているほとんどのCGIにそれぞれ同デザインで対応させたスキンがすべて入っているスキンセット「Simple1」「Simple2」「Pretty1」「Pretty2」を仮設ページで配布開始。

2007.7.8

説明書を同梱し、日記系、掲示板、メール・拍手、その他にわけたスキンセットを正式配布開始。
古いスキンを撤去。「Simple1・2・3」「Basic1」「Scroll1」「Pretty1・2」「Cross1・2」「Notebook1」配布。

2007.7.21

WDPスキンの「最新の画像」リストのデザインを変更。
WDPスキン　WCPスキン　WGPスキン用のプラグイン用スキンを同梱。
「Notebook1」のWeb Memoryスキンのデザインを少々変更。

2008.11.3

Web Diary Professional用タグ入力支援エディタ設置セット配布開始。
（png画像ボタン / gif画像ボタン / 文字ボタン の３種類）

2009.11.29

日記系、展示・カート、掲示板、メール・拍手、その他にわけなおして、スキンセット全バージョンアップ。
（Web Memory、Web Scheduler を大きく変更 & Web Galleryにイラスト管理向けバージョンを作成）
「Line1」配布。