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="sysPickinglistHeader">
  <!-- タイトル -->
  <div class="sysPickinglistHeaderTitle">[出荷指示書_タイトル]</div>

  <div class="sysPickinglistHeaderMeta">
    <!-- ページ情報 -->
    <div>
      <span class="sysPickinglistHeaderPageLabel">[ページ_ラベル]</span>
      <!-- 現在のページ / 総ページ数 -->
      <span class="page"></span>/<span class="topage"></span>
    </div>

    <!-- 注文番号 -->
    <div>
      <span class="sysPickinglistHeaderOrderNoLabel">[注文番号_ラベル]</span>
      <span class="section sysPickinglistHeaderOrderNo"></span>
    </div>

    <!-- 送付先番号 -->
    <div><span class="subsection sysPickinglistHeaderShippingNo"></span></div>
  </div>
</div>

表. ヘッダーの標準のCSS

.sysPickinglistHeader {

height: 80px;

}

.sysPickinglistHeaderTitle {

font-size: 40px;

float: left;

}

.sysPickinglistHeaderMeta {

font-size: 14px;

text-align: right;

float: right;

}

.sysPickinglistHeaderPageLabel::after {

content: ‘　’;

}

.sysPickinglistHeaderOrderNoLabel::after {

content: ‘：’;

}

2.2. メイン部のHTML構造とCSS

出荷指示書のメイン部のHTML構造と標準のCSSは下記のとおりです。

表. メイン部のHTML構造

