受注管理

見積書デザイン調整

受注管理＞見積書設定

1. 概要

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

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

2. 見積書のHTML構造と標準のCSS

見積書のヘッダーエリア、明細エリア、フリーエリア、フッターエリアに分けてHTML構造と標準のCSSについて説明します。

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

図. 見積書

2.1. 見積書全体CSS

見積書全体に適用される標準のCSSは下記のとおりです。

表. 見積書全体に適用される標準のCSS

body {
  font-size: 17px;
  margin: 0 16px;
}

2.2. ヘッダーエリアのHTML構造とCSS

見積書のヘッダーエリアのHTML構造と標準のCSSは下記のとおりです。

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

<div class="sysEstimateHeader">
  <!-- タイトル -->
  <div class="sysEstimateHeaderTitle">御見積書</div>
  <!-- 見積書番号 -->
  <div class="sysEstimateHeaderEstimateNo">
    <span class="sysEstimateHeaderEstimateNoLabel">見積書番号：</span>
    <span class="sysEstimateHeaderEstimateNoValue">[見積書番号]</span>
  </div>
  <!-- 御見積日 -->
  <div class="sysEstimateHeaderDate">
    <span class="sysEstimateHeaderDateLabel">御見積日：</span>
    <span class="sysEstimateHeaderDateValue">[見積書発行日付]</span>
  </div>
</div>

<!-- 宛名 -->
<div class="sysEstimateRecipient">
  <span class="sysEstimateRecipientName">[宛名]</span>
  <span class="sysEstimateRecipientLabel">様</span>
</div>

<!-- 販売者情報 -->
<div class="sysEstimateSeller">
  <div class="sysEstimateSellerZipcode">〒 [郵便番号]</div>
  <div class="sysEstimateSellerAddress">[住所]</div>
  <div class="sysEstimateSellerName">[販売業社名]</div>
  <div class="sysEstimateSellerTel">TEL:[電話番号]</div>
  <div class="sysEstimateSellerMailAddress">e-mail:[メールアドレス]</div>
</div>

<!-- 御見積金額 -->
<div class='sysEstimateTotalPrice'>
  <div class='sysEstimateTotalPricePrice'>
    <span class='sysEstimateTotalPriceLabel'>御見積金額</span>
    <span class='sysEstimateTotalPriceValue'>[御見積金額] 円</span>
  </div>
  <div class='sysEstimateTotalPriceNotes'>
    <!-- 各注釈情報 start（endまでの内容が注釈の数だけ出力されます） -->
      <span class='sysEstimateTotalPriceNote'>[注釈]</span>
    <!-- 各注釈情報 end -->
  </div>
</div>

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

/* ヘッダー */
.sysEstimateHeaderTitle {
  font-size: 24px;
  padding-left: 1em;
  padding-bottom: 2px;
  border-bottom: 2px solid;
}

/* 見積書番号・御見積日 */
.sysEstimateHeaderEstimateNo,
.sysEstimateHeaderDate {
  text-align: right;
  padding-top: 2px;
}

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

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

/* 販売者情報 */
.sysEstimateSeller {
  float: right;
  width: 38%;
  font-size: 16px;
  line-height: 1.2;
  margin-top: 0.2em;
  word-break: break-word;
  text-align: left;
}

.sysEstimateSellerAddress,
.sysEstimateSellerName,
.sysEstimateSellerTel,
.sysEstimateSellerMailAddress {
  margin-left: 1em;
}

/* 御見積金額 */
.sysEstimateTotalPrice {
  padding-left: 1em;
  clear: both;
  margin-bottom: 18px;
  font-size: 20px;
}

.sysEstimateTotalPricePrice {
  width: 50%;
  border-bottom: 2px solid;
  padding-bottom: 2px;
  overflow: hidden;
}

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

.sysEstimateTotalPriceNotes {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.2;
}

.sysEstimateTotalPriceNote {
  display: block;
}

2.3. 明細エリアのHTML構造とCSS

見積書の明細エリアのHTML構造と標準のCSSは下記のとおりです。

表. 明細エリアのHTML構造

