aiship.jpサイトへ
オンラインマニュアル

サイト管理

汎用帳票デザイン調整

受注管理 ＞ 汎用帳票設定

1. 概要

汎用帳票は、ショップの運用方法によって「注意書きを表示したい」「表示位置を変更したい」「特定の項目のみ色をつけて目立たせたい」などデザインを変更したい場合があります。aishipの汎用帳票は、CSSやJavaScriptを活用してショップの運用に合わせたデザインに調整していただけます。

2章では汎用帳票のHTML構成と標準のCSSについて、3章では使用可能なCSSやJavascriptのバージョンなどの注意事項について説明します。

2. 汎用帳票のHTML構造と標準のCSS

汎用帳票のヘッダーエリア、配送先/受取店舗エリア、注文日時エリア、フッターエリアに分けてHTML構造と標準のCSSについて説明します。

管理画面＞汎用帳票設定＞汎用帳票用CSSタブおよび汎用帳票用JSタブにて、汎用帳票のデザインを調整する際に参考にしてください。

図. 汎用帳票

2.1. ヘッダーエリア

汎用帳票のヘッダーエリアのHTML構造と標準のCSSは下記のとおりです。

表. ヘッダーエリアのHTML構造

<div class="sysReportHeader">
  <!-- 再発行マーク -->  
  <div class="sysReportHeaderReissue">再発行</div>
  <!-- タイトル -->
  <div class="sysReportHeaderTitle">[汎用帳票_タイトル]</div>
  <!-- 帳票日付 -->
  <div class="sysReportHeaderDate">
    <span class="sysReportHeaderDateLabel">[帳票日付_ラベル]</span>
    <span class="sysReportHeaderDateValue">[帳票日付_日付]</span>
  </div>
</div>

<!-- 宛名 -->
<div class="sysReportRecipient">
  <span class="sysReportRecipientName">[宛名]</span>
  <span class="sysReportRecipientLabel">[様 / 御中]</span>
</div>

<!-- ご注文者情報 / フリーエリア -->
<div class="sysReportBillingSection">
  <!-- ご注文者情報 -->
  <div class="sysReportBillingAddress">
    <div class="sysReportBillingAddressTitle">[注文者情報_タイトル]</div>
    <div class="sysReportBillingAddressZipcode">[郵便番号]</div>
    <div class="sysReportBillingAddressAddress">[住所]</div>
    <div class="sysReportBillingAddressCompanyName">[会社名]</div>
    <div class="sysReportBillingAddressDepartmentName">[部署名]</div>
    <div class="sysReportBillingAddressName">[氏名]</div>
    <div class="sysReportBillingAddressTel">[電話番号]</div>
  </div>

  <!-- フリーエリア -->
  <div class="sysReportFreeArea">[フリーエリア_テキスト]</div>
</div>

<!-- 販売者情報 -->
<div class="sysReportSeller">
  <div class="sysReportSellerTitle">[販売者情報_タイトル]</div>
  <div class="sysReportSellerZipcode">[郵便番号]</div>
  <div class="sysReportSellerAddress">[住所]</div>
  <div class="sysReportSellerName">[販売業社名]</div>
  <div class="sysReportSellerTel">[電話番号]</div>
  <div class="sysReportSellerMailAddress">[メールアドレス]</div>
  <div class="sysReportSellerInvoiceRegistrantNumber">[適格請求書登録事業者の登録番号]</div>
</div>

<!-- ご請求金額 -->
<div class="sysReportTotalPrice">
  <div>
    <span class="sysReportTotalPriceLabel">ご請求金額</span>
    <span class="sysReportTotalPriceValue">[ご請求金額]</span>
  </div>
</div>

<!-- 明細ヘッダー -->
<div class='sysReportOrderDetailHeader'>
  <div>お買い上げ明細</div>
</div>

表. ヘッダーエリアの標準のCSS

/* 再発行マーク*/
.sysReportHeaderReissue {
  text-align: center;
  font-size: 24px;
  padding: 2px;
  margin: 0 5% 10px 80%;
  width: 15%;
  border: 1px solid #000000;
}

/* タイトル */
.sysReportHeaderTitle {
  font-size: 24px;
  padding-left: 1em;
  padding-bottom: 2px;
  border-bottom: 2px solid;
}

/* 帳票日付 */
.sysReportHeaderDate {
  text-align: right;
  padding-top: 2px;
}

