【alevirita】OrderSystem-DX 書き換えあれこれ

免責

Rev1.4でいくつか採用されたようです。アップデートしてください。

OrderSystem-DX（ver.1.1）以降の気になるところを書き換えるメモ。バックアップを取った上の自己責任でお願いいたします。

一部に、書き換えサンプルとしてosdx-から始めた独自のクラス名を提示していますが、適当に分かりやすく変えてください。

Rev1.4修正

【templateフォルダ内】<ul>・<ol>・<dl>直前の<p>削除
【templateフォルダ内】</ul>・</ol>・</dl>直後の</p>削除
【help.html】入金方法の項</ol>直後の</table></p>削除

【CSS/カスタマイズ】floatを使わずdisplay:inline-blockでアイテムを横並び

現在（Rev2.4）までの状況とデメリット: float:leftを使っており、使うテンプレートごとに並べる個数を調整しなければならない。<br>をfloat解除として使うという無駄がある。

%の幅指定と幅のmin・maxの指定により、使用テンプレートの横幅を気にすることなく（いちいち幅を計算してCSSを書き直したり、一列に並べる数の設定を変更しないでも、不自然なほど余白が多すぎたり幅狭くなりすぎたりせず）まあまあそれなりな感じに。センタリングするとさらに誤魔化しきく。