<div class="sysPickingList">
  <!-- サマリ -->
  <table class="sysPickinglistSummary">
    <tbody>
      <tr>
        <!-- 注⽂⽇時 -->
        <td data-name="sysPickinglistSummaryOrderDateTime">
          <span class="sysPickinglistSummaryOrderDateTimeLabel sysPickinglistCommonLabel">[注⽂⽇時_ラベル]</span>
          <span class="sysPickinglistSummaryOrderDateTimeValue sysPickinglistCommonValue">[注⽂⽇時_値]</span>
        </td>
        <!-- 配送方法 -->
        <td data-name="sysPickinglistSummaryDeliveryMethod">
          <span class="sysPickinglistSummaryDeliveryMethodLabel sysPickinglistCommonLabel">[配送方法_ラベル]</span>
          <span class="sysPickinglistSummaryDeliveryMethodValue sysPickinglistCommonValue">[配送方法_値]</span>
        </td>
      </tr>
      <tr>
        <!-- お届け希望⽇ -->
        <td data-name="sysPickinglistSummaryDeliveryDate">
          <span class="sysPickinglistSummaryDeliveryDateLabel sysPickinglistCommonLabel">[お届け希望⽇_ラベル]</span>
          <span class="sysPickinglistSummaryDeliveryDateValue sysPickinglistCommonValue">[お届け希望⽇_値]</span>
        </td>
        <!-- お届け希望時間帯 -->
        <td data-name="sysPickinglistSummaryDeliveryTime">
          <span class="sysPickinglistSummaryDeliveryTimeLabel sysPickinglistCommonLabel">[お届け希望時間帯_ラベル]</span>
          <span class="sysPickinglistSummaryDeliveryTimeValue sysPickinglistCommonValue">[お届け希望時間帯_値]</span>
        </td>
      </tr>
      <tr>
        <!-- 発送予定⽇ -->
        <td data-name="sysPickinglistSummaryShipDate">
          <span class="sysPickinglistSummaryShipDateLabel sysPickinglistCommonLabel">[発送予定日_ラベル]</span>
          <span class="sysPickinglistSummaryShipDateValue sysPickinglistCommonValue">[発送予定日_値]</span>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- お届け先 / ご注文者情報 -->
  <table class="sysPickinglistShippingInformation">
    <tbody>
      <tr>
        <!-- お届け先情報 -->
        <td class="sysPickinglistDeliveryAddress">
          <div class="sysPickinglistDeliveryAddressLabel">[お届け先_タイトル]</div>
          <div class="sysPickinglistDeliveryAddressContent">
            <div class="sysPickinglistDeliveryAddressZipcode">[郵便番号]</div>
            <div class="sysPickinglistDeliveryAddressAddress">[住所]</div>
            <div class="sysPickinglistDeliveryAddressName">[氏名]</div>
            <div class="sysPickinglistDeliveryAddressTel">
              <span class="sysPickinglistDeliveryAddressTelLabel sysPickinglistCommonLabel">[電話番号_ラベル]</span>
              <span class="sysPickinglistDeliveryAddressTelValue sysPickinglistCommonValue">[電話番号_値]</span>
            </div>
            <div class="sysPickinglistDeliveryAddressCompany">
              <span class="sysPickinglistDeliveryAddressCompanyLabel sysPickinglistCommonLabel">[会社]</span>
              <span class="sysPickinglistDeliveryAddressCompanyName sysPickinglistCommonValue">[会社名]</span>
              <span class="sysPickinglistDeliveryAddressDepartmentName">[部署名]</span>
            </div>
          </div>
        </td>
        <!-- ご注文者情報 -->
        <td class="sysPickinglistBillingAddress">
          <div class="sysPickinglistBillingAddressLabel">[ご注文者_タイトル]</div>
          <div class="sysPickinglistBillingAddressContent">
            <div class="sysPickinglistBillingAddressZipcode">[郵便番号]</div>
            <div class="sysPickinglistBillingAddressAddress">[住所]</div>
            <div class="sysPickinglistBillingAddressName">[氏名]</div>
            <div class="sysPickinglistBillingAddressTel">
              <span class="sysPickinglistBillingAddressTelLabel sysPickinglistCommonLabel">[電話番号_ラベル]</span>
              <span class="sysPickinglistBillingAddressTelValue sysPickinglistCommonValue">[電話番号]</span>
            </div>
            <div class="sysPickinglistBillingAddressCompany">
              <span class="sysPickinglistBillingAddressCompanyLabel sysPickinglistCommonLabel">[会社_ラベル]</span>
              <span class="sysPickinglistBillingAddressCompanyName sysPickinglistCommonValue">[会社名]</span>
              <span class="sysPickinglistBillingAddressDepartmentName">[部署名]</span>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- 商品一覧 -->
  <table class="sysPickinglistPackageDetails">
    <thead>
      <tr>
        <!-- チェックボックスは標準レイアウトでは非表示です -->
        <th data-name="sysPickinglistPackageDetailsCheckbox">[チェックボックス_ラベル]</th>
        <th data-name="sysPickinglistPackageDetailsItemId">[商品管理番号_ラベル]</th>
        <th data-name="sysPickinglistPackageDetailsItemName">[商品名_ラベル]</th>
        <th data-name="sysPickinglistPackageDetailsItemPrice">[価格_ラベル]</th>
        <th data-name="sysPickinglistPackageDetailsItemNum">[数量_ラベル]</th>
        <th data-name="sysPickinglistPackageDetailsItemSubTotal">[小計_ラベル]</th>
      </tr>
    </thead>
    <tbody>
      <!-- 該当出荷先に含まれる商品が表示されます -->
      <tr>
        <!-- チェックボックスは標準レイアウトでは非表示です -->
        <td data-name="sysPickinglistPackageDetailsCheckbox">◻</td>
        <td data-name="sysPickinglistPackageDetailsItemId">[商品管理番号_値]</td>
        <td data-name="sysPickinglistPackageDetailsItemName">[商品名_値]</td>
        <td data-name="sysPickinglistPackageDetailsItemPrice">[価格_値]</td>
        <td data-name="sysPickinglistPackageDetailsItemNum">
          [数量_値]
          <!-- 返品がある場合 -->
          <div>(返品[返品された数量])</div>
        </td>
        <td data-name="sysPickinglistPackageDetailsItemSubTotal">[小計_値]</td>
      </tr>
    </tbody>
  </table>
  <!-- 商品合計 -->
  <table class="sysPickinglistPackageTotalPrice">
    <tr>
      <th data-name="sysPickinglistPackageTotalPriceLabel">[商品合計_ラベル]</th>
      <td data-name="sysPickinglistPackageTotalPriceValue">[商品合計_値]</td>
    </tr>
  </table>

  <!-- メモエリア -->
  <div class="sysPickinglistMemoContainer">
    <div class="sysPickinglistOrderRemarksWrapper">
      <!-- 注文備考(設定された数だけ表示されます) -->
      <div class="sysPickinglistOrderRemark">
        <div class="sysPickinglistOrderRemarkLabel">[注文備考_ラベル]</div>
        <div class="sysPickinglistOrderRemarkValue">[注文備考_値]</div>
      </div>
    </div>
    <!-- 注文メモ -->
    <div class="sysPickinglistOrderMemoWrapper">
      <div class="sysPickinglistOrderMemoLabel">[注文メモ_ラベル]</div>
      <div class="sysPickinglistOrderMemoValue">[注文メモ_値]</div>
    </div>
  </div>

  <div class="sysPickinglistOrderDetailsContainer">
    <!-- お問い合わせ番号 -->
    <div class="sysPickinglistSlipNumber">
      <span class="sysPickinglistSlipNumberLabel sysPickinglistCommonLabel">[お問合せ番号_ラベル]</span>
      <span class="sysPickinglistSlipNumberValue sysPickinglistCommonValue">[お問合せ番号_値]</span>
    </div>

    <!-- 注文情報 -->
    <div class="sysPickinglistOtherPrices">
      <div class="sysPickinglistOtherPricesTitle">[注文情報_タイトル]</div>
      <!-- お支払い方法 -->
      <div class="sysPickinglistPaymentMethod">
        <span class="sysPickinglistPaymentMethodLabel sysPickinglistCommonLabel">[お支払い方法_ラベル]</span>
        <span class="sysPickinglistPaymentMethodValue sysPickinglistCommonValue">[お支払い方法_値]</span>
      </div>
      <table class="sysPickinglistOtherPricesTable">
        <tbody>
          <!-- 注文総合計 -->
          <tr>
            <th data-name="sysPickinglistOrderTotalPrice">[注文総合計_ラベル]</th>
            <td data-name="sysPickinglistOrderTotalPrice">[注文総合計_値]</td>
          </tr>
          <!-- 注文商品合計 -->
          <tr>
            <th data-name="sysPickinglistOrderTotalItemPrice">[注文商品合計_ラベル]</th>
            <td data-name="sysPickinglistOrderTotalItemPrice">[注文商品合計_値]</td>
          </tr>
          <!-- 消費税 -->
          <tr>
            <th data-name="sysPickinglistTaxPice">[消費税_ラベル]</th>
            <td data-name="sysPickinglistTaxPice">[消費税_値]</td>
          </tr>
          <!-- 割引 -->
          <tr>
            <th data-name="sysPickinglistDiscountPrice">[割引_ラベル]</th>
            <td data-name="sysPickinglistDiscountPrice">[割引_値]</td>
          </tr>
          <!-- ポイント -->
          <tr>
            <th data-name="sysPickinglistPointPrice">[ポイント_ラベル]</th>
            <td data-name="sysPickinglistPointPrice">[ポイント_値]</td>
          </tr>
          <!-- クーポン -->
          <tr>
            <th data-name="sysPickinglistCoupon">[クーポン_ラベル]</th>
            <td data-name="sysPickinglistCoupon">[クーポン_値]</td>
          </tr>
          <!-- 送料 -->
          <tr>
            <th data-name="sysPickinglistDeliveryCost">[送料_ラベル]</th>
            <td data-name="sysPickinglistDeliveryCost">[送料_値]</td>
          </tr>
          <!-- 手数料 -->
          <tr>
            <th data-name="sysPickinglistHandlingFee">[手数料_ラベル]</th>
            <td data-name="sysPickinglistHandlingFee">[手数料_値]</td>
          </tr>
          <!-- 購入オプション -->
          <tr>
            <th data-name="sysPickinglistCartOption">[購入オプション_ラベル]</th>
            <td data-name="sysPickinglistCartOption">[購入オプション_値]</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- 検印欄エリア -->
  <div class="sysPickinglistStampFieldWrapper">
    <!-- 検印欄 -->
    <div class="sysPickinglistStampField" id="sysPickinglistField1">
      <div class="sysPickinglistStampFieldLabel">[検印欄_ラベル]</div>
      <div class="sysPickinglistStampFieldContent"></div>
    </div>
    <div class="sysPickinglistStampField" id="sysPickinglistField2">
      <div class="sysPickinglistStampFieldLabel">[検印欄_ラベル]</div>
      <div class="sysPickinglistStampFieldContent"></div>
    </div>
    <div class="sysPickinglistStampField" id="sysPickinglistField3">
      <div class="sysPickinglistStampFieldLabel">[検印欄_ラベル]</div>
      <div class="sysPickinglistStampFieldContent"></div>
    </div>
    <div class="sysPickinglistStampField" id="sysPickinglistField4">
      <div class="sysPickinglistStampFieldLabel">[検印欄_ラベル]</div>
      <div class="sysPickinglistStampFieldContent"></div>
    </div>
    <div class="sysPickinglistStampField" id="sysPickinglistField5">
      <div class="sysPickinglistStampFieldLabel">[検印欄_ラベル]</div>
      <div class="sysPickinglistStampFieldContent"></div>
    </div>
  </div>

  <!-- クーポン内訳 -->
  <div class="sysPickinglistCouponNames">
    <div class="sysPickinglistCouponNamesTitle">[クーポン内訳_タイトル]</div>
    <ul class="sysPickinglistCouponNamesList">
      <!-- 適用されたクーポンの数だけ表示されます -->
      <li>[クーポン_内容]</li>
    </ul>
  </div>

  <!-- 購入オプション内訳 -->
  <div class="sysPickinglistCartOptionDetails">
    <div class="sysPickinglistCartOptionDetailsTitle">[購入オプション内訳_タイトル]</div>
    <ul class="sysPickinglistCartOptionDetailsList">
      <!-- 設定された購入オプションの数だけ表示されます -->
      <li>
        <span class="sysPickinglistCartOptionDetailsLabel sysPickinglistCommonLabel">[購入オプション内訳_ラベル]</span>
        <span class="sysPickinglistCartOptionDetailsValue sysPickinglistCommonValue">[購入オプション内訳_選択内容]</span>
      </li>
    </ul>
  </div>