/* 宛名 */
.sysReportRecipient {
  font-size: 20px;
  margin-left: 1em;
  padding-top: 1em;
  padding-bottom: 2em;
  width: 50%;
}

.sysReportRecipientName {
  display: inline-block;
  width: 80%;
  border-bottom: 1px solid;
  word-break: break-all;
}

/* ご注文者情報・フリースペース */
.sysReportBillingSection {
  float: left;
  width: 50%;
  margin-left: 1em;
  margin-right: 1.5em;
  padding-bottom: 2em;
  word-break: break-all;
  display: flex;
  flex-direction: column;
}

/* ご注文者情報 */
.sysReportBillingAddress {
  padding-bottom: 2em;
  line-height: 1.5em;
}

.sysReportBillingAddressAddress,
.sysReportBillingAddressCompanyName,
.sysReportBillingAddressDepartmentName {
  margin-left: 1em;
}

.sysReportBillingAddressName,
.sysReportBillingAddressTel {
  margin-left: 2em;
}

/* フリーエリア */
.sysReportFreeArea {
  width: 95%;
  white-space: pre-wrap;
}

/* 販売者情報 */
.sysReportSeller {
  float: left;
  margin-top: 1em;
  line-height: 1.5em;
  width: 40%;
  word-break: break-all;
}

.sysReportSellerAddress,
.sysReportSellerName,
.sysReportSellerMailAddress {
  margin-left: 1em;
}

.sysReportSellerTel {
  margin-left: 2em;
}

/* 合計金額 */
.sysReportTotalPrice {
  width: 50%;
  font-size: 24px;
  border-bottom: 2px solid;
  padding-left: 1em;
  padding-bottom: 2px;
  clear: left;
}

.sysReportTotalPriceValue {
  float: right;
  padding-right: 1em;
}

/* 明細ヘッダー */
.sysReportOrderDetailHeader {
  margin-top: 2em;
  margin-bottom: 1em;
  border: 2px solid;
  padding: 1px 1em;
  background-color: rgb(211, 211, 211);
}

2.2. 配送先/受取店舗エリアのHTML構造とCSS

汎用帳票の配送先/受取店舗エリアのHTML構造と標準のCSSは下記のとおりです。

お届け先が1つの場合（以下、単一配送と呼ぶ）とお届け先が複数の場合（以下、複数配送と呼ぶ）で、出力するHTML構造が変化します。

表. 配送先/受取店舗エリアのHTML構造