<!-- 明細 -->
<table class="sysEstimateDetailTable">
  <tr>
    <th class="sysEstimateDetailItemId">商品番号</th>
    <th class="sysEstimateDetailItemName">商品名</th>
    <th class="sysEstimateDetailItemPrice">価格(税込)</th>
    <th class="sysEstimateDetailItemNum">数量</th>
    <th class="sysEstimateDetailItemSubTotal">小計(税込)</th>
  </tr>
  <tbody>
    {{-- 購入商品の価格出力 --}}
    <!-- 商品情報 start (商品ごとに繰り返し表示) -->
      <tr class='sysEstimateDetailItem'>
        <td class='sysEstimateDetailItemId'>[商品管理番号]</td>
        <td class='sysEstimateDetailItemName'>
            [商品名]

            <!-- 商品の通常価格合計・掛け率 見積書設定画面で「通常価格/値引率」を「表示する」に設定した場合に表示 -->
            <br>
            <span class='sysEstimateDetailItemTradeRateInfo'>
                (<span class='sysEstimateDetailItemOriginalPrice'>通常価格：<span class='sysEstimateDetailItemOriginalPriceValue'>[通常価格]</span>円</span>
                　<span class='sysEstimateDetailItemEffectivePrice'>適用価格：<span class='sysEstimateDetailItemEffectivePriceValue'>[適用価格]</span>円</span>
                　<span class='sysEstimateDetailItemDiscountRate'>値引率：<span class='sysEstimateDetailItemDiscountRateValue'>[値引率]</span>%</span>)
            </span>

            [商品オプション名]
        </td>
        <td class='sysEstimateDetailItemPrice'>[商品単価]</td>
        <td class='sysEstimateDetailItemNum'>[商品数量]</td>
        <td class='sysEstimateDetailItemSubTotal'>[商品小計]円</td>
      </tr>
    <!-- 商品情報 end →
    <tr class='sysEstimateDetailOtherPrice'>
      <!-- 商品に対する割引が適用されている場合に表示 -->
      <td class='sysEstimateDetailOtherPriceName' colspan='4' align='right'>割引</td>
      <td class='sysEstimateDetailOtherPriceValue' align='right'>[割引額]</td>
      <!-- 商品に対するクーポンが適用されている場合に表示 -->
      <td class='sysEstimateDetailOtherPriceName' colspan='4' align='right'>クーポン（[クーポン名]）</td>
      <td class='sysEstimateDetailOtherPriceValue' align='right'>[クーポン割引額]</td>
    </tr>
  </tbody>
</table>

<!-- 軽減税率商品に対する注釈 明細内に軽減税率適用の商品または商品オプションが存在する場合に表示 -->
<div class="sysEstimateExplanation">(※)は軽減税率対象であることを示します。</div>

<!-- 商品合計の通常価格合計・掛け率 見積書設定画面で「通常価格/値引率」を「表示する」に設定した場合に表示 -->
<div class='sysEstimateTradeRateSummary'>
    <span class='sysEstimateTradeRateSummaryRegularPrice'>通常価格合計：<span class='sysEstimateTradeRateSummaryRegularPriceValue'>[通常価格合計]</span>円</span>
    <span class='sysEstimateTradeRateSummaryEffectivePrice'>適用価格合計：<span class='sysEstimateTradeRateSummaryEffectivePriceValue'>[適用価格合計]</span>円</span>
    <span class='sysEstimateTradeRateSummaryTradeRate'>掛け率：<span class='sysEstimateTradeRateSummaryTradeRateValue'>[掛け率]</span>%を適用しています。</span>
</div>

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

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

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

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

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

.sysEstimateDetailItemId {
  width: 18%;
}

.sysEstimateDetailItemName {
  width: auto;
}

.sysEstimateDetailItemPrice {
  width: 14%;
}

.sysEstimateDetailItemNum {
  width: 8%;
}

.sysEstimateDetailItemSubTotal {
  width: 14%;
}

td.sysEstimateDetailItemPrice,
td.sysEstimateDetailItemNum,
td.sysEstimateDetailItemSubTotal {
  text-align: right;
}

/* 軽減税率商品に対する注釈 */
.sysEstimateExplanation {
  font-size: 14px;
}

/* 商品合計の通常価格合計・掛け率 */
.sysEstimateTradeRateSummary {
  font-size: 14px;
}

2.4. フリーエリアのHTML構造とCSS

見積書のフリーエリアのHTML構造と標準のCSSは下記のとおりです。

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

<!-- フリーエリア -->
<div class="sysEstimateFreeArea">[フリーエリア]</div>

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

/* フリーエリア */
.sysEstimateFreeArea {
  font-size: 14px;
  margin-top: 6px;
}

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

見積書のフッターエリアのHTML構造と標準のCSSは下記のとおりです。

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

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

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

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

.sysEstimateFooterShopUrl {
  text-align: center;
}

.sysEstimateFooterPageNo {
  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の記述例 (例：御見積金額の文言を変更する)

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

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