</div>

表. メイン部の標準のCSS

/* サマリ, お届け先・ご注文者情報 */

.sysPickinglistSummary,

.sysPickinglistShippingInformation {

width: 100%;

border-collapse: collapse;

table-layout: fixed;

margin-bottom: 16px;

}

.sysPickinglistSummary td,

.sysPickinglistShippingInformation td {

border: 1px solid #000;

padding: 8px;

text-align: left;

vertical-align: top;

word-break: break-all;

}

/* 商品一覧 */

.sysPickinglistPackageDetails {

width: 100%;

border-spacing: 0px;

border-collapse: collapse;

}

.sysPickinglistPackageDetails tr {

break-inside: avoid;

page-break-inside: avoid;

}

.sysPickinglistPackageDetails th {

padding: 4px;

font-weight: normal;

border: 1px solid #000;

}

.sysPickinglistPackageDetails td {

border: 1px solid #000;

padding: 4px;

}

/* 商品合計 */

.sysPickinglistPackageTotalPrice {

width: 100%;

border: 1px solid #000;

border-top: none;

border-spacing: 0px;

}

.sysPickinglistPackageTotalPrice th {

width: 80%;

font-weight: normal;

text-align: right;

padding: 4px;

}

.sysPickinglistPackageTotalPrice td {

text-align: right;

padding: 4px;

}