<div class="sysReportDeliveryInfo">

  <!-- 以下はお届け方法が配送の場合に出力 -->
  <div class="sysReportDeliveryAddresses">
    <div class="title">■お届け先情報：</div>

    <!-- 各配送先情報 start（endまでの内容がお届け先の数だけ出力されます） -->
    <div class="sysReportDeliveryAddress">
      <div class="sysReportDeliveryAddressZipcode">[郵便番号]</div>
      <div class="sysReportDeliveryAddressAddress">[住所]</div>
      <div class="sysReportDeliveryAddressCompanyName">[会社名]</div>
      <div class="sysReportDeliveryAddressDepartmentName">[部署名]</div>
      <div class="sysReportDeliveryAddressName">[氏名]</div>
      <div class="sysReportDeliveryAddressTel">[電話番号]</div>

      <!-- 以下は複数配送の場合のみ出力 -->
      <div class="sysReportDeliveryAddressPackage">

        <!-- 各配送先の商品情報 start（endまでの内容が各配送先の商品ごとに出力されます） -->
        <div class="sysReportDeliveryAddressPackageItem">
          <div class="sysReportDeliveryAddressPackageItemName">
            <label class="sysReportDeliveryAddressPackageItemNameLabel">商品名：</label>
            <label class="sysReportDeliveryAddressPackageItemNameValue">[商品名]</label>
          </div>
          <div class="sysReportDeliveryAddressPackageNum">
            <label class="sysReportDeliveryAddressPackageNumLabel">数量：</label>
            <label class="sysReportDeliveryAddressPackageNumValue">[商品数量]</label>
          </div>
        </div>
        <!-- 各配送先の商品情報 end -->

        <div class='sysReportDeliveryAddressPackageDeliveryCost'>
          <span class="sysReportDeliveryAddressPackageDeliveryCostLabel">個別配送料：</span>
          <span class="sysReportDeliveryAddressPackageDeliveryCostValue">[個別配送料]</span>
        </div>
        <div class="sysReportDeliveryAddressPackageHopeDeliveryDate">
          <span class="sysReportDeliveryAddressPackageHopeDeliveryDateLabel">配送希望日：</span>
          <span class="sysReportDeliveryAddressPackageHopeDeliveryDateValue">[配送希望日]</span>
        </div>
        <div class="sysReportDeliveryAddressPackageHopeDeliveryTime">
          <span class="sysReportDeliveryAddressPackageHopeDeliveryTimeLabel">配送先希望時間帯：</span>
          <span class="sysReportDeliveryAddressPackageHopeDeliveryTimeValue">[配送希望時間帯]</span>
        </div>
      </div>
    </div>
    <!-- 各配送情報 end -->

  </div>

  <!-- 以下はお届け方法が店舗受取の場合に出力 -->
  <div class="sysReportReceiveStores">
    <div class="sysReportReceiveStoresTitle">■受取店舗名：</div>

    <!-- 各店舗情報 start（endまでの内容が受取店舗の数だけ出力されます） -->
    <div class="sysReportReceiveStore">
      <div class="sysReportReceiveStoreName">[店舗名]</div>

      <!-- 以下は受取店舗が複数ある場合のみ出力 -->
      <div class="sysReportReceiveStorePackage">

        <!-- 各受取店舗の商品情報 start（endまでの内容が各受取店舗の商品ごとに出力されます）-->
        <div class="sysReportReceiveStorePackageItem">
          <div class="sysReportReceiveStorePackageItemName">
            <span class="sysReportReceiveStorePackageItemNameLabel">商品名：</span>
            <span class="sysReportReceiveStorePackageItemNameValue">[商品名]</span>
          </div>
          <div class="sysReportReceiveStorePackageItemNum">
            <span class="sysReportReceiveStorePackageItemNumLabel">数量：</span>
            <span class="sysReportReceiveStorePackageItemNumValue">[商品数量]</span>
          </div>
        </div>
        <!-- 各受取店舗の商品情報 end -->

        <div class="sysReportReceiveStorePackageDeliveryDate">
          <span class="sysReportReceiveStorePackageDeliveryDateLabel">受取希望日：</span>
          <span class="sysReportReceiveStorePackageDeliveryDateValue">[受取希望日]</span>
        </div>
        <div class="sysReportReceiveStorePackageDeliveryTime">
          <span class="sysReportReceiveStorePackageDeliveryTimeLabel">受取先希望時間帯：</span>
          <span class="sysReportReceiveStorePackageDeliveryTimeValue">[受取希望時間帯]</span>
        </div>
      </div>
      <!-- 各店舗情報 end -->
       
    </div>
  </div>
</div>

表. 配送先/受取店舗エリアの標準のCSS

/* お届け先情報 */
.sysReportDeliveryInfo {
  float: left;
  width: 50%;
  margin-left: 1em;
  margin-right: 1em;
  line-height: 1.3em;
}

.sysReportDeliveryAddress {
  padding-bottom: 1em;
  word-break: break-all;
}

.sysReportDeliveryAddressAddress,
.sysReportDeliveryAddressCompanyName,
.sysReportDeliveryAddressDepartmentName {
  margin-left: 1em;
}

.sysReportDeliveryAddressName,
.sysReportDeliveryAddressTel,
.sysReportDeliveryAddressPackage {
  margin-left: 2em;
}

/* 店舗受取 */
.sysReportReceiveStores {
  margin-bottom: 1em;
  word-break: break-all;
}

.sysReportReceiveStoreName {
  margin-left: 1em;
}

.sysReportReceiveStorePackage {
  margin-left: 2em;
}

2.3. 注文日時エリアのHTML構造とCSS

汎用帳票の注文日時エリアのHTML構造と標準のCSSは下記のとおりです。配送希望日/受取希望日、配送先希望時間帯/受取希望時間帯は単一配送の場合の⁨⁩場合のみ表示します。複数配送の場合は配送先/受取店舗エリアに表示されます。

表. 注文日時エリアのHTML構造

