アプリの特徴
- お客様がサンクスページ・注文状況ページ・メールから自分で発行
- インボイス登録番号と、8%・10%の税率ごとの内訳に対応
- 会社のロゴ・印鑑・テーマカラーを設定できる
- 管理画面から1件ずつでも、まとめてでも印刷
- 帳票は日本語と英語に対応
- Proプラン：備考の出し分け・発行済みタグ・発行回数の制限
- Hydrogenプラン：ヘッドレス（Hydrogen）ストアでも発行
※注意
「新しいお客様アカウント」対応。
「従来のお客様アカウント」には一部対応。（テーマ「Dawn/Rise/Studio」対応済み）
帳票の文字の大きさや色、余白などを、CSS で細かく調整する方法です。制作会社や CSS に詳しい方に依頼して設定していただく使い方を想定しています。
※この機能は Pro プラン・Hydrogen プランでお使いいただけます（開発ストアでは無料でお試しいただけます）。プランについては「料金プラン」をご覧ください。
この記事でわかること
- カスタムCSSの入れ方
- CSS をあてる場所（セレクタ）の調べ方
- CSS が反映される範囲
操作する場所：Shopify管理画面 → アプリ → 「SAKU Receipt」 → 左メニュー「設定」 → 「カスタムCSS」
始める前に用意するもの
- SAKU領収書がインストールされていること
- Pro プランまたは Hydrogen プラン（開発ストアでは無料で試せます）
- CSS の基本的な知識（あるいは CSS に詳しい方への依頼）
- ブラウザの検証画面（Chrome なら右クリック→「検証」）を使えること
1️⃣ CSS を入力する
設定画面の一番下の「カスタムCSS」に CSS を入力します。入力すると右のプレビューがすぐに更新されるので、見た目を確かめてから「保存」を押します。プレビューに変更が入っていれば完了です。
入力した CSS は、右のプレビューにすぐ反映されます。
たとえば、表題の文字を大きくして字間を広げ、会社名の色を少し薄くするには、次のように書きます。
h1.title { font-size: 34px; letter-spacing: 14px; }
.company-name { color: #555555; }この例で、変えてよい部分と、変えない部分は次のとおりです。
| 部分 | 扱い |
|---|---|
34px、14px、#555555 などの値 |
好きな大きさ・色に変えてよい部分です |
font-size、letter-spacing、color などのプロパティ名 |
変えたい内容に合わせて選びます |
h1.title、.company-name などのセレクタ（波かっこ { } の前） |
帳票の要素のクラス名と一致させる部分です。変えると別の要素に適用される、または反映されません。調べ方は2️⃣をご覧ください |
{ }、:、;
|
CSS の書き方のおやくそくです。消すと保存できなくなります |
2️⃣ セレクタを調べる
- ブラウザの検証画面を開きます（Chrome なら右クリック→「検証」）。
- 右のプレビューの帳票の、変えたい要素を選びます。
- その要素についているクラス名を確かめ、セレクタに使いましょう。クラス名の前には「.」を付けます（例：クラス名が company-name なら
.company-name）。 - カスタムCSSに書いて、プレビューに反映されることを確かめます。
3️⃣ 反映される範囲を知る
- 書いた CSS は、SAKU領収書の帳票の中（
.receipt-print-containerの中）だけに適用されます。ストアのほかのページには影響しません。 - プレビュー・管理画面の印刷・お客様側の帳票のすべてに、同じように反映されます。
-
@importとscriptは保存時に取り除かれます。 - 元に戻したいときは、入力欄を空にして保存してください。
うまくいかないとき
-
保存できない
CSS に書き間違い（かっこの閉じ忘れなど）があると、「カスタムCSSに構文エラーがあるため保存できません」と表示されます。表示された場所を直してから保存してください。 -
反映されない
セレクタが帳票の要素と合っているかを、検証画面で確かめてください。ほかの指定より弱い場合は、セレクタを詳しく書いてください。
カラーやロゴなど、CSS を使わない設定は「書式の設定方法」をご覧ください。