/* チェックボックス */

th[data-name=”sysPickinglistPackageDetailsCheckbox”] {

display: none;

}

td[data-name=”sysPickinglistPackageDetailsCheckbox”] {

text-align: center;

display: none;

}

/* 商品管理番号 */

td[data-name=”sysPickinglistPackageDetailsItemId”] {

width: 160px;

word-break: break-all

}

/* 商品名 */

td[data-name=”sysPickinglistPackageDetailsItemName”] {

width: auto;

word-break: break-all

}

/* 価格、小計 */

td[data-name=”sysPickinglistPackageDetailsItemPrice”],

td[data-name=”sysPickinglistPackageDetailsItemSubTotal”] {

min-width: 96px;

text-align: right;

vertical-align: top;

}

/* 数量 */

td[data-name=”sysPickinglistPackageDetailsItemNum”] {

min-width: 56px;

text-align: right;

vertical-align: top;

}

/* メモエリア */

.sysPickinglistMemoContainer {

border: 1px solid #000;

border-top: none;

margin-bottom: 16px;

}

.sysPickinglistOrderRemarksWrapper,

.sysPickinglistShippingMemoWrapper,

.sysPickinglistOrderMemoWrapper {

padding: 8px;

margin-bottom: 8px;

}

.sysPickinglistOrderRemarkValue,

.sysPickinglistShippingMemoValue,

.sysPickinglistOrderMemoValue {

margin-left: 1em;

word-break: break-word;

}

/* 注文情報 */

.sysPickinglistOrderDetailsContainer {

float: left;

width: 44%;

text-align: left;

}