<div class='sysReportOrderDatetimeShopOrderNo'>
  <!-- 注文日時 -->
  <div class='sysReportOrderDatetime'>
    <span class='sysReportOrderDatetimeLabel'>■注文日時：</span>
    <span class='sysReportOrderDatetimeValue'>[注文日時]</span>
  </div>

  <!-- 受注番号 -->
  <div class='sysReportShopOrderNo'>
    <span class='sysReportShopOrderNoLabel'>■受注番号：</span>
    <span class='sysReportShopOrderNoValue'>[受注番号]</span>
  </div>

  <!-- 配送希望日/受取希望日 単一配送の場合のみ表示 -->
  <div class='sysReportDeliveryDate'>
    <span class='sysReportDeliveryDateLabel'>[配送/受取希望日_ラベル]</span>
    <span class='sysReportDeliveryDateLabelValue'>[配送/受取希望日_値]</span>
  </div>

  <!-- 配送先希望時間帯/受取希望時間帯 単一配送の場合のみ表示-->
  <div class='sysReportDeliveryTime'>
    <span class='sysReportDeliveryTimeLabel'>[配送先/受取希望時間帯_ラベル]</span>
    <span class='sysReportDeliveryTimeValue'>[配送先/受取希望時間帯_値]</span>
  </div>
</div>

表. 注文日時エリアの標準のCSS

/* 注文日時エリア */
.sysReportOrderDatetimeShopOrderNo {
  float: left;
  width: 40%;
  padding-bottom: 1em;
  line-height: 1.3em;
}

2.4.注文明細のHTML構造とCSS

汎用帳票の注文明細エリアのHTML構造と標準のCSSは下記のとおりです。

表. 注文明細エリアのHTML構造

<!-- 支払方法 -->
<div class='sysReportPaymentMethod'>
  <span class='sysReportPaymentMethodLabel'>■お支払い方法：</span>
  <span class='sysReportPaymentMethodValue'>[決済名]</span>
</div>

<!-- 注文明細 -->
<table class="sysReportOrderDetailTable">
  <tr>
    <th class="sysReportOrderDetailItemId">商品番号</th>
    <th class="sysReportOrderDetailItemName">商品名</th>
    <th class="sysReportOrderDetailItemPrice">価格(税込)</th>
    <th class="sysReportOrderDetailItemNum">数量</th>
    <th class="sysReportOrderDetailItemSubTotal">小計(税込)</th>
  </tr>
  <tbody>

    <!-- 商品情報 start (商品ごとに繰り返し表示) -->
    <tr class='sysReportOrderDetailItem'>
      <td class='sysReportOrderDetailItemId'>[商品管理番号]</td>
      <td class='sysReportOrderDetailItemName'>[商品名]</td>
      <td class='sysReportOrderDetailItemPrice'>[商品単価]</td>
      <td class='sysReportOrderDetailItemNum'>[商品数量]</td>
      <td class='sysReportOrderDetailItemSubTotal'>[商品小計]</td>
    </tr>
    <!-- 商品情報 end -->

    <!-- 合計金額・オプション・割引など その他の価格表示 start (その他価格の数だけ繰り返し表示) -->
    <tr class='sysReportOrderDetailOtherPrice'>
      <td class='sysReportOrderDetailOtherPriceName' colspan='4'>[その他価格_ラベル]</td>
      <td class='sysReportOrderDetailOtherPriceNameValue'>[その他価格_値]</td>
    </tr>
    <!-- 合計金額・オプション・割引など その他の価格表示 end -->

    <!-- 標準税率価格 -->
    <tr class='sysReportOrderDetailTax'>
      <td class='sysReportOrderDetailTaxPrice' colspan='5'>[標準税率価格]</td>
    </tr>

    <!-- 軽減税率価格 -->
    <tr class='sysReportOrderDetailReducedTax'>
      <td class='sysReportOrderDetailReducedTaxPrice' colspan='5'>[軽減税率価格]</td>
    </tr>
  </tbody>
</table>

<!-- 軽減税率の対象商品についての注意書き -->
<div class="sysReportExplanation">(※)は軽減税率対象であることを示します。</div>

表. 注文明細エリアの標準のCSS

/* 支払方法 */
.sysReportPaymentMethod {
  margin-left: 1em;
  margin-bottom: 1em;
  clear: left;
}

/* 注文明細 */
.sysReportOrderDetailTable {
  table-layout: fixed;
  width: 100%;
  font-size: 15px;
  border-collapse: collapse;
}

.sysReportOrderDetailTable,
.sysReportOrderDetailTable td,
.sysReportOrderDetailTable th {
  border: 1px solid;
}

.sysReportOrderDetailTable th {
  background-color: #ffff99;
  padding: 4px;
}