.osdx-ItemList { /* Rev.1.4以前は .ItemList *//* 註 */
	margin: 0 auto;
    max-width: 880px; /* 必要なら全体の最大幅（なくてもいい） */
    text-align: center; /* センタリング（なくてもいい） */
    letter-spacing: -.4em; word-spacing: -.7em; /* 改行による隙間埋め */
    
}
.osdx-item { /* Rev.1.4以前は .item */
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: .5%; padding: .5%; /* 外内の余白 */
    border: 2px solid gray; /* ボーダー */
    background-color: #FFF; color: #000; /* 背景・文字色 */
    letter-spacing: normal; word-spacing: normal; /* 隙間埋め修正 */

    /* アイテム一つ分の横幅 */
      width: 24%; /* 【100】÷【一列に並べるアイテム数】-【1】※端数切捨 */

    /* アイテム一つ分の最低横幅 */
      min-width: 120px; /* サムネ横幅（ステータス画像横幅）以上推奨 */
      
   /* ボックスサイズにボーダーやpaddingを含める */
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
.osdx-item{ /* Rev.1.4以前は .item *//* display:inline-block未対応のIE6とIE7用 */
    *display:inline;
    /*
        IE7はbox-sizing未対応＋IE6・7は%の計算がアホなので、
        一列に並ぶアイテム数が一つ減ります。
        そんなに気にならないと思いますが
        古いIE6,7でもどーーーしても一列に並べるアイテム数を他ブラウザとあわせたいときは
        調整して少し少ない横幅を指定します。
    */
    *width: 22%; /* アイテム一つ分の横幅より2～3%以上少ない数値 */
}

一列に並べるアイテム数を流動にしたければ、.osdx-itemの横幅を%じゃなくpx値等で指定します。

モダンブラウザ向けに対しては、Media Queriesを用いて横幅を変えたりもできます。

註

Rev.1.4以降で .ItemListに該当するブロックがないバージョンがありました。Rev.2.4にはあるのでバージョンアップしてください。

【CDP対応/カスタマイズ】フォームのボタンなどの横幅指定を削除

HTMLでもCSSでも決めうちpx幅指定だと、文字サイズやテンプレートに指定されたinputの余白によって文字列が見切れたり、アイテムブロックの横幅変更したときなどに細かいサイズ修正したいときに編集箇所が多くなって面倒なので、pxによるwidth指定は害悪、削除します。

幅指定以外になんかあったときのためにかわりにクラスつけます（クラス付けについてはRev1.4で採用済み）。

Rev1.4以降

plus.cssを開き、/* フォームのボタンなどのwidth指定 */から/* カート用のテーブル */手前まで削除

Rev1.4以前

Rev1.4で採用済（ただしpx指定のままなので見切れる可能性があるという不都合はそのまま。）

cgi/sub.cgi283行目あたり

変更前

$cartin = "<input type=\"button\" value=\"▲：在庫不足\" style=\"width:90px;\">\n";

変更後

$cartin = "<input type=\"button\" value=\"▲：在庫不足\" class=\"osdx-notice\">\n";

cgi/sub.cgi283行目あたり

変更前

$cartin = "<input type=\"button\" value=\"△：購入上限\" style=\"width:90px;\">\n";

変更後

$cartin = "<input type=\"button\" value=\"△：購入上限\" class=\"osdx-notice\">\n";

cgi/sub.cgi303行目あたりと index.cgi674行目あたり

変更前

$cartin .= "<select name=\"add\" style=\"font-size:100%;width:30px;\">";

変更後

$cartin .= "<select name=\"add\" class=\"osdx-nom\">";

cgi/sub.cgi308行目あたりと index.cgi676行目あたり

変更前

$cartin .= "<input type=\"submit\" value=\"カートに入れる\" style=\"width:90px;\">";

変更後

$cartin .= "<input type=\"submit\" value=\"カートに入れる\" class=\"osdx-cart\">";

どうしても必要があればplus.cssで幅指定します。が、幅指定する利点はあんまないので、しないでいいのではないのかと思います。

input.osdx-notice{ width: auto; }
select.osdx-nom{ width: auto; }
input.osdx-cart{ width: auto; }

他は、index.cgiとsub.cgiをwidth:で検索して適宜自由に。幅指定は全削除しても基本的に問題ないです。

【修正/カタスタマイズ】plus.css

Rev1.4で採用済

width: 100%;は確実になにかと問題の元になるので2箇所削除。

templateフォルダ内

Rev1.4で採用済

CDPに則って、より多くのテンプレートで多分崩れにくく。

【CDP対応】help.htm

方法1

<div id="KIZI">直後に
```
<h2 class="osdx-help">詳しい解説</h2>
<div class="text">
```
を追加（見出し内容は任意で変更してください）
198行目あたりの<div class="text">を削除

方法2

<h3>見出し内容</h3>を総て<h2>見出し内容</h2>に変更
</h2>直後に<div class="text">を追加

最初（<h2>お買い物方法）以外の<h2>直前に

<ul class="modori">
<li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>

を追加

198行目あたりの<div class="text">から<hr>は削除

【CDP対応】link.htm

<div id="KIZI">直後から<h2>素材</h2>直前まで削除、委託先書店様・ダウンロード販売サイト様・サークルの活動案内諸々のリンク一覧をCDPの形式に則って作成

例

<h2>委託先書店様</h2>
<div class="text">
 <ul>
   <li><a href="URI">書店名</a></li>
   <li><a href="URI"><img src="バナーURL" alt="書店名"></a></li>
 </ul>
<ul class="modori">
<li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>

<h2>素材</h2>直後に<div class="text">を追加
137行目あたりの<div class="text">を削除

【CDP対応】order.htm

方法1

<div id="KIZI">直後に
```
<h2 class="osdx-order">一覧</h2>
<div class="text">
```
を追加（見出し内容は任意で変更）
60行目あたりの<div class="text">を削除

方法2

33行目あたり<h1>$cnf{'title'}【$action】</h1>から【$action】を削除

<div id="KIZI">直後に

<h2 class="osdx-order">$action</h2>
<div class="text">

を追加

60行目あたりの<div class="text">を削除

【CDP対応】slip.htm

<body>を<body class="osdx-slip">に変更

16行目あたり

変更前

<h2>宛名カード</h2>
<p>

変更後

<h2>宛名カード</h2>
<div class="text">

24行目あたり

変更前

</p><br><br>

<hr>

<h2>納品書</h2>

変更後

<br><br>
<ul class="modori">
<li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>

<h2>納品書</h2>
<div class="text">

31行名あたり、<h3>ご注文情報</h3>直後の<p>は不要（削除）
38行名あたり、</table>直後の<p>は不要（削除）

75行目あたり

変更前

</p>

</div>

変更後

<ul class="modori">
<li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>

</div>

必要に応じてplus.cssでbody.osdx-slip #PAGETOP{指定}やbody.osdx-slip #KIZI{指定}でレイアウトを整える

【CDP対応】temp.htm

方法1

27行目あたりの<link rel="stylesheet" type="text/css" href="$cnf{'css'}">を削除
新たにCSSを作成する

方法2

<body>を<body class="osdx-temp">に変更
<body class="osdx-temp">直下に<div id="PAGETOP">を追加
</body>直前に</div>を追加
<div style="margin:30px"></div>は削除してもしなくても任意
必要に応じてplus.cssでbody.osdx-temp #PAGETOP{指定}やbody.osdx-temp element{指定}でレイアウトを整える

ところで見出しレベル上げたほうがよくね？

方法1

<h3>$cnf{'title'}【$action】</h3>を<h1>$cnf{'title'}</h1><h2>$action</h2>に変更

方法2（ローラー作戦）：未確認

<h3>$cnf{'title'}【$action】</h3>を<h1>$cnf{'title'}【$action】</h1>に変更
index.cgiを<h3>と</h3>で文字列検索し、それぞれ<h2>・</h2>に置き換える

【カスタマイズ】著作権部分をcss指定に

Rev1.4で採用済

help.htm・link.htm・order.htm・temp.htm

変更前（＃KIZIブロック終わり付近）

<br><br><br>
<div align="center"><font size="-1">
<a href="$cnf{'copy_right4'}" target="_blank">OrderSystem-DX $cnf{'version'}</a>
</font></div>

変更後

html

<div class="osdx-cgi_copyright">
<a href="$cnf{'copy_right4'}" target="_blank">OrderSystem-DX $cnf{'version'}</a>
</div>

plus.css（追加）

div.osdx-cgi_copyright{
margin-top: 1em; /* <br><br> */
padding-bottom: .3em; /* 必要なら */
font-size: small; /* <font size="-1"> */
text-align: center; /* <div align="center"> */
}

必要以上に余白をとったり極端に小さい文字にしたり等見えづらくすることは厳禁です。

メニューのカテゴリー

Rev1.4で採用済

【CDP対応】ブロック化対応

メニューリンクをblockにしているテンプレートも少なくないので、cgi/sub.cgiの632行目と636行目あたり、$nest（■や▽を出力する変数）を削除するか、<a>以下に含めて$category{$id}の直前に移動させるのをおすすめします。

【カスタマイズ】親カテゴリーとサブカテゴリーにクラス名

menu-on有効になってないぽい？

# ハッシュのキーでソートする
foreach my $id ( sort keys %category ){
  if($i < 10){ $j = "0$i"; }
  else{ $j = $i; }

  if($id =~ /\_/){ 
     $nest = "▽"; #全角スペースは削除（やるならCSSで）
     $osdxmc = "osdx-sub_cate"; #サブカテゴリのクラス名
  }
  else{
     $nest = "■";
     $osdxmc = "osdx-main_cate"; #親カテゴリのクラス名
  }


  if($id eq $cid){
      $menu .= "  <li id=\"MENU$j\" class=\"$osdxmc menu-on\"><a href=\"$cnf{'cgi'}?sid=$sid&cate=$id\">$nest$category{$id}</a></li>\n";
  }
  else
  {
     $menu .= "  <li id=\"MENU$j\" class=\"$osdxmc\"><a href=\"$cnf{'cgi'}?sid=$sid&cate=$id\">$nest$category{$id}</a></li>\n";
  }
  $i++;
}

サブカテゴリでインデントしたい場合はtext-indentや余白指定で。

li.osdx-sub_cate{ text-indent: 1em; }
li.osdx-sub_cate{ padding-left: 1em; }
li.osdx-sub_cate{ margin-left: 1em; }

メニュー項目が右寄せのときは、-leftじゃなく-rightがよさげかな？

それより個人的にはサブカテゴリーは入れ子リストにする仕様になればいいのにと思う。

【修正】ステータス画像に代替テキスト

Rev1.4で採用済

HTML4.01では、alt属性が必須なので。（それにステータスは画像見れなくてもわかったほうがいい情報だろうし）

index.cgi 760行目付近（ステータス画像）

修正前

# 販売ステータスのアイコンを付ける
for($i = 0; $i <= $#h_status; $i++){
  if($i_status == $i || $i_status eq $h_status[$i]){
    $icon = "<<br>img src=\"./material/h_status$i.gif\"><br>";
    last;
  }
}
# 送料ステータスのアイコンを付ける
for($i = 1; $i <= $#s_status; $i++){
  if($i_send == $i){
    $icon .= "<img src=\"./material/s_status$i.gif\"><br>";
    last;
  }
}

修正後

# 販売ステータスのアイコンを付ける
for($i = 0; $i <= $#h_status; $i++){
  if($i_status == $i || $i_status eq $h_status[$i]){
    $icon = "<<br>img src=\"./material/h_status$i.gif\" alt=\"$h_status[$i]\"><br>";
    last;
  }
}
# 送料ステータスのアイコンを付ける
for($i = 1; $i <= $#s_status; $i++){
  if($i_send == $i){
    $icon .= "<img src=\"./material/s_status$i.gif\" alt=\"$s_status[$i]\"><br>";
    last;
  }
}

他は、index.cgiとsub.cgiを<imgで検索、表紙やサンプルの画像なのでとりあえずalt=\"\"を付け加えとく。

index.cgiの商品一覧の二つの $hyoushiのimgはアンカー文字としてalt=\"詳細\"とかのがいいかも。個別ページへのアンカーなので。

【修正】&を実体参照（&）に

Rev1.4で採用済

HTML4.01では、「&」のかわりに「&」をもちいるべきとされているので

index.cgiから「sid=$sid&」を検索し「sid=$sid&」に置き換え
index.cgiから「cate=$cate&を検索し「cate=$cate&」に置き換え
index.cgiから「act=slip&」を検索し「act=slip&」に置き換え
index.cgiから「act=manage&を検索し「act=manage&」に置き換え
cgi/sub.cgiから「sid=$sid&」を検索し「sid=$sid&」に置き換え
cgi/sub.cgiから「cate=$cate&を検索し「cate=$cate&」に置き換え

【修正】formとtableの入れ子

Rev1.4で採用済

HTML4.01では、table直下にformは不正なので

index.cgi 1513行目付近

修正前

<table>
<form method="post" action="$cnf{'cgi'}?sid=$sid"><tr><td>
<h3>ソ\ート</h3>

修正後

<form method="post" action="$cnf{'cgi'}?sid=$sid">
<table><tr><td>
<h3>ソ\ート</h3>

index.cgi 1530行目付近

修正前

</td></tr></form>
</table>

修正後

</td></tr>
</table></form>

以下随時

【修正/カスタマイズ】管理画面のエラー表示

Rev1.4で採用済

HTMLの不正（インライン要素下にブロック要素は含めない）の修正と、未出力に不要なもの出さない.

index.cgi 3916行目付近

修正前

if($err ne "") { $err = "<h3>設定エラー箇所</h3><br>".$err;}
$showform = <<EOD;
<em>$err<br><br></em>
<hr>

修正後

if($err ne "") { $err = "<h3>設定エラー箇所</h3><em>".$err."</em><hr>";}
$showform = <<EOD;
$err

免責

Rev1.4修正

【CSS/カスタマイズ】floatを使わずdisplay:inline-blockでアイテムを横並び

註

【CDP対応/カスタマイズ】フォームのボタンなどの横幅指定を削除

Rev1.4以降

Rev1.4以前

【修正/カタスタマイズ】plus.css

templateフォルダ内

【CDP対応】help.htm

方法1

方法2

【CDP対応】link.htm

【CDP対応】order.htm

方法1

方法2

【CDP対応】slip.htm

【CDP対応】temp.htm

方法1

方法2

ところで見出しレベル上げたほうがよくね？

【カスタマイズ】著作権部分をcss指定に

メニューのカテゴリー

【CDP対応】ブロック化対応

【カスタマイズ】親カテゴリーとサブカテゴリーにクラス名

【修正】ステータス画像に代替テキスト

【修正】&を実体参照（&amp;）に

【修正】formとtableの入れ子

【修正/カスタマイズ】管理画面のエラー表示

【修正】&を実体参照（&）に