.sysPickinglistSlipNumber,

.sysPickinglistOtherPrices {

width: 100%;

text-align: left;

margin-bottom: 16px;

}

.sysPickinglistOtherPricesTable {

border-spacing: 0;

}

.sysPickinglistOtherPricesTable tr {

break-inside: avoid;

page-break-inside: avoid;

}

.sysPickinglistOtherPricesTable th {

font-weight: normal;

}

.sysPickinglistOtherPricesTable th::after {

content: ‘：’;

}

.sysPickinglistOtherPricesTable td {

text-align: right;

}

.sysPickinglistPaymentMethod {

width: 100%;

box-sizing: border-box;

text-align: left;

}

th[data-name=”sysPickinglistTaxPice”],

th[data-name=”sysPickinglistDiscountPrice”],

th[data-name=”sysPickinglistPointPrice”],

th[data-name=”sysPickinglistCoupon”],

th[data-name=”sysPickinglistDeliveryCost”],

th[data-name=”sysPickinglistHandlingFee”],

th[data-name=”sysPickinglistCartOption”] {

padding-left: 16px;

}

/* 検印欄 */

.sysPickinglistStampFieldWrapper {

display: inline-block;

width: 56%;

box-sizing: border-box;

text-align: left;

margin-bottom: 16px;

border-right: 1px solid #000;

}

.sysPickinglistStampField {

float: right;

width: 96px;

height: 96px;

border: 1px solid #000;

border-right: none;

}

.sysPickinglistStampFieldLabel {

width: 100%;

height: 28px;

border-bottom: 1px solid #000;

text-align: center;

line-height: 28px;

}

/* クーポン・購入オプション内訳 */

.sysPickinglistCouponNames,

.sysPickinglistCartOptionDetails {

margin-bottom: 16px;

}

.sysPickinglistCouponNames::before,

.sysPickinglistCartOptionDetails::before,

.sysPickinglistBillingAddress::before {

content: “”;

display: block;

clear: both;

}

.sysPickinglistCouponNamesList,

.sysPickinglistCartOptionDetailsList {

margin: 0;

}

/* 共通 */

.sysPickinglistCommonLabel::after {

content: ‘：’

}

.sysPickinglistDeliveryAddressZipcode::before,

.sysPickinglistClientAddressZipcode::before,

.sysPickinglistBillingAddressZipcode::before {

content: ‘〒’

}

.sysPickinglistDeliveryAddressName::after,

.sysPickinglistClientAddressName::after,

.sysPickinglistBillingAddressName::after {

content: ‘ 様’

}

td[data-name=”sysPickinglistPackageTotalPriceValue”]::after,

td[data-name=”sysPickinglistPackageDetailsItemSubTotal”]::after {

content: ‘円’

}

2.3.フッター部のHTML構造とCSS

出荷指示書のフッター部分のHTML構造と標準のCSSは下記のとおりです。

表. フッターのHTML構造

<div class="sysPickinglistFooter">
  <div class="sysPickinglistFooterSellerName">[販売者名]</div>
  <div class="sysPickinglistFooterIssueDatetime">[出荷指示書出力日時]</div>
</div>

表. フッターの標準のCSS

.sysPickinglistFooter {

border-top: 1px solid #000;

padding: 5px 0;

text-align: center;

}

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の記述例 (例：サマリの上に文言を追加する)

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

  //この中に処理を記載してください
    //下記はサマリの上に文言を表示する例になります
    var summaryTables = document.querySelectorAll(".sysPickinglistSummary");

    for (var i = 0; i < summaryTables.length; i++) {
         var summaryTable = summaryTables[i];
         var addComment = document.createElement("p");
         addComment.textContent = "※こちらが追加された文言です。";
       
　　 if (summaryTable && summaryTable.parentNode) {
             summaryTable.parentNode.insertBefore(addComment, summaryTable);
        }
    }

});

4.関連記事

・受注一覧から出荷指示書を出力する

＞＞「受注管理_受注一覧」へ

・受注詳細から出荷指示書を出力する

＞＞「受注管理_受注詳細」へ

・出荷指示書のレイアウトを確認する

＞＞「受注管理_出荷指示書標準レイアウト」へ

＞＞「受注管理_出荷指示書標準レイアウト（食品・ギフト向け機能）」へ

・出荷指示書のレイアウトを調整する

＞＞「受注管理_受注詳細」へ