.sysReportOrderDetailTable td {
  padding: 4px;
  word-break: break-all;
}

.sysReportOrderDetailItemId {
  width: 18%;
}

.sysReportOrderDetailItemName {
  width: auto;
}

.sysReportOrderDetailItemPrice {
  width: 12%;
}

.sysReportOrderDetailItemNum {
  width: 8%;
}

.sysReportOrderDetailItemSubTotal {
  width: 14%;
}

td.sysReportOrderDetailItemPrice,
td.sysReportOrderDetailItemNum,
td.sysReportOrderDetailItemSubTotal,
tr.sysReportOrderDetailOtherPrice,
td.sysReportOrderDetailTaxPrice,
td.sysReportOrderDetailReducedTaxPrice {
  text-align: right;
}

.sysReportExplanation {
  font-size: 14px;
}

2.5. 備考エリアのHTML構造とCSS

汎用帳票の備考エリアのHTML構造と標準のCSSは下記のとおりです。

表. 備考エリアのHTML構造

<div class='sysReportOrderRemarks'>

  <!-- 備考 start（設定された数だけ繰り返し表示） -->
  <div class='sysReportOrderRemark'>
    <div class='sysReportOrderRemarkTitle'>■[備考_タイトル]</div>
    <div class='sysReportOrderRemarkComment'>[備考_値]</div>
  </div>
  <!-- 備考 end -->

</div>

表. 備考エリアの標準のCSS

/* 備考欄 */
.sysReportOrderRemarks {
  margin-top: 1em;
  word-break: break-all;
}

.sysReportOrderRemark {
  margin-bottom: 1em;
}

.sysReportOrderRemarkComment {
  margin-left: 1em;
}

2.6.フッターエリアのHTML構造とCSS

汎用帳票のフッターエリアのHTML構造と標準のCSSは下記のとおりです。

表. フッターエリアのHTML構造

<div class='sysReportFooter'>
  <div class='sysReportFooterShopUrl'>[サイトURL]</div>
  <div class="sysReportFooterPageNo">
    <span class="page">[ページ番号]</span>/<span class="topage">[全体ページ数]</span>
  </div>
</div>

表. フッターエリアの標準のCSS

/* フッター */
.sysReportFooter {
  border-top: 2px solid;
  padding: 5px 0;
  text-align: center;
}

.sysReportFooterShopUrl {
  text-align: center;
}

.sysReportFooterPageNo {
  text-align: right;
  padding-right: 1em;
}

3. 注意事項

3.1. CSS

主にCSS2.1までの機能が利用可能です。

CSS3の一部の機能は利用可能ですが、レイアウトに関連する機能（例: flexbox、 grid layout、 order など）は動作しませんのでご注意ください。要素の並び替えなどのレイアウト制御を行いたい場合は、Javascriptで調整してください。

汎用帳票のカスタマイズ用のCSSは受注管理＞汎用帳票設定＞汎用帳票用CSSタブのテキストエリアに記載してください。

3.2. Javascript

JavaScriptのES5までの機能のみが利用可能です。

ES6以降の構文（例: let、const、アロー関数 など）は動作しませんのでご注意ください。

JavaScriptの処理時間には制限があり、処理時間の長いJavaScriptは反映されない場合があります。処理時間は100msまでを目安にしてください。

また、h1からh6までの見出しタグはレイアウトが崩れる可能性があるため追加しないでください。

下表はJavascriptの記述例です。こちらのコードを受注管理＞汎用帳票設定＞汎用帳票用JSタブのテキストエリアに設置してください。

表. Javascriptの記述例 (例：ご請求金額の文言を変更する)

ocument.addEventListener("DOMContentLoaded", function () {

  //この中に処理を記載してください
    // 下記は「ご請求金額」の文言を「総合計金額」へ変更するサンプルコードです。
 
    var label = document.querySelector('.sysReportTotalPriceLabel');
    if (label && label.innerText.replace(/^\s+|\s+$/g, '') === 'ご請求金額') {
      label.innerText = '総合計金額';
    }
});

4.関連記事

・汎用帳票のレイアウトを確認する

＞＞「受注管理_汎用帳票レイアウト」へ

・汎用帳票の出力内容を設定する

＞＞「受注管理_汎用帳票設定」へ

・汎用帳票出力可能な決済方法を設定する

＞＞「顧客管理_マイページ設定」へ