アプリの特徴
- シンプル設計でのしを選ぶだけで導入可能
- 導入しやすい$4.99/月
- 32種類ののしから必要なものを選択
- もちろん日本語に対応
- シンプルで無駄な機能なし
- デザインを邪魔しないシンプルで洗練されたUI
- お客様がのし選びに迷わないよう説明文にこだわりました。
- のし画像はお好みで入れ替え可能
のしブロックの余白や文字の大きさは、テーマのカスタムCSSで調整できます。この記事では、CSSで使える「目印」（クラス名）をご紹介します。
CSSがわからない方は、この記事を読む必要はありません。変更しなくても、のしは通常どおり使えます。
この記事でわかること
- のしブロック全体と、各項目のクラス名
- 余白や文字の大きさを変えるCSSの書き方の例
- CSSを入れる場所と、保存して確認する方法
- 開発者向けの補足（古いID指定）
操作する場所：Shopify管理画面 → オンラインストア → 使っているテーマの「テーマを編集する」（テーマのカスタムCSSの入力欄）
1️⃣ クラス名を確認する
次のクラス名を使って、項目ごとに見た目を調整できます。
| クラス名 | 対応する部分 |
|---|---|
| .gift-noshi-block-container | のしブロック全体 |
| .noshi-section--needed | 「必要／不要」の選択 |
| .noshi-section--youto | 「1. 用途を選ぶ」 |
| .noshi-section--omotegaki | 「2. 表書きを選ぶ」 |
| .noshi-section--type | 「内のし・外のしを選ぶ」 |
| .noshi-section--name | 「名入れ入力（任意）」 |
2️⃣ カスタムCSSに書く
お使いのテーマのカスタムCSSの入力欄に、CSSを書きます。たとえば、のしブロック全体の上の余白を大きくするときは、次のように書きます。
.gift-noshi-block-container {
margin-top: 24px;
}margin-top: 24px; は、「上の余白を24ピクセル分あける」という意味です。数字を変えると、余白の大きさが変わります。
「2. 表書きを選ぶ」だけ、上の余白を大きくしたい場合は、次のとおりです。
.noshi-section--omotegaki {
margin-top: 16px;
}文字を大きくする例です。「2. 表書きを選ぶ」の文字を、18ピクセルの大きさにします。
.noshi-section--omotegaki {
font-size: 18px;
}CSSを入れる場所：多くのテーマでは、テーマエディタの左端にある歯車のアイコン（テーマ設定）の中に、「カスタムCSS」の入力欄があります。テーマによって名前や場所が違います。見つからないときは、お使いのテーマの作者に、「カスタムCSSの入力場所」をお問い合わせください。
3️⃣ 保存して確認する
書き終わったら、テーマエディタ右上の「保存」を押して、商品ページで見た目を確認します。思ったようにならないときは、書いたCSSを消すと元に戻ります。
開発者向けの補足：古いID指定について
以前は、ID指定でCSSを書く方法がありました。次の9つのIDは、互換のために、ページの中の最初のブロックにだけ、今も付いています。今後は、上のクラス名での指定をおすすめします。
- #giftNoshiToggle
- #noshiSelect
- #noshiDetails
- #noshiYouto
- #omoteRadioGroup
- #noshiOmotegakiIdInput
- #noshiTypeSelect
- #noshiNameEntryInput
- #giftNoshiContent
うまくいかないとき
-
CSSを書いたのに、見た目が変わらない
テーマエディタ右上の「保存」を押したか確認してください。クラス名の書き間違いがないか、先頭の「.」が付いているかも確認してください。テーマ側のCSSが優先されている場合は、書き方を調整する必要があります。 -
のしブロックが2つあるページで、片方にだけCSSが効かない
古いIDは最初のブロックにだけ付きます。クラス名で指定してください。1ページに置くブロックは1つにするのがおすすめです。
