テンプレート

カラム内マージン

カラム内マージン（最小）…製品紹介
すべて16px

カラム内マージン（小）…サイト内2リンクのカラム内、トップの3カラムのカード内
SP 24px タブレット 24px PC 32px

カラム内マージン（中）…トップの3カラムのカード内
SP 40px タブレット 40px PC 32px

カラム内マージン（大・PC狭）…OEM
SP 40px タブレット 40px PC 64px

カラム内マージン（大）…OEMトップ
SP 40px タブレット 40px PC 80px

セクションマージン

製品事例上マージン
PC 40px, タブレット 40px, SP 32px

セクションマージン（小）…OEM、SPUTNA、ナノバブル
PC 160px, タブレット 80px, SP 80px

セクションマージン（中）…OEMトップ
PC 160px, タブレット 120px, SP 120px

セクションマージン（大）…ナノバブル
PC 40px, タブレット 40px, SP 160px

ボタンのマージン

製品紹介ボタン上マージン
すべて16px

ボタン上マージン（小）…サイト内2リンクのカラム内
PC 32px, タブレット 32px, SP 24px

ボタン上マージン（中）…トップ
PC 80px, タブレット 40px, SP 40px

ボタン上マージン（大）…SPUTNA, ナノバブル
PC 80px, タブレット 80px, SP 40px

製品事例ボタン下マージン…事業案内
すべて80px

特定のコンポーネントに対するマージン

CTA（電話）上マージン…問い合わせ
すべて40px

入力フォーム上マージン
PC 80px, タブレット 80px, SP 48px

説明文下マージン…問い合わせ、OEM下層ラインナップ
PC 80px, タブレット 80px, SP 40px

見出しマージン

見出しマージン（小・PCなし）…OEM下層トップの見出し下
PC 0px, タブレット 32px, SP 32px

見出しマージン（小）…製品紹介、ナノバブル
PC 40px, タブレット 40px, SP 32px

見出しマージン（中・やや小）… OEMトップのキャッチコピー下、トップ
すべて40px

見出しマージン（中）… OEM下層ページのキャッチコピー上下
PC 56px, タブレット 56px, SP 40px

見出しマージン（中・変化なし）… 事業案内、ナノバブル
すべて56px

見出しマージン（大・タブレット小）…トップ
PC 80px, タブレット 40px, SP 40px

見出しマージン（大・タブレット中）…OEMトップ
PC 80px, タブレット 56px, SP 56px

見出しマージン（大・タブレット大）…OEM、事業案内、SPUTNA、ナノバブル
PC 80px, タブレット 80px, SP 40px

アコーディオン

FAQ

カラム

1. 小ロットでの作成が可能
   費用も他社に比べて割安感 まずは小ロットで、試作品を作成したい…
   記念品なので、何千本も必要ない…
   ご安心ください、そんなニーズを大変多くいただいております。低価格でご対応可能です。ぜひ他社と比較してみてください。
2. 大事なのは設計・デザイン
   提案力に自信があります ペットボトルという容器のメリット・デメリットに精通した専属のデザイナーがあなたのイメージを3D化します。
   モチーフとなるキャラクターや商品の魅力を最大限に引き出すデザインでご提案させていただきます。
3. 企画から製造・販売まで一貫
   安心しておまかせ 企画から設計、金型製作・ペットボトル製造・飲料水の充填・梱包・納品まで一貫して弊社グループ内で行います。
   完成後の販促や販売ルートのご紹介などまでサポートさせていただきますので、初めての方こそお任せください。

1. 酸素たっぷりでおいしい 酸素ナノバブルが含まれているので、まろやかでおいしいお水でまろやかでおいしいお水でまろやかでおいしいお水です。
2. 酸素たっぷりでおいしい 酸素ナノバブルが含まれているので、まろやかでおいしいお水です。
3. 酸素たっぷりでおいしい 酸素ナノバブルが含まれているので、まろやかでおいしいお水です。
4. 酸素たっぷりでおいしい 酸素ナノバブルが含まれているので、まろやかでおいしいお水です。

カルーセル、スライダー

プラグインMeta Sliderで作成し、ショートコードを貼り付けて使用してください。

キャッチコピーキャッチコピーキャッチコピーキャッチコピー
キャッチコピーキャッチコピーキャッチコピーキャッチコピー

OEM下層のトップのセクションで使用中

小見出し

見出しheading

見出しheading

見出し（少し小さめ）heading

自動スクロール

ショートコードをスマホとPCで表示わけする

Meta sliderで作成したスライダーをスマホとPCで表示わけしたい時に使います。

デフォルト投稿を最新の順番に５件表示する（PCのみ）

デフォルト投稿を最新の順番に５件表示する（スマホのみ）

セクション

1. ご入力
2. ご確認
3. 送信完了

お電話でのお問い合わせ

043-306-1411

新日本化成株式会社 ヘルスデザイン事業部
営業時間 9:00-17:00(土日祝休)

テーブル

テーブルスクロール＆スクロールヒントの表示は、tableタグを囲っているdivタグに「.js-scroll 」を付与してください。また、.c-tableクラスを付与するとこのデザインのテーブルになります。

見出し	見出し
店舗運営責任者	〒260-0015 千葉県千葉市中央区富士見1-15-8 RC千葉ビル10階
内容はここ	内容はここにきます
内容はここ	内容はここにきます
内容はここ	内容はここにきます

店舗運営責任者	〒260-0015 千葉県千葉市中央区富士見1-15-8 RC千葉ビル10階
内容はここ	内容はここにきます
内容はここ	内容はここにきます
内容はここ	内容はここにきます
見出し	見出し

動画・youtube埋め込み

wp-block-button__link の要素に data-lity=”” 属性を追加する。
ビジュアル編集は非対応のようなので、カスタムHTMLに変換する。

iframeの周りをdivで囲み「c-youtube」クラスを付与します。
横幅を調整したい場合は、外側のdivのmax-widthを指定してください。

投稿埋め込みショートコード

デフォルト投稿を最新の順番に3件表示する

ボタン

見出し・日本語

見出しheading

見出し（スマホ少し大きめ）heading

見出し（スマホ通常）heading

heading見出し

heading見出し（少し小さい）

見出し・英語

heading中央寄せ

heading中央寄せ

headingレイアウト左寄せ・テキスト中央寄せ
クラス「-fit」追加

headingクラス「-sm」追加

headingシリーズ

モーダル

リード・本文

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

※内部リンクはこんな感じで設定してください

リードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリード

リードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリードテキストリード